Cours React Complet ⚛️

Les 12 chapitres essentiels — composants, hooks, état, effets et patterns modernes

Chapitres

100+

Exemples de code

React 19

Version

A1→C2

Niveaux

📋 Sommaire

1. Introduction et JSX
7. useEffect et cycle de vie
2. Composants
8. Hooks avancés
3. Props
9. Formulaires
4. État (useState)
10. Context et état global
5. Événements et rendu conditionnel
11. React Router et navigation
6. Listes et clés
12. Patterns et bonnes pratiques

📚 Voir aussi nos autres cours

🏠 Hub Programmation
⚡ JavaScript
🔷 TypeScript
🎨 HTML & CSS
☁️ AWS Cloud Practitioner

CHAPITRE 01

Introduction et JSX

⚛️ Premier composant

function App()

export default App;

React est une bibliothèque UI (pas un framework). Elle ne gère que le rendu de l'interface — vous choisissez le routing, le state management et le reste. Créée par Meta (Facebook), c'est la librairie frontend la plus utilisée au monde.

⚙️ Créer un projet

# Avec Vite (recommandé — rapide)
npm create vite@latest mon-app — –template react
cd mon-app
npm install
npm run dev

# Avec Next.js (framework full-stack)
npx create-next-app@latest mon-app

# Structure Vite :
# mon-app/
# ├── index.html
# ├── package.json
# ├── vite.config.js
# └── src/
# ├── main.jsx (point d'entrée)
# ├── App.jsx (composant racine)
# └── App.css

📝 JSX — HTML dans JavaScript

function UserCard()

Règles JSX : className au lieu de class, htmlFor au lieu de for, toutes les balises doivent être fermées (
), un seul élément racine (utiliser <>… — Fragment — si besoin). Les permettent d'insérer n'importe quelle expression JavaScript.

🧠 Quiz

Qu'est-ce que JSX ?

JSX est une extension syntaxique de JavaScript qui ressemble à du HTML. Il est transformé en appels React.createElement() à la compilation. Il n'est pas du HTML — c'est du JavaScript qui produit des éléments React.

CHAPITRE 02

Composants

🧱 Composants fonctionnels

// Composant = fonction qui retourne du JSX
function Header()

// Arrow function (même chose)
const Footer = () =>

;

// Composition — imbriquer des composants
function App()

Règle d'or : un composant = une responsabilité. Si un composant fait trop de choses, découpez-le. Les composants React sont comme des fonctions : petits, réutilisables, composables.

CHAPITRE 03

Props

📦 Passer des données aux composants

// Définir un composant avec props
function UserCard()

// Utiliser le composant
name=« Alice » age= isAdmin />
name=« Bob » age= />

// children — contenu entre les balises
function Card()

title=« Profil »>

N'importe quel contenu ici

Les props sont en lecture seule. Un composant ne doit JAMAIS modifier ses props. C'est le flux de données unidirectionnel de React : parent → enfant. Si l'enfant doit modifier une valeur, le parent passe une fonction callback.

CHAPITRE 04

État (useState)

🔄 useState — l'état local

import from « react »;

function Counter()

// ⚠️ Utiliser la fonction de mise à jour pour les états dépendants
setCount(prev => prev + 1); // ✅ Basé sur la valeur précédente
setCount(count + 1); // ⚠️ Peut être stale

// État avec objet — TOUJOURS créer un nouvel objet
const [user, setUser] = useState();
setUser(); // ✅ Spread + modification
// user.age = 26; ❌ NE JAMAIS muter directement

// État avec tableau
const [items, setItems] = useState([]);
setItems([…items, newItem]); // Ajouter
setItems(items.filter(i => i.id !== id)); // Supprimer
setItems(items.map(i =>
i.id === id ? : i
)); // Modifier un élément

React re-rend un composant quand son état change. C'est le mécanisme central : vous ne manipulez jamais le DOM — vous changez l'état, React met à jour le DOM automatiquement. L'état est immuable : toujours créer un nouvel objet/tableau.

🧠 Quiz

Pourquoi ne pas muter l'état directement ?

Parce que React détecte les changements par comparaison de référence (===). Si vous mutez l'objet existant, la référence ne change pas, React ne détecte pas le changement et ne re-rend pas. Il faut créer un nouvel objet.

CHAPITRE 05

Événements et rendu conditionnel

🖱️ Gestion des événements

function Form()

// ⚠️ Passer une RÉFÉRENCE, pas un appel
onClick=>
onClick=>

// Passer un argument
onClick=>Supprimer

🔀 Rendu conditionnel

function Dashboard()

CHAPITRE 06

Listes et clés

📋 Rendre une liste

function TodoList()

La key doit être unique et stable. Utilisez un id de la base de données, jamais l'index du tableau (sauf si la liste ne change jamais). React utilise les clés pour savoir quel élément a changé, été ajouté ou supprimé.

CHAPITRE 07

useEffect et cycle de vie

⚡ useEffect — effets de bord

import from « react »;

function UserProfile()

📋 Les 3 patterns de useEffect

// 1. À chaque rendu (rarement utilisé)
useEffect(() => ); // Pas de tableau de dépendances

// 2. Au montage uniquement (componentDidMount)
useEffect(() => , []); // Tableau vide = une seule fois

// 3. Quand une dépendance change
useEffect(() => , [count]); // Re-exécute quand count change

// Cleanup (componentWillUnmount)
useEffect(() => , []);

Le tableau de dépendances contrôle quand l'effet se réexécute. Listez toutes les variables utilisées dans l'effet. Le linter ESLint (react-hooks/exhaustive-deps) vous avertit si vous en oubliez.

🧠 Quiz

Que se passe-t-il si on oublie le tableau de dépendances dans useEffect ?

L'effet s'exécute après chaque rendu. Si l'effet modifie l'état (setState), cela déclenche un nouveau rendu, qui déclenche l'effet, qui modifie l'état… → boucle infinie.

CHAPITRE 08

Hooks avancés

🔧 useRef, useMemo, useCallback

import from « react »;

// useRef — référence persistante (ne provoque PAS de re-rendu)
function TextInput()

// useMemo — mémoriser un calcul coûteux
function ExpensiveList()

// useCallback — mémoriser une fonction
function Parent() {
const [count, setCount] = useState(0);

const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []); // Même référence entre les rendus

return onClick= />;
}

N'optimisez pas prématurément. useMemo et useCallback ajoutent de la complexité. Utilisez-les uniquement quand il y a un problème de performance mesurable, pas « au cas où ».

⚡ useReducer — état complexe

import from « react »;

function reducer(state, action)

function Counter()

CHAPITRE 09

Formulaires

📝 Composants contrôlés

function LoginForm()

Composant contrôlé : React est la « source de vérité » — la valeur de l'input est contrôlée par l'état React (value= + onChange). C'est le pattern standard. Pour les cas simples, les librairies comme React Hook Form simplifient la gestion.

CHAPITRE 10

Context et état global

🌐 useContext — éviter le prop drilling

import from « react »;

// 1. Créer le contexte
const ThemeContext = createContext(« light »);

// 2. Provider — fournir la valeur
function App()

// 3. Consumer — utiliser la valeur (n'importe où dans l'arbre)
function ThemeToggle()

Context pour les données globales : thème, langue, utilisateur connecté, préférences. Pour l'état complexe avec beaucoup de logique, considérez Zustand (simple) ou Redux Toolkit (plus structuré) comme alternatives.

CHAPITRE 11

React Router et navigation

🧭 React Router v6

// npm install react-router-dom

import from « react-router-dom »;

function App()

// Paramètres dynamiques
function UserPage()

CHAPITRE 12

Patterns et bonnes pratiques

🔧 Custom Hooks — réutiliser la logique

// Custom hook = fonction commençant par « use »
function useFetch(url)

// Utilisation — logique réutilisable
function UserList()

📋 Écosystème essentiel

Besoin	Librairie
Framework full-stack	Next.js (SSR, App Router)
État global	Zustand (simple) / Redux Toolkit
Data fetching	TanStack Query (React Query)
Formulaires	React Hook Form + Zod
Routing	React Router v6 / Next.js App Router
Styling	Tailwind CSS / CSS Modules
UI Components	shadcn/ui / Radix / Headless UI
Animations	Framer Motion
Tests	Vitest + Testing Library

✅ Bonnes pratiques

✅ À FAIRE
• Composants petits (< 100 lignes)
• Custom hooks pour la logique réutilisable
• key unique et stable sur les listes
• État au plus bas dans l'arbre
• Nommer les composants en PascalCase
• prev => dans setState dépendant
• Cleanup dans useEffect
• TypeScript pour les gros projets
• Lazy loading (React.lazy)

❌ À ÉVITER
• Muter l'état directement
• useEffect sans dépendances
• Index comme key (listes dynamiques)
• Prop drilling (> 3 niveaux)
• useEffect pour tout (penser d'abord au rendu)
• useMemo/useCallback partout
• État dérivé dans useState
• Composants > 200 lignes
• Ignorer les erreurs de hooks

⚙️ Règles des Hooks

// ✅ Toujours au top level du composant
function MyComponent() {
const [count, setCount] = useState(0); // ✅
useEffect(() => , []); // ✅
}

// ❌ JAMAIS dans une condition ou boucle
if (condition)

// ❌ JAMAIS dans une fonction normale
function helper()

🧠 Quiz

Quand utiliser useReducer au lieu de useState ?

Quand l'état est complexe (objet avec plusieurs champs liés), quand les mises à jour dépendent les unes des autres, ou quand la logique de mise à jour est élaborée. useReducer centralise la logique dans un reducer, ce qui est plus testable et prévisible.

Qu'est-ce qu'un custom hook ?

Une fonction commençant par « use » qui encapsule de la logique réutilisable avec des hooks (useState, useEffect, etc.). Exemple : useFetch, useLocalStorage, useAuth. C'est le principal mécanisme de réutilisation de logique en React.

📚 Continuer à apprendre

🏠 Hub Programmation
⚡ Cours JavaScript
🔷 Cours TypeScript
🎨 Cours HTML & CSS
☁️ AWS Cloud Practitioner

Cours React Complet — Composants, Hooks et patterns modernes

Référence : react.dev | Next.js | Vite