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

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

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

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.

Ref: https://gourav.io/blog/nextjs-cheatsheet

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.

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

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

import React, { Component } from 'react';

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

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

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

In my case, I had to include this two-line in my index.js file from the src folder.

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

In your case, this might be different. You may need to include components if you're using class-based components.

import React, { Component }  from 'react';

Alternatively, If you are using eslint you can get some solutions from the above comments.

know more

add "plugin:react/jsx-runtime" to extends in your eslint config file, refer react-in-jsx-scope

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;

When using the react framework, you first need to import the react from react and always keep the first letter of react in uppercase after import.

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;```

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

If you are running React 17+ (and in 2022, I assume, that you are) - you need to add the following line to your .eslintrc:

{
  "extends": ["plugin:react/jsx-runtime"]
}

Then only import React once in your top-level file, like App.jsx - and no need to import it anywhere else, unless you need an api like useEffect etc.