Getting 'React' must be in scope when using JSX

Question

I am new to react and I tried the following code

person.js

const element = <h1>Hello world</h1>;
export default element;

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';



function Hello() {
  return Person.element;
}



class App extends Component {

  render() {

    return (
      <div className="App">
        <Hello></Hello>
      </div>
    );
  }
}

export default App;

But getting the below errors

work/my-app/src/person/person.js 3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope

When I changed to a simple hello word as below, then it works fine.

person.js

const element = 'hello world';
export default element;

I tried with different ways by checking different forum

1. importing the ReactDom
2. in person.js changed to module.exports=element

Answer 1

The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.

person.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';

const element = <h1>Hello world</h1>;
export default element;

Answer 2

You need to import React in every file that exports a component (App in this case).

Answer 3

The latest React 17 Version: No need to include React in the scope

If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850