Construire une interface utilisateur avec des composants

Concepts fondamentaux de React

Il existe trois concepts fondamentaux de React que vous devez connaître pour commencer à construire des applications React. Ce sont :

• Les composants
• Les props
• Le state

Dans les chapitres suivants, nous aborderons ces concepts et fournirons des ressources pour continuer à les apprendre. Une fois que vous serez familiarisé avec ces concepts, nous vous montrerons comment installer Next.js et utiliser les nouvelles fonctionnalités de React comme les composants Serveur et Client.

Composants

Les interfaces utilisateur peuvent être décomposées en petits blocs de construction appelés composants.

Les composants vous permettent de créer des extraits de code autonomes et réutilisables. Si vous considérez les composants comme des briques LEGO, vous pouvez prendre ces briques individuelles et les assembler pour former des structures plus grandes. Si vous devez mettre à jour une partie de l'interface utilisateur, vous pouvez mettre à jour le composant ou la brique spécifique.

Cette modularité permet à votre code d'être plus facile à maintenir à mesure qu'il grandit, car vous pouvez ajouter, mettre à jour et supprimer des composants sans toucher au reste de votre application.

Ce qui est bien avec les composants React, c'est qu'ils sont simplement du JavaScript. Voyons comment vous pouvez écrire un composant React, d'un point de vue JavaScript :

Création de composants

Dans React, les composants sont des fonctions. Dans votre balise script, créez une nouvelle fonction appelée header :

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Un composant est une fonction qui retourne des éléments d'interface utilisateur. Dans l'instruction return de la fonction, vous pouvez écrire du JSX :

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

Pour rendre ce composant dans le DOM, passez-le comme premier argument dans la méthode root.render() :

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

Mais, attendez une seconde. Si vous essayez d'exécuter le code ci-dessus dans votre navigateur, vous obtiendrez une erreur. Pour que cela fonctionne, vous devez faire deux choses :

Premièrement, les composants React doivent être en majuscules pour les distinguer du HTML et du JavaScript standard :

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Capitalisez le composant React
root.render(Header);

Deuxièmement, vous utilisez les composants React de la même manière que vous utiliseriez des balises HTML normales, avec des chevrons <> :

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Si vous essayez à nouveau d'exécuter le code dans votre navigateur, vous verrez vos modifications.

Imbrication de composants

Les applications contiennent généralement plus de contenu qu'un seul composant. Vous pouvez imbriquer les composants React les uns dans les autres comme vous le feriez avec des éléments HTML normaux.

Dans votre exemple, créez un nouveau composant appelé HomePage :

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Puis imbriquez le composant <Header> dans le nouveau composant <HomePage> :

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Imbrication du composant Header */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Arborescence de composants

Vous pouvez continuer à imbriquer les composants React de cette manière pour former des arborescences de composants.

Par exemple, votre composant de niveau supérieur HomePage pourrait contenir un composant Header, un composant Article et un composant Footer. Et chacun de ces composants pourrait à son tour avoir ses propres composants enfants, et ainsi de suite. Par exemple, le composant Header pourrait contenir un composant Logo, un composant Title et un composant Navigation.

Ce format modulaire vous permet de réutiliser des composants à différents endroits de votre application.

Dans votre projet, puisque <HomePage> est maintenant votre composant de niveau supérieur, vous pouvez le passer à la méthode root.render() :

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

Ressources supplémentaires :

• Votre premier composant
• Importation et exportation de composants