React doit être dans le champ d'application lors de l'utilisation de JSX react/react-in-jsx-scope ?

Question

Je suis un développeur Angular et je suis novice en React. Il s'agit d'un simple composant React mais il ne fonctionne pas.

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;

Erreur : React doit être dans le champ d'application lors de l'utilisation de JSX react/react-in-jsx-scope

Answer 1

La ligne d'importation devrait être :

import React, { Component }  from 'react';

Notez le R majuscule pour React.

Answer 2

Ajouter le paramètre ci-dessous à .eslintrc.js / .eslintrc.json pour ignorer ces erreurs :

  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
  }

Pourquoi ? Si vous utilisez NEXT.js alors vous n'avez pas besoin d'importer React en haut des fichiers, nextjs le fait pour vous.

Answer 3

Si vous utilisez React v17, vous pouvez sans risque désactiver la règle dans votre fichier de configuration eslint :

"rules": {
   ...
    "react/react-in-jsx-scope": "off"
   ...
}

Answer 4

Pour ceux qui ne comprennent toujours pas la solution acceptée :

Ajouter

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

en haut du fichier.

Answer 5

import React, { Component } from 'react';

C'est une erreur d'orthographe, vous devez taper React au lieu de react .