Fondamentaux React - Mise à jour de l\'interface utilisateur avec JavaScript

Dans ce chapitre, nous allons commencer à construire notre projet en utilisant JavaScript et les méthodes DOM pour ajouter une balise h1 à votre projet.

Ouvrez votre éditeur de code et créez un nouveau fichier index.html. À l'intérieur du fichier HTML, ajoutez le code suivant :

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

Ensuite, donnez au div un id unique afin de pouvoir le cibler plus tard.

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

Pour écrire du JavaScript dans votre fichier HTML, ajoutez une balise script :

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

Maintenant, à l'intérieur de la balise script, vous pouvez utiliser une méthode DOM, getElementById(), pour sélectionner l'élément <div> par son id :

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

Vous pouvez continuer à utiliser les méthodes DOM pour créer un nouvel élément <h1> :

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // Sélectionne l'élément div avec l'id 'app'
      const app = document.getElementById('app');
 
      // Crée un nouvel élément H1
      const header = document.createElement('h1');
 
      // Crée un nouveau nœud de texte pour l'élément H1
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // Ajoute le texte à l'élément H1
      header.appendChild(headerContent);
 
      // Place l'élément H1 à l'intérieur du div
      app.appendChild(header);
    </script>
  </body>
</html>

Pour vérifier que tout fonctionne, ouvrez votre fichier HTML dans le navigateur de votre choix. Vous devriez voir une balise h1 qui affiche 'Develop. Preview. Ship.'.

HTML vs. le DOM

Si vous regardez les éléments DOM dans les outils de développement de votre navigateur, vous remarquerez que le DOM inclut l'élément <h1>. Le DOM de la page est différent du code source - ou en d'autres termes, du fichier HTML original que vous avez créé.

Deux diagrammes côte à côte montrant les différences entre les éléments DOM rendus et le code source (HTML)

C'est parce que le HTML représente le contenu initial de la page, tandis que le DOM représente le contenu mis à jour de la page qui a été modifié par le code JavaScript que vous avez écrit.

Mettre à jour le DOM avec du JavaScript pur est très puissant mais verbeux. Vous avez écrit tout ce code juste pour ajouter un élément <h1> avec du texte :

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>

À mesure que la taille d'une application ou d'une équipe grandit, il peut devenir de plus en plus difficile de construire des applications de cette manière.

Avec cette approche, les développeurs passent beaucoup de temps à écrire des instructions pour dire à l'ordinateur comment il devrait faire les choses. Mais ne serait-il pas préférable de décrire ce que vous voulez afficher et laisser l'ordinateur déterminer comment mettre à jour le DOM ?

Programmation impérative vs déclarative

Le code ci-dessus est un bon exemple de programmation impérative. Vous écrivez les étapes pour comment l'interface utilisateur devrait être mise à jour. Mais lorsqu'il s'agit de construire des interfaces utilisateur, une approche déclarative est souvent préférée car elle peut accélérer le processus de développement. Au lieu d'avoir à écrire des méthodes DOM, il serait utile que les développeurs puissent déclarer ce qu'ils veulent afficher (dans ce cas, une balise h1 avec du texte).

En d'autres termes, la programmation impérative c'est comme donner à un chef des instructions étape par étape sur comment faire une pizza. La programmation déclarative c'est comme commander une pizza sans se soucier des étapes nécessaires pour la préparer. 🍕

React est une bibliothèque déclarative populaire que vous pouvez utiliser pour construire des interfaces utilisateur.

React : Une bibliothèque d'interface utilisateur déclarative

En tant que développeur, vous pouvez dire à React ce que vous voulez qu'il arrive à l'interface utilisateur, et React déterminera les étapes pour comment mettre à jour le DOM en votre nom.

Dans la section suivante, nous explorerons comment commencer avec React.

Ressources supplémentaires :

HTML vs. le DOM

Comparaison entre les interfaces utilisateur déclaratives et impératives

Mise à jour de l'interface utilisateur avec JavaScript

HTML vs. le DOM

Programmation impérative vs déclarative

React : Une bibliothèque d'interface utilisateur déclarative

On this page