将 function 组件更改为 class 组件时，`npm init react-app` 导致 `'React' is not defined no-undef`

Question

I used npm init react-app appname which creates, among other files, App.js . In that file is a function component:

function App() {
  return (
    <SomeJSX />
  );
}

I edited the function component into a class component, like so:

class App extends React.Component{
  render() {
    return (
      <TheSameJSX />
    );
  }
}

Now, when I run npm start , I get an error:

Failed to compile

src/App.js
  Line 4:19:  'React' is not defined  no-undef

Search for the keywords to learn more about each error.

I imagine I need to add some setting somewhere that will automatically include React without me needing to explicitly import it at the top of every file. How do I do this? And why does this npm package not do that by default? I know a bit about javascript (and html and css), and have read a bit about React, but I am completely unaware of how npm or webpack works.

Thanks in advance!

EDIT: To clarify, I know how to import stuff with javascript. I can easily add import React from 'react'; to the file and make it work. However, I find it difficult to believe that adding an import statement to every single javascript file is the recommended method, and I don't understand why this example app wouldn't be set up so as to avoid having to do that. Am I mistaken? Do I really need to manually import the same thing over and over again within the same project? Could I set a global variable to React so that I can use it from wherever?

Answer 1

In your default function component you're not extending any classes and just writing a simple function

function App() {
      return (
        <SomeJSX />
      );
    }

In class component, you're in fact extending the Class Component by React.Component provided by React default export object and hence you must import it from the package

//only use one of these 
import * as React from "react"; 
import {Component} from "react"; // you can directly extend without writing `React.` with this import 
import React from "react"

So your code would be

import React from "react";

class App extends React.Component{
  render() {
    return (
      <TheSameJSX />
    );
  }
}

Any of the above imports should be fine with a preference to the first and second one.