get React' must be in scope when using JSX error when import component

Question

I am writing this code and import React and Component in app/js file and also try to import app.js to index.js . but I get this error ' 'React' must be in scope when using JSX in index.js

app.js :

import React ,{Component} from 'react';

class App extends Component{
    constructor(props){
        super(props);

    }
    render(){
        return (
            <div>
                <h1>Hello Ashkan</h1>
            </div>
        );
    }
}


export default App;

index.js

import ReactDOM from 'react-dom';
import App from './app'



ReactDOM.render(<App/>,document.getElementById('root'));

I got this error

./src/index.js Line 6:'React' must be in scope when using JSX react/react-in-jsx-scope

Answer 1

You are using JSX in here ( <App /> ):

ReactDOM.render(<App/>,document.getElementById('root'));

Whenever you use JSX React should be in scope.