---
title: "Module 2 : Introduction à React"
weight: 350
description: "React a été créé par Facebook pour résoudre un problème : comment gérer des interfaces complexes qui changent fréquemment ?"
category: "Formation"
type: "formation"
---

# 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](/training/module2-introduction-react/philosophie) | Composants vs templates, Virtual DOM, flux de données |
| 2 | [JSX](/training/module2-introduction-react/jsx) | Syntaxe, expressions, conditions, boucles |
| 3 | [Composants](/training/module2-introduction-react/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.

[Commencer : Philosophie React ->](/training/module2-introduction-react/philosophie)