title: "React must be in scope when using JSX" (react/react-in-jsx-scope with "window.React = React" on index.js)
body: <p>I am following Chapter 5, &quot;React with JSX&quot;, of &quot;Learning React&quot; from O'Reilly.</p>
  <p>I wrote the Recipes App using <code>create-react-app</code> as the base.</p>
  <p><strong>index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import './index.css';
  
  import App from './App';
  import Menu from './Menu';
  
  import registerServiceWorker from './registerServiceWorker';
  
  import data from './data/recipes';
  
  window.React = React;
  
  ReactDOM.render(&lt;Menu recipes={data} /&gt;, document.getElementById('root'));
  
  registerServiceWorker();
  </code></pre>
  <p><strong>Menu.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Recipes from './Recipes';
  
  const Menu = ({recipes}) =&gt; (
      &lt;article&gt;
          &lt;header&gt;
              &lt;h1&gt;Delicious Recipes&lt;/h1&gt;
          &lt;/header&gt;
          &lt;div className = &quot;recipes&quot;&gt;
          {recipes.map((recipe, i)=&gt;    
              &lt;Recipes key={i} {...recipe}  /&gt;
          )}
          &lt;/div&gt;
      &lt;/article&gt;
  );
  
  export default Menu;
  </code></pre>
  <p>And  have the following error:</p>
  <pre class="lang-sh prettyprint-override"><code>Failed to compile ./src/Menu.js
    Line 5:   'React' must be in scope when using JSX  react/react-in-jsx-scope
    Line 6:   'React' must be in scope when using JSX  react/react-in-jsx-scope
    Line 7:   'React' must be in scope when using JSX  react/react-in-jsx-scope
    Line 9:   'React' must be in scope when using JSX  react/react-in-jsx-scope
    Line 11:  'React' must be in scope when using JSX  react/react-in-jsx-scope
      
  Search for the keywords to learn more about each error.
  This error occurred during the build time and cannot be dismissed.
  </code></pre>
  <p>The book says &quot;setting <code>window.React</code> to <code>React</code> exposes the React library globally in the browser. This way all calls to <code>React.createElement</code> are assured to work&quot;. But it seems like I still need to import React on each file that uses JSX.</p>