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.
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.