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

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

• javascript
• reactjs

Share Improve this question Follow edited May 25, 2020 at 0:52 user414967 asked May 25, 2020 at 0:26 user414967user414967 5,3351010 gold badges4141 silver badges6262 bronze badges 5

• Your imports must be at the very top of your files. – Oguntoye Commented May 25, 2020 at 0:29
• Both of those should import react, and your imports should go at the top of your file. – zero298 Commented May 25, 2020 at 0:30
• Judging by the other ments, I think that maybe your imports need to be at the very top of the file – V. Dimitrov Commented May 25, 2020 at 0:33
• I have updated the question. When I post the question,by mistake App.js file name has e in between javascript code that was the reason it was showing the imports in between. – user414967 Commented May 25, 2020 at 0:55
• Does this answer your question? 'React' must be in scope when using JSX react/react-in-jsx-scope? – Henry Commented Oct 23, 2022 at 22:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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;

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

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./facebook/create-react-app/issues/9850