I am an Angular developer and new to React. This is a simple React component, but it doesn't work.
import react, { Component } from 'react'; import { render } from 'react-dom'; class TechView extends Component { constructor(props){ super(props); this.state = { name:'Gopinath' } } render(){ return( hello Tech View ); } } export default TechView;
mistake:When using JSX, 'React' must be in scope react/react-in-jsx-scope
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Add the following settings in
.eslintrc.js/.eslintrc.jsonto 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 are using
NEXT.js, there is no need to importReactat the top of the file, nextjs will do it for you.Reference:https://gourav.io/blog/nextjs-cheatsheet（Next.js cheatsheet）
The import line should be:
import React, { Component } from 'react';Note the capital R in React.