logoNext.js
DocumentationBlogApprendre

Démarrage avec React

Pour utiliser React dans votre nouveau projet, chargez deux scripts React depuis un site externe appelé unpkg.com :

  • react est la bibliothèque principale de React.
  • react-dom fournit des méthodes spécifiques au DOM qui vous permettent d'utiliser React avec le DOM.
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 type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

Au lieu de manipuler directement le DOM avec du JavaScript pur, supprimez les méthodes DOM que vous aviez ajoutées précédemment et ajoutez la méthode ReactDOM.createRoot() pour cibler un élément DOM spécifique et créer une racine pour afficher vos composants React. Ensuite, ajoutez la méthode root.render() pour rendre votre code React dans le DOM.

Cela indiquera à React d'afficher notre titre <h1> à l'intérieur de notre élément #app.

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>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Si vous essayez d'exécuter ce code dans le navigateur, vous obtiendrez une erreur de syntaxe :

Terminal
Uncaught SyntaxError: expected expression, got '<'

C'est parce que <h1>...</h1> n'est pas du JavaScript valide. Ce morceau de code est du JSX.

Qu'est-ce que JSX ?

JSX est une extension de syntaxe pour JavaScript qui vous permet de décrire votre interface utilisateur avec une syntaxe familière de type HTML. L'avantage de JSX est qu'en dehors des trois règles JSX, vous n'avez pas besoin d'apprendre de nouveaux symboles ou syntaxes en dehors de HTML et JavaScript.

Mais les navigateurs ne comprennent pas JSX nativement, vous aurez donc besoin d'un compilateur JavaScript, comme Babel, pour transformer votre code JSX en JavaScript standard.

Ajouter Babel à votre projet

Pour ajouter Babel à votre projet, copiez et collez le script suivant dans votre fichier index.html :

index.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

De plus, vous devrez indiquer à Babel quel code transformer en changeant le type de script en type=text/jsx.

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 Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

Pour confirmer que cela fonctionne correctement, ouvrez votre fichier HTML dans le navigateur.

En comparant le code React déclaratif que vous venez d'écrire :

index.html
<script type="text/jsx">
  const domNode = document.getElementById("app")
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

avec le code JavaScript impératif que vous avez écrit dans la section précédente :

index.html
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

Vous pouvez commencer à voir comment utiliser React vous permet de réduire considérablement le code répétitif.

Et c'est exactement ce que fait React, c'est une bibliothèque qui contient des extraits de code réutilisables qui effectuent des tâches pour vous - dans ce cas, mettre à jour l'interface utilisateur.

Ressources supplémentaires :

Vous n'avez pas besoin de savoir exactement comment React met à jour l'interface utilisateur pour commencer à l'utiliser, mais si vous souhaitez en savoir plus, voici quelques ressources supplémentaires :

JavaScript essentiel pour React

Bien que vous puissiez apprendre JavaScript et React en même temps, être familier avec JavaScript peut faciliter le processus d'apprentissage de React.

Dans les sections suivantes, vous serez initié à certains concepts clés de React du point de vue de JavaScript. Voici un résumé des sujets JavaScript qui seront mentionnés :

Bien que ce cours ne plonge pas dans JavaScript, il est bon de se tenir à jour avec les dernières versions de JavaScript. Mais si vous ne vous sentez pas encore à l'aise avec JavaScript, ne laissez pas cela vous empêcher de commencer à construire avec React !

Mise à jour de l'interface utilisateur avec JavaScript

Découvrez comment utiliser les écouteurs d'événements et JavaScript pour mettre à jour l'interface utilisateur.

Construire une interface utilisateur avec des composants

Apprenez à construire une interface utilisateur modulaire avec des composants React.

On this page