Créée par Meta en 2013, React a popularisé l’architecture composant, le Virtual DOM et les hooks. Sa force : sa flexibilité. Vous l’utilisez dans le navigateur avec Vite, en full-stack avec Next.js, sur mobile avec React Native, ou comme île interactive dans Astro. Plus qu’une bibliothèque, c’est un écosystème.
Avec 42 % du marché et 60M de téléchargements par semaine, React n’est pas simplement populaire : il est incontournable. La vraie question n’est pas « pourquoi React » mais « comment le maîtriser ».
Ce que vous allez apprendre
Le Contexte
Qu'est-ce que React ?
Concepts Fondamentaux
Composants Fonctionnels
Un composant React est une fonction JavaScript qui reçoit des props (données entrantes) et retourne du JSX (HTML dans JavaScript). Tout est composant : un bouton, une carte, une page entière. La composabilité est le cœur du design React.
function Greeting({ name, role }) {
return (
<div className="card">
<h2>Bonjour, {name} !</h2>
{role && <p>Rôle : {role}</p>}
</div>
);
}JSX : La Syntaxe
JSX est du sucre syntaxique qui compile en React.createElement. Il permet d’écrire du HTML dans du JavaScript. Les expressions JS sont dans {}, les attributs HTML utilisent le camelCase (className, onClick).
const element = (
<div className="container">
<h1>{title}</h1>
{items.map(item => <Item key={item.id} {...item} />)}
</div>
);Hooks : L'État et les Effets
Les hooks (useState, useEffect, useContext, useRef) permettent d’ajouter de la logique état et des effets de bord aux composants fonctionnels. Ils remplacent les classes et les méthodes de cycle de vie.
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Compteur : ${count}`;
}, [count]);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Écosystème
React ne fait pas tout : mais tout se greffe sur React. Next.js pour le full-stack, React Query pour les données serveur, Zustand ou Redux pour le state global, React Router pour le SPA, React Native pour le mobile, et Astro pour le contenu statique avec îles React.
| Concept | Usage | Hook clé | Exemple |
|---|---|---|---|
| Components | Unités d'interface réutilisables | — | Button, Card, Modal |
| State | Données qui changent dans le temps | useState, useReducer | Compteur, formulaire |
| Props | Données passées du parent à l'enfant | — | |
| Effects | Side effects (API, DOM, timers) | useEffect | fetch('/api') |
| Ref | Références DOM, valeurs mutables | useRef | input focus, interval |
| Memo | Optimisation des re-rendus | useMemo, useCallback | Calculs coûteux |
| Context | Partage global sans prop drilling | useContext | Theme, Auth |
| Custom Hooks | Logique réutilisable | use* (personnalisé) | useFetch(), useForm() |
Stratégies de Rendu React
React peut être utilisé dans quatre configurations différentes selon les besoins du projet.
React DOM (SPA)
React DOM : Client-side Rendering
React tourne directement dans le navigateur avec Vite ou CRA. Tout le JS est livré au client, le rendu se fait côté navigateur.
Apports clés
✅ Setup minimal avec Vite : prêt en 2 min
✅ Flexibilité totale : choisissez votre stack (routing, state, build)
✅ Écosystème React complet disponible
Limites
❌ Chargement initial lent (tout le bundle JS doit être téléchargé et exécuté)
❌ SEO limité (les crawlers voient un écran blanc sans SSR/SSG)
❌ Pas de Server Components
📖
Astuce
✅ Apps internes, dashboards, outils métier : là où le SEO n’est pas prioritaire
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<main>
<h1>Compteur : {count}</h1>
<button onClick={() => setCount(c => c + 1)}>
+1
</button>
</main>
);
}Next.js (SSR/SSG)
Next.js : Full-stack avec SSR/SSG
React avec rendu serveur ou génération statique. Les pages sont pré-rendues, le SEO est excellent. C’est le choix dominant pour les apps web modernes.
Apports clés
✅ Server Components stables (React 19)
✅ Rendu côté serveur pour le SEO, hydratation progressive
✅ Data-fetching simplifié avec les RSC et Server Actions
Limites
❌ Complexité croissante : App Router plus complexe que Pages Router
❌ Vendor lock-in : optimisé pour Vercel, moins natif ailleurs
❌ Courbe d’apprentissage élevée (RSC, Server Actions, caching)
❌ Build lourds sur les gros projets
📖
Astuce
✅ Sites vitrine, e-commerce, apps publiques : tout ce qui a besoin de SEO et performances
// app/posts/page.tsx : Server Component par défaut
async function getPosts() {
const res = await fetch('https://api.example.com/posts', {
next: { revalidate: 3600 }, // ISR : revalidation toutes les h
});
return res.json();
}
export default async function PostsPage() {
const posts = await getPosts();
return (
<ul>
{posts.map(post => (
<li key={post.id}>
<a href={`/posts/${post.slug}`}>{post.title}</a>
</li>
))}
</ul>
);
}Astro (îles React)
Astro : Îles React dans un Océan Statique
React comme île interactive dans du HTML statique. Zéro JS par défaut, seuls les composants React sont hydratés. Scores Lighthouse 90+ garantis.
Apports clés
✅ Islands Architecture : chaque composant React est une île indépendante
✅ Bundle JS minimal : seuls les composants interactifs chargent du JS
✅ Compatible avec React, Vue, Svelte, Solid dans la même page
Limites
❌ React ne fonctionne qu’en îles interactives : pas de SPA complète
❌ Pas adapté aux apps très dynamiques (dashboards, temps réel)
❌ Directives spécifiques à apprendre (client:load, client:visible)
📖
Astuce
✅ Sites de contenu, blogs, portfolios : performance maximale avec touches d’interactivité
---
import Header from '../components/Header.astro'; // Statique
import Counter from '../components/Counter.jsx'; // React
---
<Header title="Mon Blog" />
<!-- Zéro JS envoyé au navigateur -->
<Counter client:visible />
<!-- React s'hydrate uniquement quand visible -->React Native
React Native : Mobile Natif
React pour iOS et Android. Même syntaxe, composants natifs (pas de WebView). Partage de logique avec le web (types, hooks, state management).
Apports clés
✅ Code sharing : hooks, types, logique métier réutilisés entre web et mobile
✅ Performance native (pas de WebView, vrais composants natifs)
✅ Expo simplifie le déploiement et les mises à jour OTA
Limites
❌ Pas toutes les libs web compatibles : vérifiez l’écosystème mobile
❌ Modules natifs nécessitent parfois Swift/Kotlin
❌ Debugging plus complexe qu’en web
❌ Processus de review des stores (Apple, Google)
📖
Astuce
✅ Apps mobiles cross-platform quand React est déjà votre stack web
import { View, Text, FlatList, Pressable } from 'react-native';
export default function HomeScreen({ items }) {
return (
<View style={{ flex: 1, padding: 16 }}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>
Mes Items
</Text>
<FlatList
data={items}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<Pressable onPress={() => navigation.navigate('Detail', item)}>
<Text>{item.title}</Text>
</Pressable>
)}
/>
</View>
);
}Parcours d’Apprentissage
1
Les bases : JSX, Composants, Props
Créez votre première app avec create-vite (npm create vite@latest -- --template react-ts). Comprenez le JSX, la création de composants, le passage de props. Pas de state ni de hooks au début : juste de l'affichage pur.
2
State et événements : useState, useRef, onClick
Ajoutez l'interactivité avec useState. Gérez des formulaires, des clics, des toggles. Comprenez le cycle de vie d'un composant et pourquoi React re-rend quand le state change.
3
Effets et data-fetching : useEffect, useReducer
Apprenez useEffect pour les appels API, les abonnements, la synchronisation avec le DOM. Puis useReducer pour les states complexes. C'est là que la plupart des bugs React se cachent : maîtrisez les dépendances.
4
Design Frontend : UI Patterns & Méthodologie
Structirez vos composants (atomic design, composition), maîtrisez le styling (CSS Modules, Tailwind, styled-components), l'accessibilité (a11y, ARIA), et le responsive design. Un bon UI est réutilisable, maintenable et accessible.
5
Clean Code : Patterns & Architecture
Adoptez les design patterns (singleton, factory, observer), les principes SOLID, la immutabilité, les fonctions pures, et les conventions de nommage. Un code propre est un code maintenable : ces fondamentaux s'appliquent à React et au-delà.
6
Architecture React : Custom Hooks & Context
Extrayez la logique dans des hooks personnalisés. Utilisez Context pour le thème, l'auth. Adoptez les patterns React : compound components, render props, container/presentational. Structurez votre projet.
7
Production : Next.js ou React + Vite en SSR
Choisissez votre stack : Next.js pour une app full-stack avec SEO, ou Vite + React Router pour une SPA. Ajoutez React Query pour le data-fetching, Zustand pour le state global, et déployez (Vercel, Netlify, Railway).
React 18
React 18 ❌
❌ useMemo / useCallback manuels pour éviter les re-rendus
❌ useEffect pour le data-fetching
❌ Pas de Server Components
❌ Hydratation coûteuse côté client
❌ Formulaires complexes avec librairies tierces
React 19
React 19 ✅
✅ React Compiler : tout est auto-mémorisé
✅ Actions et useActionState pour les formulaires
✅ Server Components stables
✅ use() pour les promesses et le Context
✅ Moins de JS, plus de HTML natif
📖
Pour aller plus loin
Une fois les bases de React maîtrisées, les hooks avancés (useReducer, useCallback, custom hooks) sont la clé pour écrire des composants vraiment professionnels et maintenables.
🧠
Analogie
Les hooks avancés sont aux composants React ce que les outils spécialisés sont à une caisse à outils de base : ils ne servent pas tous les jours, mais quand le besoin se présente, ils font gagner des heures.
?
Hooks Avancés
Vous avez 3 appels API à lancer. Le premier réussit, le second échoue, le troisième prend 5 secondes. Comment orchestrer tout ça sans vous arracher les cheveux ?
Bientôt disponible
En cours de rédaction
Cet article est en cours de rédaction. Inscrivez-vous à la newsletter pour être averti de sa publication.
Newsletter
Un récap par mois de ce qui a vraiment compté. Pas de spam, promis.
Des zones d'ombre ?
React est-il un framework ou une bibliothèque ?
Une bibliothèque. React ne gère que le rendu UI. Pour le routing, le SSR, le data-fetching, il faut Next.js, Remix ou ajouter des bibliothèques (React Router, React Query). Cette flexibilité est une force, mais exige de faire des choix d'architecture.
Dois-je apprendre React ou un framework React directement ?
Apprenez React d'abord, puis Next.js. Un framework masque beaucoup de concepts React (Server Components, Actions, routing). Sans les bases, vous serez perdu dès qu'un bug sort du cadre du framework. 2-3 semaines de React pur avant Next.js.
React 19 change-t-il la façon de coder ?
Oui, en profondeur. Le React Compiler élimine le besoin de
useMemo et useCallback (auto-mémorisation). Les Actions et useActionState simplifient les formulaires. Les Server Components sont stables. Le code React 19 est plus propre et plus performant sans effort explicite.React est-il remplacé par d'autres technologies ?
Non, mais il évolue. Solid et Svelte offrent des alternatives plus performantes en théorie, mais React a l'écosystème le plus riche (emplois, librairies, outils, communauté). React 19 a répondu aux critiques avec le Compiler et les Server Components. Il reste le choix le plus sûr pour le long terme.
TypeScript est-il obligatoire avec React ?
Non, mais fortement recommandé. Les props, les states, les retours de hooks : tout est plus facile à maintenir avec TypeScript. Les offres d'emploi React exigent TypeScript dans 80%+ des cas. Si vous démarrez, commencez en JavaScript puis migrez vers TypeScript après quelques projets.
React : Les Points de Passage
0/12Vos progrès sont sauvegardés localement sur votre appareil. Aucune donnée n'est collectée. La durée de conservation dépend de la durée de rétention des données de votre navigateur.
"
React n’est pas qu’une bibliothèque, c’est une façon de penser l’interface utilisateur. Une philosophie qui a redéfini le développement front-end.
Gaëtan Solis
Fondateur, Bao-Link
Orfèvre Digital
Prêt à lancer votre projet ?
Je donne vie à vos idées en créant des sites web et applications intuitifs, esthétiques et fonctionnels.
Disponible
Articles Connexes
4+4
Brouillon
Connexe
Next.js : Le Framework React Full-Stack
Maîtrisez Next.js : App Router, Server Components, Server Actions, strategies de rendu (SSR, SSG, ISR), API routes et bonnes pratiques.
Cluster
Brouillon
Connexe
React Hooks Avancés
Maîtrisez les hooks avancés de React : useReducer, useCallback, useMemo, useRef et créez vos propres hooks personnalisés.
Cluster
Brouillon
Connexe
State Management React
Gérez l'état global de vos applications React avec les patterns et bibliothèques adaptés : Context, Redux, Zustand, Jotai ou Valtio.
Cluster
Prérequis
Composants UI : Le Hub de votre Design System
Construisez et organisez votre bibliothèque de composants UI : design tokens, atomic design, Figma ↔ code, Storybook, et workflow complet du design au déploiement.
Brouillon
Prérequis
JavaScript Vanilla
Maîtrisez le JavaScript moderne sans framework. Les bases solides qui vous permettront de comprendre n'importe quelle bibliothèque ou framework.
En cours
unit-name
Contenu en préparation, revenez bientôt.
En cours
bio-market
Contenu en préparation, revenez bientôt.
En cours
blackspike
Contenu en préparation, revenez bientôt.
Inspiration
Découvrez d'autres projets
Développement 21 juillet 2026
Bao-Link Documentation : De WordPress à un Écosystème Centré Utilisateur
Le projet Bao-Link raconte l'évolution du site et de ses outils: la création d'un premier site WordPress vitrine, puis le passage à Astro avec un site 100% sur mesure, sans template, centré sur le SEO et l'expérience utilisateur ainsi que les projets liés : diag-application et personas.
Astro WordPress # Migration
Voir le projet 
Développement 16 juillet 2026
ACM : Refonte E-commerce avec Astro, Express & WordPress
Étude de cas complète : migration d'un site e-commerce WordPress/WooCommerce vers une architecture Astro SSR + proxy Express, avec déploiement et optimisation SEO.
Astro Express WordPress
Voir le projet 
Développement 16 juillet 2026
Soair : La Transition Numérique Complète
Étude de cas complète : création d'un site WordPress professionnel puis migration vers Hugo pour des performances optimales et un SEO décuplé.
# Soair WordPress Hugo
Voir le projet 