# 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 | [[:15_training:module2-introduction-react:philosophie|Philosophie React]] | Composants vs templates, Virtual DOM, flux de données |
| 2 | [[:15_training:module2-introduction-react:jsx|JSX]] | Syntaxe, expressions, conditions, boucles |
| 3 | [[:15_training:module2-introduction-react:composants|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
<?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 :

```javascript
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.


[[:15_training:module2-introduction-react:philosophie|Commencer : Philosophie React →]]