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: 'React' debe estar dentro del alcance cuando se usa JSX react/react-in-jsx-scope
La línea de importación debe ser:
import React, { Component } from 'react';Tenga en cuenta la R mayúscula de React.
Agregue la siguiente configuración a .eslintrc.js / .eslintrc.json para 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 , entonces no necesita importar React en la parte superior de los archivos, nextjs lo hace por usted.
Referencia: https://gourav.io/blog/nextjs-cheatsheet
Para aquellos que aún no obtienen la solución aceptada:
Agregar
import React from 'react' import ReactDOM from 'react-dom'en la parte superior del archivo.