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
This question is related to
reactjs
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.
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.
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.
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;
import React, { Component } from 'react';
This is a spelling error, you need to type React
instead of react
.
Source: Stackoverflow.com