Créer des composants React interactifs

Introduction

Dans ce projet, vous allez apprendre à créer une fonctionnalité simple d'affichage/masquage à l'aide de React. Vous allez implémenter un bouton qui bascule la visibilité d'une image sur la page.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer un projet React avec des fichiers HTML, CSS et JavaScript
• Comment utiliser le hook useState pour gérer l'état de l'application
• Comment rendre conditionnellement des composants en fonction de l'état
• Comment styliser les composants à l'aide de CSS

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une application React de base
• Implémenter la gestion de l'état pour contrôler la visibilité des éléments
• Intégrer HTML, CSS et JavaScript dans un projet React
• Comprendre les bases de la construction d'interfaces utilisateur interactives avec React

Configurer le projet

Dans cette étape, vous allez configurer le projet et vous familiariser avec les fichiers fournis.

1. Ouvrez l'éditeur à droite. Vous pouvez voir les fichiers suivants dans votre répertoire de projet :

├── style.css
├── index.html
├── script.js
└── dog.png

2. Cliquez sur "Démarrer en direct" dans le coin inférieur droit pour ouvrir le projet sur le port 8080.

Implémenter la fonctionnalité d'affichage/masquage

Dans cette étape, vous allez implémenter la fonctionnalité d'afficher et de masquer l'image à l'aide d'un bouton.

1. Ouvrez le fichier script.js.
2. Créez le composant App :

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Masquer l'élément" : "Afficher l'élément"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

Dans ce composant :

• Nous utilisons le hook useState pour créer une variable d'état show et une fonction setShow pour la mettre à jour.
• La valeur initiale de show est définie sur true.
• Nous affichons un bouton qui inverse la valeur de show lorsqu'il est cliqué.
• Le texte du bouton change en fonction de la valeur de show.
• Nous affichons conditionnellement l'image à l'aide de la variable d'état show.

3. Enregistrez le fichier App.js.
4. Rafraîchissez la page dans votre navigateur.
5. Cliquez sur le bouton "Masquer l'élément" pour masquer l'image.
6. Cliquez sur le bouton "Afficher l'élément" pour afficher à nouveau l'image.

Félicitations! Vous avez terminé le projet "Afficher et masquer". Vous avez appris à utiliser React pour créer une fonctionnalité simple d'affichage/masquage avec un bouton.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.