Module 2 : Introduction à React
React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Ce module vous présente les concepts fondamentaux.
Pourquoi React ?
React a été créé par Facebook pour résoudre un problème : comment gérer des interfaces complexes qui changent fréquemment ?
Avantages de React :
- Composants réutilisables : découper l'UI en morceaux indépendants
- Virtual DOM : performances optimisées automatiquement
- Flux de données unidirectionnel : prévisibilité et debugging facilité
- Écosystème riche : énorme communauté et nombreuses bibliothèques
Chapitres
| # | Chapitre | Contenu | |
|---|---|---|---|
| 1 | Philosophie React | Composants vs templates, Virtual DOM, flux de données | |
| 2 | JSX | Syntaxe, expressions, conditions, boucles | |
| 3 | Composants | Composants fonctionnels, props, composition |
Objectifs du module
À la fin de ce module, vous saurez :
- Comprendre la philosophie et l'architecture de React
- Écrire du JSX correctement
- Créer des composants fonctionnels
- Passer des données via les props
- Composer des composants entre eux
Différence fondamentale avec PHP
En PHP, vous générez du HTML côté serveur :
<?php foreach ($users as $user): ?>
<div class="user"><?= $user['name'] ?></div>
<?php endforeach; ?>
En React, vous décrivez ce que l'UI devrait être en fonction des données :
function UserList({ users }) {
return (
<div>
{users.map(user => (
<div className="user" key={user.id}>{user.name}</div>
))}
</div>
);
}
React se charge de mettre à jour le DOM quand les données changent.
Temps estimé
Environ 2-3 heures pour parcourir ce module et faire les exercices.