Getting ‘React’ must be in scope when using JSX

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

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;