title: Importing React First vs Second
body: <p>Why does the following code work:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  </code></pre>
  <p>But when I switch the order around, this DOES NOT work:</p>
  <pre><code>import { useState }, React from &quot;react&quot;;
  </code></pre>
  <p>And I receive the following error. They are seemingly exactly the same commands just reversed in order.
  <a href="https://i.stack.imgur.com/X9SBK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9SBK.jpg" alt="enter image description here" /></a></p>
  <p>For reference, here's the entire file:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  // import { useState }, React from &quot;react&quot;;
  
  import MoviesList from &quot;./components/MoviesList&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
      const [movies, setMovies] = useState([]);
      function fetchMoviesHandler() {
          fetch(&quot;https://swapi.dev/api/films&quot;)
              .then((rsvp) =&gt; {
                  return rsvp.json();
              })
              .then((data) =&gt; {
                  const transformedMovies = data.results.map((movie) =&gt; {
                      return {
                          id: movie.episode_id,
                          title: movie.title,
                          openingText: movie.opening_crawl,
                          releaseDate: movie.release_date,
                      };
                  });
                  setMovies(transformedMovies);
              });
      }
  
      return (
          &lt;React.Fragment&gt;
              &lt;section&gt;
                  &lt;button onClick={fetchMoviesHandler}&gt;Fetch Movies&lt;/button&gt;
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;MoviesList movies={movies} /&gt;
              &lt;/section&gt;
          &lt;/React.Fragment&gt;
      );
  }
  
  export default App;
  </code></pre>