1. Afficher des données

La manière la plus simple d’afficher des valeurs dans l’interface utilisateur, c’est d’utiliser une expression JavaScript dans votre code JSX. C’est la syntaxe que nous utilisons habituellement avec les accolades, comme vous pouvez le voir sur le code ci-dessous :

// Les importations.

const App: FunctionComponent = () => {
  // Les Hooks d'état et d'effet, puis notre code JSX :
  return (
    <div>
      <h1>Pokédex</h1>
      <p>Il y a {pokemons.length} dans le Pokédex.</p>
    </div>
  );
}

export default App;

Dans cet expression JavaScript, nous avons accès à n’importe quelle valeur déclaré dans le composant, mais également au state du composant, ou encore ses props. Plutôt pratique.

En interne, React récupère automatiquement la valeur de l’état pokemons du composant, et l’injecte dans le DOM, afin que la valeur s’affiche dans le navigateur de l’utilisateur. Et ce n’est pas tout, React met à jour l’affichage dans le DOM si le state du composant est modifié, et le tout sans que nous n’ayons rien besoin de faire !

Pour résumé, on « pousse » les données du composant React vers le DOM virtuel, comme ceci :

On utilise une expression JavaScript pour « pousser » les données vers le DOM virtuel.

Vous allez me dire que nous n’avons rien découvert, mais ce petit schéma explicatif va nous aider à mieux comprendre la suite. Retenez-le, nous allons en avoir besoin incessamment sous peu.

Règle d’or : Il existe une règle d’or concernant le DOM virtuel de vos composants React, c’est qu’il ne doivent avoir qu’un UNIQUE noeud à la racine. Vous ne pouvez pas avoir un DOM virtuel composer d’éléments frères par exemple : <h1></h1><p></p>. Il faut englobez tout cela dans un élément global, sous peine de lever une erreur.