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

Récapitulatif : Composants

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 15 sur 42.

challenge icon

Défi

Facile

Récapitulatif du chapitre : construisez une page à partir de deux composants, en utilisant tout ce qui a été vu dans ce chapitre.

  1. Définissez un composant Header : un <h1> avec id="title" et le texte Coddy Shop. Affichez-le en premier à l'intérieur du <div> externe de `App`.
  2. Définissez un composant Badge qui renvoie <span>★</span>.
  3. À l'intérieur du <div id="badges"> existant, affichez le Badge deux fois : une définition, deux utilisations.

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