Menu

Tech

COMMENCER À APPRENDRE

Français

Récapitulatif : Props

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

Défi

Facile

Récapitulatif du chapitre : un petit menu construit avec des props et children.

Faites en sorte que Item reçoive les props name et price et affiche {name}: ${price} dans son <li>.
Faites en sorte que Card affiche un <div> avec className="card" qui affiche ses children.
Dans App, utilisez <Card>...</Card> pour envelopper le <ul id="menu">, et à l'intérieur, affichez deux Items : name Tea avec le price 3, puis name Cake avec le price 5 (les prix sous forme de nombres !).

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 composant Règle du parent unique JSX n'est pas de l'HTML Récapitulatif : Découvrez React

4Props

Que sont les props ?Passer des props Deux props Même composant, nouvelles données La prop ChildrenRécapitulatif : Props

7Conditions et Listes

Rendu ternaire Afficher avec &&Afficher une liste L'importance des clés Filtrer, puis mapper Récapitulatif : Conditions et Listes

2Expressions JSX

Accolades Calculs entre accolades Accolades dans les attributs Appel de fonctions dans JSX Récapitulatif : Expressions JSX

5État et événements

Qu'est-ce que l'état ?Compteur de clics Comptage par étapes Basculer avec l'état État indépendant Ré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 base Votre deuxième composant Réutiliser des composants Composer une page Récapitulatif : Composants

6Formulaires et Champs de Saisie

Champs de saisie contrôlés Répéter la saisie Compteur de caractères Bouton d'effacement Récapitulatif : Formulaires et Champs de Saisie