Étape 1 : Structure de la carte

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

Défi

Facile

Créez le squelette de la carte dans App.jsx :

Un <div> avec className="card".
À l'intérieur : un <h2> avec id="profile-name" et le texte Ada Lovelace.
Sous le nom : un <p> avec id="profile-bio" et le texte First programmer.

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 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