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

Étape 2 : Carte avec props

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

challenge icon

Défi

Facile

Rendez la carte réutilisable.

  1. Définissez ProfileCard en recevant les props name et bio, et en affichant la même structure qu'à l'étape 1 (div de carte, id="profile-name", id="profile-bio") avec les valeurs des props.
  2. Dans App, affichez un ProfileCard avec le nom Grace Hopper et la bio Invented the compiler.

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