'React' deve estar no escopo ao usar JSX react / react-in-jsx-scope?

129

Eu sou um desenvolvedor angular e novo no React, este é um componente simples do react, mas não está funcionando

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;

Erro: 'React' deve estar no escopo ao usar JSX react / react-in-jsx-scope

Gopinath Kaliappan
fonte

Respostas:

250

A linha de importação deve ser:

import React, { Component }  from 'react';

Observe o R maiúsculo para React.

patrick
fonte
3
como evitá-lo. Quero dizer, quando eu criar uma função sem estado, em Nextjs ele não exige que
Muhaimin CS
1
@MuhaiminCS alterar a regra em seu arquivo eslintrc
patrick
24

Para quem ainda não obtém a solução aceita:

Adicionar

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

na parte superior do arquivo.

Ankit Pandey
fonte
14

Adicione a configuração abaixo a .eslintrc.js/ .eslintrc.jsonpara ignorar esses erros:

  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ê? Se você estiver usando NEXT.js, não precisará importar Reactna parte superior dos arquivos, o nextjs fará isso por você.

JerryGoyal
fonte
Usuário NextJs aqui, obrigado por isso. Dada a adição da regra "react/react-in-jsx-scope": "off", eliminará o erro, o que a adição é globalsrealizada? Obrigado!
DeBraid 10/06
10
import React, { Component } from 'react';

Este é um erro de ortografia, você precisa digitar em Reactvez de react.

kallayya Hiremath
fonte
Essa resposta exata já foi fornecida como resposta aceita.
Dylan Maxey