• Home
  • Jobs
  • Courses
  • Teachers
  • For business
  • Blog
  • ES/EN

0

25
Views
'React' must be in scope when using JSX react/react-in-jsx-scope?

I am an Angular Developer and new to React , This is simple react Component but not working

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' must be in scope when using JSX react/react-in-jsx-scope

about 1 month ago ·

Santiago Trujillo

3 answers
Answer question

0

The import line should be:

import React, { Component }  from 'react';

Note the uppercase R for React.

about 1 month ago · Santiago Trujillo Report

0

Add below setting to .eslintrc.js / .eslintrc.json to ignore these errors:

  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
  }

Why? If you're using NEXT.js then you do not require to import React at top of files, nextjs does that for you.

Ref: https://gourav.io/blog/nextjs-cheatsheet

about 1 month ago · Santiago Trujillo Report

0

For those who still don't get the accepted solution :

Add

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

at the top of the file.

about 1 month ago · Santiago Trujillo Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.