Computing">
[Go to site: main page, start]
Scribd
Importer
27 vues6 pages

Tuto Bootstrap 3 : Liste d'Éléments

Ce document est un tutoriel sur l'utilisation de Bootstrap pour créer un composant ListGroup dans un projet React. Il détaille les étapes d'installation de Bootstrap, d'importation dans le projet, de création et de mise à jour du composant ListGroup, ainsi que d'affichage dynamique et conditionnel des éléments. Le tutoriel inclut également des conseils sur le formatage du code avec Prettier.

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
27 vues6 pages

Tuto Bootstrap 3 : Liste d'Éléments

Ce document est un tutoriel sur l'utilisation de Bootstrap pour créer un composant ListGroup dans un projet React. Il détaille les étapes d'installation de Bootstrap, d'importation dans le projet, de création et de mise à jour du composant ListGroup, ainsi que d'affichage dynamique et conditionnel des éléments. Le tutoriel inclut également des conseils sur le formatage du code avec Prettier.

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 3 : Rendu d’une liste d’éléments

Étape 1 : Installer Bootstrap


Bootstrap évolue à chaque version afin de mieux utiliser les variables CSS pour les styles de
thème globaux, les composants individuels et même les utilitaires.
Il fournit des dizaines de variables pour les couleurs, les styles de police, et plus encore au
niveau du root pour une utilisation n’importe où. Sur les composants et les utilitaires, les
variables CSS sont limitées à la classe appropriée et peuvent être facilement modifiées.
1. Visiter le site : [Link]
2. Copier la commande dédiée pour l’installation de la dernière version de Bootstap.

3. Dans VSCode, Créer un nouveau projet portant le nom « tutorial3 »


4. Ouvrir un nouveau terminal
5. Coller la commande nécessaire pour installer Bootstrap : npm i bootstrap@5.3.2

Étape 2 : Importer Bootstrap dans le projet


1. Supprimer le contenu du fichier [Link] décrivant les styles pour les composants App
2. Supprimer le fichier [Link] généré par Vite
3. Dans le fichier [Link], remplacer import './[Link]' par import
'bootstrap/dist/css/[Link]'
1
4. Vérifier que Bootstrap est bien importé en consultant l’affichage

Étape 3 : Créer un composant ListGroup


1. Sous src, Créer un dossier « components » dans lequel créer un fichier [Link]
2. Créer dedans le composant JSX ListGroup :

3. Dans le fichier [Link], importer le composant ListGroup

4. Les fonctions fléchées sont largement utilisées dans les composants fonctionnels React. Ils
simplifient l'écriture des composants fonctionnels, évitent les problèmes de this et
facilitent l'utilisation des hooks.

Étape 4 : Mettre à jour le composant ListGroup


1. Pour utiliser le composant ListGroup offert par Bootstrap, Copier son code depuis Docs ->
components -> List Group et copier le dans le fichier [Link]

2
2. Modifier le fichier [Link] pour enlever les erreurs de compilation et pour avoir cet
affichage

Remarque :
Pour bien formatter le code, configurer le code formatter ( view -> command Palette ->
Format document).

Sélectionner le Prettier code formatter

3
Pour l’utiliser automatiquement suite à l’enregistrement, activer l’option ‘Format On Save’
(Menu Settings -> Formatting)

Étape 5 : Affichage dynamique du ListGroup


1. Dans le fichier [Link], ajouter un tableau de constantes représentant les villes
suivantes

2. Utiliser map pour afficher la liste des villes

Remarque :
En inspectant le code, on a cette alerte.

4
3. Ajouter des clés à chaque <li> et inspecter de nouveau.

Étape 6 : Affichage conditionnel


1. Ajouter une structure conditionnelle (if) qui permet de retourner un message si la liste
des éléments est vide.

2. Remplacer la structure conditionnelle par l’opérateur ternaire pour avoir le même


résultat

3. Remplacer la structure conditionnelle par l’opérateur && pour avoir le même résultat

5
4. Afficher la liste des villes commençant par lettre S.
Indication : Vous pouvez utiliser la méthode boolean startsWith(String).
5. Transformer le composant ListGroup en une fonction fléchée.

Vous aimerez peut-être aussi