'React' must be in scope when using JSX react/react-in-jsx-scope?

Question

I am an Angular Developer and new to React , This is simple react Component but not working

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;

Error : 'React' must be in scope when using JSX react/react-in-jsx-scope

Answer 1

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

Answer 2

Add below setting to .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're using NEXT.js then you do not require to import React at top of files, nextjs does that for you.

Answer 3

For those who still don't get the accepted solution :

Add

import React from 'react'
import ReactDOM from 'react-dom'

at the top of the file.

Answer 4

import React, { Component } from 'react';

This is a spelling error, you need to type React instead of react.

Answer 5

If you're using React v17, you can safely disable the rule in your eslint configuration file:

"rules": {
   ...
    "react/react-in-jsx-scope": "off"
   ...
}

Answer 6

If you'd like to automate the inclusion of import React from 'react' for all files that use jsx syntax, install the react-require babel plugin:

npm install babel-plugin-react-require --save-dev

Add react-require into .babelrc. This plugin should be defined before transform-es2015-modules-commonjs plugin because it's using ES2015 modules syntax to import React into scope.

{
  "plugins": [
    "react-require"
  ]
}

Source: https://www.npmjs.com/package/babel-plugin-react-require

Answer 7

This is an error caused by importing the wrong module react from 'react' how about you try this: 1st

import React , { Component}  from 'react';

2nd Or you can try this as well:

import React from 'react';
import { render   }  from 'react-dom';

class TechView extends React.Component {

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

export default TechView;

Answer 8

Follow as in picture for removing that lint error and adding automatic fix by addin g--fix in package.json

Answer 9

The error is very straight forward, you imported react instead of React.