Introduction
Pour créer une application interactive, vous devez être en mesure de modifier les données et de répondre aux demandes des utilisateurs. Dans React, cette fonctionnalité est gérée par l’état et des événements.
L’état représente des données qui peuvent être mises à jour et partagées entre les composants dans l’ensemble de votre application. Les événements vous permettent de gérer tous les modes d’interaction dont peut se servir l’utilisateur avec votre application : les clics, la saisie et les appuis.
Objectifs
Dans ce module, vous allez :
- Ajouter l’état à une application.
- Ajouter des gestionnaires d’événements.
- Utiliser un Hook d’effet pour répondre aux changements d’état.
Prérequis
- Connaître JavaScript, HTML et CSS
- Avoir compris les bases des composants React
- Un éditeur de code, comme Visual Studio Code.
- Node.js installé localement
- Git installé localement
- Le projet de démarrage décrit dans la section suivante
Cloner le projet
Ce module utilise un projet de démarrage. Clonez le projet et ouvrez-le dans Visual Studio Code.
Pour obtenir le projet de démarrage, exécutez les étapes suivantes dans une fenêtre de commande ou une fenêtre de terminal. Cette étape clone le référentiel et ouvre le dossier de démarrage dans Visual Studio Code.
# Windows git clone https://github.com/MicrosoftDocs/mslearn-react cd mslearn-react\code\3-state-events\start code .# macOS or Linux git clone https://github.com/MicrosoftDocs/mslearn-react cd mslearn-react/code/3-state-events/start code .Dans Visual Studio Code, ouvrez le terminal intégré en sélectionnant Affichage>Terminal. Ou sélectionnez Ctrl + `. (Sur Mac, sélectionnez Cmd + `.)
Dans le terminal, exécutez le code suivant pour installer les packages nécessaires et démarrer le serveur de développement.
npm install npm startVotre navigateur par défaut devrait s’ouvrir automatiquement. Si ce n’est pas le cas, ouvrez votre navigateur et accédez à http://locahost:8080. La page de démarrage s’affiche.