Menu
Coddy logo textTech
COMMENCER À APPRENDRE
flag Fr iconFrançaisdown icon

Récapitulatif : État et événements

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 27 sur 42.

challenge icon

Défi

Moyen

Récapitulatif du chapitre. Créez un panneau de contrôle pour une lampe de bureau : un compteur et un interrupteur côte à côte dans un seul composant.

  1. Ajoutez deux états indépendants : brightness commençant à 0 et on commençant à false.
  2. Affichez la luminosité dans le span avec id="level". Le button id="brighter" ajoute 1 à chaque clic.
  3. Le button id="power" bascule on. Lorsqu'il est activé, affichez un <p> avec id="status" et le texte Lamp is on ; sinon effectuez un render de null.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Toutes les leçons de Les fondamentaux

1Découvrez React

Qu'est-ce que React ?Votre premier composantRègle du parent uniqueJSX n'est pas de l'HTMLRécapitulatif : Découvrez React

4Props

Que sont les props ?Passer des propsDeux propsMême composant, nouvelles donnéesLa prop ChildrenRécapitulatif : Props

7Conditions et Listes

Rendu ternaireAfficher avec &&Afficher une listeL'importance des clésFiltrer, puis mapperRécapitulatif : Conditions et Listes

2Expressions JSX

AccoladesCalculs entre accoladesAccolades dans les attributsAppel de fonctions dans JSXRécapitulatif : Expressions JSX

5État et événements

Qu'est-ce que l'état ?Compteur de clicsComptage par étapesBasculer avec l'étatÉtat indépendantRécapitulatif : État et événements

8Projet : Carte de profil

Étape 1 : Structure de la carteÉtape 2 : Carte avec propsÉtape 3 : Bouton LikeÉtape 4 : Interrupteur de suivi

3Composants

Éléments de baseVotre deuxième composantRéutiliser des composantsComposer une pageRécapitulatif : Composants

6Formulaires et Champs de Saisie

Champs de saisie contrôlésRépéter la saisieCompteur de caractèresBouton d'effacementRécapitulatif : Formulaires et Champs de Saisie