Introduction à React
A. BAKKI • GLIN
2025-2026
Plan du cours
01 Découvrir React 02 Comprendre React
Composants, Virtual DOM,
Histoire, créateurs, popularité
JSX
03 Installer React 04 Coder avec React
[Link], npm, Vite, [Link] Props, State, Hooks
A. BAKKI
01
Découvrir React
Origines, histoire et évolution de la bibliothèque
Qu'est-ce que React ?
React est une bibliothèque JavaScript open-source créée par
Facebook (Meta) pour construire des interfaces utilisateur.
Composants Déclaratif Réactif
Blocs réutilisables Décrivez l'UI souhaitée Mise à jour automatique
A. BAKKI
Caractéristiques principales
Virtual DOM JSX
Optimise les mises à jour de l'interface Syntaxe HTML dans JavaScript
Flux unidirectionnel Hooks
Données parent → enfant Gestion état et effets
Multi-plateforme Communauté
Web, mobile, desktop Millions de développeurs
A. BAKKI
Histoire : 2011-2013
2011 - Naissance chez Facebook
Jordan Walke crée FaxJS, prototype de React
2012 - Adoption par Instagram
Instagram adopte React pour son interface web
2013 - Open Source
React devient open source à JSConf US
A. BAKKI
Histoire : 2014-2016
2014 - React Developer Tools
Extension Chrome pour débugger React
2015 - React Native
Applications mobiles iOS et Android avec React
2015 - Redux
Dan Abramov crée Redux pour gérer l'état
2016 - React v15
React devient le framework #1 mondial
A. BAKKI
Histoire : 2017-2019
2017 - React v16 (Fiber)
Réécriture complète du moteur de rendu
2017 - Licence MIT
Passage à la licence MIT open source
2018 - React Hooks
useState, useEffect - LA RÉVOLUTION !
2019 - Suspense
Chargement différé des composants
A. BAKKI
Histoire : 2020-2024
2020 - React v17
Version de transition, pas de nouvelles fonctionnalités
2022 - React v18
Concurrent Mode, rendu interruptible, useId
2023 - Server Components
Composants rendus côté serveur ([Link] 13+)
2024 - React v19 + Compiler
Actions, use(), optimisation automatique
A. BAKKI
React en chiffres (2024)
230K+ 25M+ 1700+
Stars GitHub Téléchargements/semaine Contributeurs
40% 10M+ #1
Part de marché Sites web Framework demandé
A. BAKKI
Qui utilise React ?
Facebook / Meta Instagram Netflix WhatsApp
Airbnb Spotify Shopify PayPal
A. BAKKI
Pourquoi si populaire ?
✓ Courbe douce ✓ Emploi
Facile à apprendre si vous connaissez JS Compétence #1 en frontend
✓ Écosystème ✓ Communauté
Milliers de packages npm Support mondial massif
✓ Meta ✓ Performance
Équipe dédiée, stabilité Virtual DOM optimisé
A. BAKKI
02
Comprendre React
Concepts fondamentaux et architecture
Bibliothèque vs Framework
Bibliothèque (React) Framework (Angular)
VOUS appelez la bibliothèque Le framework VOUS appelle
✓ Liberté de choix + Structure imposée
✓ Flexibilité maximale + Tout intégré
✓ Intégration progressive - Moins flexible
✓ Bundle optimisable - Courbe raide
A. BAKKI
L'approche par composants
Un composant = bloc réutilisable qui encapsule HTML + CSS +
JavaScript
Réutilisabilité Maintenabilité
Même composant partout 1 fichier = 1 composant
Testabilité Composition
Tests isolés Petits → grands
A. BAKKI
Exemple de composant
Points clés
function Button({ text, onClick }) {
return ( • Nom en PascalCase
<button onClick={onClick}>
{text}
• Retourne du JSX
</button>
);
} • Props en paramètre
// Utilisation
<Button text="Cliquer" onClick={fn} /> • export default
A. BAKKI
Le Virtual DOM
Sans Virtual DOM 1. État change → Nouveau VDOM
Chaque modification redessine TOUT le
DOM → Lent et coûteux
2. Algorithme de diff
✓ Avec Virtual DOM
3. Liste des changements
Compare ancien/nouveau → Applique
seulement les différences
4. MAJ DOM réel (batch)
A. BAKKI
Flux unidirectionnel
STATE État de l'app Avantages
↓ Prévisibilité
Données aux
PROPS enfants
↓ Clarté du code
VIEW Interface
↓ Moins de bugs
ACTION Événement user
A. BAKKI
JSX : JavaScript + XML
JSX = syntaxe qui permet d'écrire du HTML dans JavaScript. Babel le
transforme.
Règles JSX
// Ce qu'on écrit
const element = ( • className (pas class)
<div className="hello"> • htmlFor (pas for)
<h1>Bonjour {name}!</h1> • camelCase (onClick)
</div> • { } pour JavaScript
); • Un seul parent
A. BAKKI
L'écosystème React
Routage État UI Data
React Router Redux, Zustand Material UI, shadcn TanStack Query
Forms Test Style Framework
React Hook Form Jest, RTL Tailwind CSS [Link], Remix
A. BAKKI
React vs Vue vs Angular
Critère React Vue Angular
Type Bibliothèque Framework progressif Framework complet
Créateur Meta Evan You Google
Langage JSX + JS Templates HTML TypeScript
Courbe d’apprentissage Douce Très douce Raide
Popularité #1 #3 #2
A. BAKKI
Quand utiliser React ?
✓ Idéal pour Moins adapté
SPA et dashboards Sites statiques simples
Apps mobiles (React Native) SEO sans SSR
Interfaces dynamiques Prototypes très rapides
A. BAKKI
03
Installation
Prérequis et mise en place de l'environnement
Prérequis système
Indispensables Recommandés
[Link] 18+ VS Code
Environnement JavaScript IDE avec extensions
npm ou yarn Git
Gestionnaire packages Contrôle de version
Navigateur moderne React DevTools
Chrome, Firefox, Edge Extension debug
A. BAKKI
Installer [Link]
Méthode 1 : Site officiel Vérifier l'installation
[Link] node --version
→ v20.x.x
Choisir la version LTS
npm --version
→ 10.x.x
Méthode 2 : nvm (recommandé)
Permet de gérer plusieurs versions
A. BAKKI
npm vs yarn vs pnpm
npm yarn pnpm
Inclus avec [Link] Par Facebook, rapide Très rapide, économe
npm install pkg yarn add pkg pnpm add pkg
A. BAKKI
Créer un projet avec Vite
Pourquoi Vite ?
# Créer le projet
npm create vite@latest mon-app
Démarrage instantané
# Choisir React + JavaScript
# Installer et lancer
HMR ultra-rapide
cd mon-app
npm install
npm run dev
Build optimisé
✓ Recommandé par React
A. BAKKI
[Link] - Le framework React
Fonctionnalités
npx create-next-app@latest mon-app
cd mon-app File-based routing
npm run dev
SSR / SSG
API Routes
[Link] = Framework React full-stack par Vercel
avec routing, SSR, SSG et API routes intégrés.
Server Components
A. BAKKI
04
Coder avec React
Composants, Props, State et Hooks
Structure d'un projet Vite
Fichiers importants
mon-app/
[Link]
├── node_modules/
├── public/ Point d'entrée de l'app
├── src/
│ ├── [Link] ← Composant racine [Link]
│ ├── [Link]
Composant racine
│ ├── [Link] ← Point d'entrée
│ └── [Link]
├── [Link] ← Dépendances [Link]
├── [Link]
Dépendances et scripts
└── [Link]
[Link]
Template avec div#root
A. BAKKI
Premier composant React
// [Link]
À retenir
function App() {
return ( • PascalCase pour le nom
<div>
<h1>Bonjour React!</h1>
<p>Mon premier composant</p> • return() avec JSX
</div>
);
} • Un seul élément parent
export default App;
• export default pour importer
A. BAKKI
Props (Propriétés)
Les props = données passées du parent à l'enfant. Lecture seule
uniquement !
function Greeting({ name, age }) { Règles
return (
<div> Lecture seule
<h1>Bonjour {name}!</h1>
<p>Tu as {age} ans</p> Parent → Enfant
</div>
);
} Tous types acceptés
<Greeting name="Marie" age={25} /> { } pour destructuring
A. BAKKI
State avec useState
Le state = donnée interne qui peut changer. React re-rend quand le state
change.
Règles
import { useState } from 'react';
function Counter() { Utiliser setCount()
const [count, setCount] = useState(0);
return ( Déclenche re-render
<div>
<p>Compteur : {count}</p>
<button onClick={() =>
setCount(count + 1)}>
Local au composant
+1
</button>
</div> Ne pas modifier direct !
);
}
A. BAKKI
Props vs State
Critère Props State
Source Externe (parent) Interne
Modifiable ? Non (lecture seule) ✓ Oui (via setter)
Direction Parent → Enfant Local
Usage Configurer composant Données dynamiques
Préférer les props. State uniquement pour données qui changent.
A. BAKKI
useEffect - Effets de bord
import { useState, useEffect } from 'react'; Dépendances
function UserList() {
const [users, setUsers] = useState([]); [ ] Une seule fois (montage)
useEffect(() => {
fetch('/api/users')
.then(res => [Link]())
[a, b] Quand a ou b change
.then(data => setUsers(data));
}, []); // [] = une seule fois
rien À chaque rendu (éviter!)
return <ul>...</ul>;
}
return
() Fonction de cleanup
A. BAKKI
Autres Hooks essentiels
useRef useContext
Référence DOM ou valeur persistante Partager données globalement
useMemo useCallback
Mémoriser un calcul coûteux Mémoriser une fonction
A. BAKKI
Règles des Hooks
Ne PAS faire ✓ À faire
• Hooks dans if/else • Au niveau supérieur
• Hooks dans boucles • Toujours même ordre
• Hooks dans fonctions imbriquées • Uniquement dans composants React
Pourquoi ? React se base sur l'ordre d'appel des Hooks pour les identifier.
A. BAKKI
Gestion des événements
function Form() { Événements courants
const handleClick = () => {
alert('Cliqué !');
}; onClick - Clic
const handleChange = (e) => {
[Link]([Link]); onChange - Input change
};
return ( onSubmit - Form submit
<div>
<input onChange={handleChange} />
<button onClick={handleClick}> onKeyDown - Clavier
Envoyer
</button>
</div> onFocus/onBlur
);
}
A. BAKKI
Rendu conditionnel
Ternaire Opérateur &&
{isLoggedIn
? <Dashboard /> {isAdmin && <AdminPanel />}
: <Login />}
Variable
let content;
if (loading) { content = <Spinner />; } else { content = <Data />; }
return content;
A. BAKKI
Rendu de listes
const users = [ La prop key
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
]; Toujours fournir une key unique !
Utiliser un ID, jamais l'index.
function UserList() {
return (
<ul>
{[Link](user => (
Pourquoi ?
<li key={[Link]}>
{[Link]} React utilise les keys pour identifier les
</li> éléments modifiés.
))}
</ul>
);
}
A. BAKKI
Formulaires contrôlés
function LoginForm() { Composant contrôlé
const [email, setEmail] = useState('');
React contrôle la valeur de l'input via le
const handleSubmit = (e) => { state.
[Link]();
[Link](email);
};
• value → lié au state
return (
<form onSubmit={handleSubmit}>
<input • onChange → maj state
value={email}
onChange={e => setEmail([Link])}
/>
<button>OK</button>
• [Link]()
</form>
);
}
A. BAKKI
Bonnes pratiques (1/2)
Structure claire Composants petits
Un composant par fichier Max 100 lignes, sinon découper
Keys uniques Nommage explicite
Dans les listes (pas l'index!) handleClick, isLoading...
Lift state up TypeScript
État au parent commun Typer les props
A. BAKKI
Bonnes pratiques (2/2)
Cleanup useEffect Éviter mutations
Nettoyer abonnements/timers Créer nouveaux objets
Custom Hooks État minimal
Extraire logique réutilisable Stocker que le nécessaire
Tester Style cohérent
Jest + React Testing Library Tailwind, CSS Modules...
A. BAKKI