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           render      from  react-dom    class TechView extends Component        constructor props          super props          this state                name  Gopinath                     render            return               lt span gt hello Tech View lt  span gt                      export default TechView    Error     React  must be in scope when using JSX  react react-in-jsx-scope

User · Answer

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

User · Answer

The import line should be   import React    Component    from  react     Note the uppercase R for React

User · Answer

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

User · Answer

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               lt span gt hello Tech View lt  span gt                      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     lt React StrictMode gt       lt TechView   gt     lt  React StrictMode gt     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     lt React StrictMode gt       lt TechView   gt     lt  React StrictMode gt     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

User · Answer

This is an error caused by importing the wrong module react from  react  how about you try this  1st import React     Component   from  react    2nd Or you can try this as well  import React from  react   import   render      from  react-dom    class TechView extends React Component        constructor props          super props          this state                name  Gopinath                      render            return               lt span gt hello Tech View lt  span gt                      export default TechView

User · Answer

import React    Component   from  react     This is a spelling error  you need to type React instead of react

User · Answer

Follow as in picture for removing that lint error and adding automatic fix by addin g--fix in package json

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

Examples related to reactjs