'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         { re         


        

Answer 1

import React, { Component } from 'react';

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

Answer 2

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 3

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 4

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

TechView.jsx

import React , { Component} from 'react';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       }
    }

    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;

Also you don't need to import render in the above code unless it's the root level index.js.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TechView from './TechView';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <TechView />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Note: You could have imported render the way you did in your original post and used it directly:

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import TechView from './TechView';
import * as serviceWorker from './serviceWorker';

render(
  <React.StrictMode>
    <TechView />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Here, TechView becomes the main react component, which is conventionally also known as App. So, in this context instead of naming the file as TechView.jsx I'd name it App.jsx and instead of naming the class as TechView I'd name it App.

Answer 5

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

Answer 6

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.