Scribd
Importer
34 vues5 pages

Tutorial 4

Ce tutoriel guide l'utilisateur à travers la création d'un projet React en utilisant Bootstrap pour intégrer des composants. Il couvre l'installation de Bootstrap, la création d'un composant Card réutilisable avec des propriétés, et l'utilisation de React Developer Tools pour le débogage. Enfin, il montre comment ajouter plusieurs instances du composant Card pour afficher plusieurs champions dans une grille.

Transféré par

hsan.isetsf
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
34 vues5 pages

Tutorial 4

Ce tutoriel guide l'utilisateur à travers la création d'un projet React en utilisant Bootstrap pour intégrer des composants. Il couvre l'installation de Bootstrap, la création d'un composant Card réutilisable avec des propriétés, et l'utilisation de React Developer Tools pour le débogage. Enfin, il montre comment ajouter plusieurs instances du composant Card pour afficher plusieurs champions dans une grille.

Transféré par

hsan.isetsf
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Faculté des sciences économiques et de gestion de Sfax

Filière : LFI 2
Matière : Framework Front-end

Tutorial 4 : Composants et props

Étape 1: Installer et Importer Bootstrap dans le projet « tutorial4 »


Les différentes étapes sont déjà vues au niveau du tutorial précédent.
Étape 2: Modifier le contenu du fichier App.jsx
Insérer un composant <h1> pour afficher le message suivant

Étape 3: Créer un composant Card.jsx


1. Sous src, Créer un dossier « components » dans lequel créer un fichier Card.jsx
2. Créer dedans le composant JSX Card
a. Créer la fonction Card correspondante.
b. Copier le composant card depuis le lien : https://getbootstrap.com/docs/5.3/components/card/

c. Au niveau du composant div, remplacer style="width: 18rem;" par style={{width:


"18rem"}}
d. Sauvegarder l’image correspondante sous le dossier \public.
e. Corriger le code correspondant et l’intégrer au niveau du composant App pour avoir le résultat
suivant :

1
Étape 4: Ajouter des propriétés pour le composant Card.jsx
L’objectif de cette étape est de rendre réutilisable le composant Card plusieurs fois.
Pour le faire, suivre les étapes suivantes :
1. Au niveau du composant App, transmettre les données suivantes vers le composant enfant Card. Il
s’agit d’envoyer les trois données suivantes :
a. nom décrivant le nom et prenom du champion
b. qualif décrivant la qualification du champion
c. imageSrc décrivant le chemin vers l’image correspondante

2. Au niveau du composant Card, ajouter props au composant fonction correspondant pour pouvoir
récupérer les données transmises par le composant App.
a. Ajouter props comme paramètre de la fonction Card

NB : props est un Objet JS ayant ainsi 3 attributs.

b. Ajouter les différentes props (nom, imageSrc et qualif).

2
Étape 5: Installer React Developer Tools et inspecter
React Developer Tools est une extension du navigateur permettant de déboguer des sites construits avec
React. Elle est disponible pour plusieurs navigateurs populaires (Firefox, Chrome, Edge…)
Ainsi, si vous visitez un site web construit avec React, vous pouvez apercevoir au sein des outils de
développement du navigateur les onglets Components et Profiler.
Pour l’installer :
1. Dans votre navigateur, accéder aux paramètres -> Extensions et thèmes
2. Ou cliquer tout simplement sur l’icone
3. Taper react dans la zone de texte correspondante

4. Cliquer React Developer Tools

5. Cliquer sur Ajouter


6. Vérifier que l’extension est bien installée

3
Étape 6 : Ajouter d’autres champions ➔ Réutiliser le même composant
1. Au niveau du composant App, ajouter un autre composant Card pour avoir le résultat suivant :

2. On souhaite superposer les champions dans un GridCard. Pour le faire :


a. Ajouter <div className="row row-cols-1 row-cols-md-3 g-4 "> au niveau du composant
App juste après la balise <h1>

b. Changer les attributs des balises <div> dans le fichier Card.jsx comme suit :

c. Réutiliser le composant Card plusieurs fois pour avoir le résultat suivant :

4
5

Vous aimerez peut-être aussi