¿'React' debe estar dentro del alcance cuando se usa JSX react / react-in-jsx-scope?


129

Soy un desarrollador angular y nuevo en React, este es un componente de reacción simple pero no funciona

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;

Error: 'Reaccionar' debe estar dentro del alcance cuando se usa JSX react / react-in-jsx-scope

Respuestas:


250

La línea de importación debe ser:

import React, { Component }  from 'react';

Tenga en cuenta la R mayúscula para Reaccionar.


3
Cómo evitarlo. Quiero decir, cuando creo una función sin estado, en Nextjs no lo requiere
Muhaimin CS

1
@MuhaiminCS cambia la regla en su archivo eslintrc
patrick

24

Para aquellos que aún no obtienen la solución aceptada:

Añadir

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

en la parte superior del archivo.


14

Agregue la siguiente configuración a .eslintrc.js/ .eslintrc.jsonpara ignorar estos errores:

  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
  }

¿Por qué? Si está utilizando NEXT.js, no necesita importar Reacten la parte superior de los archivos, nextjs lo hace por usted.


Usuario de NextJs aquí, gracias por esto. Dado que agregar la regla "react/react-in-jsx-scope": "off"eliminará el error, ¿qué logra la adición globals? ¡Gracias!
DeBraid

10
import React, { Component } from 'react';

Este es un error de ortografía, debe escribir en Reactlugar de react.


Esta respuesta exacta ya se proporcionó como la respuesta aceptada.
Dylan Maxey
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.