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

L'erreur est très simple, vous avez importé réagir au lieu de React .

Answer 2

Si vous souhaitez automatiser l'inclusion de import React from 'react' pour tous les fichiers qui utilisent jsx installez la syntaxe react-require plugin babel :

npm install babel-plugin-react-require --save-dev

Ajouter react-require dans .babelrc. Ce plugin doit être défini avant le plugin transform-es2015-modules-commonjs car il utilise la syntaxe des modules ES2015 pour importer React dans le scope.

{
  "plugins": [
    "react-require"
  ]
}

Source : https://www.npmjs.com/package/babel-plugin-react-require

Answer 3

Il s'agit d'une erreur causée par l'importation du mauvais module react de 'react'. Essayez ceci : 1er

import React , { Component}  from 'react';

2ème Ou vous pouvez aussi essayer ceci :

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;

Answer 4

Suivez les instructions de l'image pour supprimer l'erreur de lint et ajouter un correctif automatique en ajoutant un correctif dans le package.json.