title: why should we use import React from 'react'
body: <p>i am learning React js in <strong>case ii</strong> App.js module i have to import React because the <i>render()</i> method is used to convert JSX to dom elements how ever in Person.js we are creating a arrow function and we are exporting it so that it can be imported and used in the App modules render function how ever in App module we have React imported and it will convert the JSX  in module  person 
  and gets rendered on DOM but when it throws an error when we remove the below code in Person.js</p>
  
  <pre><code>import React from 'react' in Person.js
  </code></pre>
  
  <p>it throws error   </p>
  
  <p><em>React' must be in scope when using JSX</em>   if we declare JSX in the methods (like render ) provided from React class it should give an error.</p>
  
  <p>can someone please explain </p>
  
  <p>i)why do we need to import react in Person.js?</p>
  
  <p>ii)why was it throwing error when we remove the above code?</p>
  
  <p>case i) </p>
  
  <blockquote>
    <p>Person.js</p>
  </blockquote>
  
  <pre><code> import React from 'react'
  
   const person = () =&gt; {
   return &lt;p&gt;This is person module used inside app module&lt;/p&gt;
   };
  
   export default person
  </code></pre>
  
  <p>case ii)</p>
  
  <blockquote>
    <p>App.js</p>
  </blockquote>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css'
  import Person from './Person/Person'
  
  class App extends Component {
  render() {
  return (
    &lt;div className="App"&gt;
      &lt;h1&gt;this is app module and i am being used as the root component&lt;/h1&gt;
       &lt;Person/&gt;
    &lt;/div&gt;
  );}}
  
  export default App;
  </code></pre>