Création et imbrication de composants dans React

Introduction

Bienvenue dans la documentation React! Ce laboratoire vous présentera la création et l'imbrication de composants.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 93%. Il a reçu un taux d'avis positifs de 97% de la part des apprenants.

Création et imbrication de composants

Le projet React a déjà été fourni dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code dans App.js.

Utilisez la commande suivante pour installer les dépendances :

npm i

Les applications React sont composées de composants. Un composant est une partie de l'interface utilisateur (UI) qui a sa propre logique et apparence. Un composant peut être aussi petit qu'un bouton, ou aussi grand qu'une page entière.

Les composants React sont des fonctions JavaScript qui renvoient une balise :

// App.js
function MyButton() {
  return <button>I'm a button</button>;
}

Maintenant que vous avez déclaré MyButton, vous pouvez l'imbriquer dans un autre composant :

// App.js
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Remarquez que <MyButton /> commence par une lettre majuscule. C'est ainsi que vous savez qu'il s'agit d'un composant React. Les noms de composants React doivent toujours commencer par une lettre majuscule, tandis que les balises HTML doivent être en minuscules.

Le mot clé export default spécifie le composant principal dans le fichier. Si vous n'êtes pas familier avec une partie de la syntaxe JavaScript, MDN et javascript.info ont de très bonnes références.

Pour exécuter le projet, utilisez la commande suivante. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

npm start

Sommaire

Félicitations! Vous avez terminé le laboratoire sur la création et l'imbrication de composants. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.