Fondamentaux de React - De React à Next.js

Jusqu'à présent, nous avons exploré comment commencer avec React. Voici à quoi ressemble le code final. Si vous commencez à partir d'ici, copiez ce code dans un fichier index.html dans votre éditeur de code.

index.html

<html>
  <body>
    <div id="app"></div>
 
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <script type="text/jsx">
      const app = document.getElementById("app")
 
      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }
 
      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
 
        const [likes, setLikes] = React.useState(0)
 
        function handleClick() {
          setLikes(likes + 1)
        }
 
        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
 
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }
 
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

Dans les derniers chapitres, vous avez été initié à trois concepts essentiels de React : les composants, les props et l'état. Avoir une solide base dans ces concepts vous aidera à commencer à construire des applications React.

Quand il s'agit d'apprendre React, la meilleure façon d'apprendre est de construire. Vous pouvez adopter React progressivement en utilisant <script> et ce que vous avez appris jusqu'à présent pour ajouter de petits composants à un site web existant. Cependant, de nombreux développeurs ont trouvé l'expérience utilisateur et développeur que React permet suffisamment précieuse pour plonger directement et écrire toute leur application frontend en React.

De React à Next.js

Bien que React excelle dans la construction d'interfaces utilisateur, il faut un certain travail pour transformer cette interface en une application fonctionnelle et évolutive. Il y a aussi de nouvelles fonctionnalités React, comme les composants Serveur et Client, qui nécessitent un framework. La bonne nouvelle est que Next.js gère une grande partie de la configuration et possède des fonctionnalités supplémentaires pour vous aider à construire des applications React.

Ensuite, nous migrerons l'exemple de React vers Next.js, discuterons du fonctionnement de Next.js et vous présenterons les différences entre les composants Serveur et Client.

De React à Next.js

De React à Next.js

On this page