When using 'React' in JSX, it must be included in the scope react/react-in-jsx-scope

Question

I am an Angular developer and new to React. This is a simple React component, but it doesn't work.

import react, { Component } from 'react';
import { render } from 'react-dom';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       }
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;

mistake: When using JSX, 'React' must be in scope react/react-in-jsx-scope

Answer 1

Add the following settings in .eslintrc.js / .eslintrc.json to ignore these errors:

rules: {
    // suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
  }

Why? If you are using NEXT.js, there is no need to import React at the top of the file, nextjs will do it for you.

Reference: https://gourav.io/blog/nextjs-cheatsheet（Next.js cheatsheet）

Answer 2

The import line should be:

import React, { Component }  from 'react';

Note the capital R in React.