Historique des conversations
Chargement...
Chapitre 7 : Lists/Conditionnal
1. Rendu conditionnel
Vous pouvez utiliser des opérateurs logiques comme && ou l'opérateur ternaire ? : pour afficher des éléments selon des conditions.
{isLoggedIn ? <LogoutButton /> : <LoginButton />}2. Afficher des listes
Utilisez la méthode map() pour transformer un tableau de données en éléments JSX.
const fruits = ['Pomme', 'Banane', 'Orange'];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);3. L'importance de la prop key
La key aide React à identifier quels éléments ont changé, ont été ajoutés ou supprimés. Elle doit être unique.
4. Section Quiz
Testez vos connaissances sur le rendu conditionnel et les listes.
Exercice
À partir d'un tableau d'objets utilisateurs (nom, age), affichez une liste où seuls les utilisateurs majeurs (+18) sont listés.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 7
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : Rendu conditionnel et les listes
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'Rendu conditionnel et les listes' et justifiez vos choix techniques.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.