JSXのreact / react-in-jsx-scopeを使用する場合、「React」はスコープ内にある必要がありますか？

私はAngular開発者で、Reactが初めてです。これは単純な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;

エラー： JSXのreact / react-in-jsx-scopeを使用する場合、「React」はスコープ内にある必要があります

インポート行は次のようになります。

import React, { Component }  from 'react';

Reactの大文字のRに注意してください。

それでも受け入れられた解決策が得られない人のために：

追加

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';

これはスペルミスReactですreact。の代わりに入力する必要があります。