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

Gopinath Kaliappan
fuente

Respuestas:

250

La línea de importación debe ser:

import React, { Component }  from 'react';

Tenga en cuenta la R mayúscula para Reaccionar.

Patricio
fuente
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.

Ankit Pandey
fuente
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.

JerryGoyal
fuente
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.

kallayya Hiremath
fuente
Esta respuesta exacta ya se proporcionó como la respuesta aceptada.
Dylan Maxey