'React' ต้องอยู่ในขอบเขตเมื่อใช้ JSX react / react-in-jsx-scope?

ฉันเป็นนักพัฒนาเชิงมุมและเพิ่งเริ่มใช้ React นี่เป็นส่วนประกอบการตอบสนองที่เรียบง่าย แต่ใช้งานไม่ได้

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;

ข้อผิดพลาด: 'React' ต้องอยู่ในขอบเขตเมื่อใช้ JSX react / react-in-jsx-scope

บรรทัดการนำเข้าควรเป็น:

import React, { Component }  from 'react';

สังเกตตัวพิมพ์ใหญ่ R สำหรับ React

สำหรับผู้ที่ยังไม่ได้รับโซลูชันที่ยอมรับ:

เพิ่ม

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

ที่ด้านบนสุดของไฟล์

เพิ่มการตั้งค่าด้านล่างเป็น.eslintrc.js/ .eslintrc.jsonเพื่อละเว้นข้อผิดพลาดเหล่านี้:

  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
  }

ทำไม? หากคุณใช้งานอยู่NEXT.jsคุณไม่จำเป็นต้องนำเข้าReactที่ด้านบนของไฟล์ nextjs จะทำเพื่อคุณ

import React, { Component } from 'react';

นี่คือข้อผิดพลาดการสะกดคำที่คุณจำเป็นต้องพิมพ์แทนReactreact