Menu

Tech

COMMENCER À APPRENDRE

Français

Récapitulatif : Expressions JSX

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

Défi

Facile

Récapitulatif du chapitre : un mini résumé de commande, rendu entièrement à partir de JavaScript. App.jsx définit déjà item, price, quantity et un helper shout.

Faites en sorte que le <h1> avec id="header" affiche le résultat de l'appel à shout(item) : il doit afficher COFFEE!.
Faites en sorte que le paragraphe avec id="count" affiche 3 cups, en utilisant la variable quantity, et non le chiffre.
Faites en sorte que le paragraphe avec id="total" affiche Total: 12. Calculez le nombre à partir de price et quantity avec *, ne tapez pas 12.

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 Children Ré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 JSXRé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