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

Question

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

import react , { Component}  from \'react\';
import         { re         


        

Answer 1

The error is very straight forward, you imported react instead of React.

TechView.jsx

import React , { Component} from 'react';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       }
    }

    render(){
        return(
            hello Tech View
        );
    }
}

export default TechView;

Also you don't need to import render in the above code unless it's the root level index.js.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TechView from './TechView';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

serviceWorker.unregister();

Note: You could have imported render the way you did in your original post and used it directly:

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import TechView from './TechView';
import * as serviceWorker from './serviceWorker';

render(
  
    
  ,
  document.getElementById('root')
);

serviceWorker.unregister();

Here, TechView becomes the main react component, which is conventionally also known as App. So, in this context instead of naming the file as TechView.jsx I'd name it App.jsx and instead of naming the class as TechView I'd name it App.