React, standard du développement front-end

React est devenu le framework front-end le plus utilisé dans l’industrie. Développé initialement par Facebook (Meta), open source, il structure la construction d’interfaces complexes en composants réutilisables. Son écosystème riche (Next.js, React Query, React Hook Form…) couvre la plupart des besoins du développement web moderne. Ce tutoriel propose une prise en main progressive pour créer votre première application.

Les prérequis

Avant React, maîtrisez : HTML, CSS, JavaScript moderne (fonctions fléchées, destructuration, modules, async/await), TypeScript optionnellement mais recommandé. Sans ces bases, React paraît magique mais reste opaque. Investissez quelques semaines dans les fondamentaux si nécessaire.

Les concepts fondamentaux

Un composant React est une fonction qui retourne du JSX (syntaxe HTML-like dans du JavaScript). Les composants se composent les uns avec les autres pour former l’application complète. Les props (propriétés) passent des données du parent vers les enfants. L’état (state) gère les données qui changent et provoque le re-rendu quand modifié.

function Button({label, onClick}) { return ; }. Ce composant affiche un bouton configurable via les props.

Créer un projet React

La méthode moderne utilise Vite : npm create vite@latest my-app — –template react-ts. Cette commande crée un projet React avec TypeScript. Entrez dans le dossier (cd my-app), installez les dépendances (npm install), lancez le serveur de développement (npm run dev).

Le serveur redémarre automatiquement à chaque modification de fichier, avec rechargement à chaud (HMR) qui préserve l’état des composants.

La structure du projet

src/ contient le code source. App.tsx est le composant racine. main.tsx monte l’application dans le DOM. public/ contient les fichiers statiques. index.html est le template HTML. Familiarisez-vous avec cette structure avant de modifier.

Votre premier composant

Créez un fichier src/components/Greeting.tsx :

function Greeting({name}: {name: string}) {
  return <h1>Bonjour, {name} !</h1>;
}
export default Greeting;

Importez-le dans App.tsx et utilisez-le : <Greeting name= »Aminata » />. Le composant s’affiche avec le nom passé en prop.

L’état avec useState

Le hook useState gère l’état local d’un composant. Exemple d’un compteur :

import {useState} from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

À chaque clic, setCount met à jour l’état et React re-rend le composant avec la nouvelle valeur.

Les événements

Les événements React suivent une syntaxe camelCase : onClick, onChange, onSubmit. Les handlers reçoivent un objet événement dont on peut extraire les informations.

function Input() { const [value, setValue] = useState( »); return <input value={value} onChange={(e) => setValue(e.target.value)} />; }. Ce pattern de « controlled component » fait de l’état React la source de vérité.

Le rendu conditionnel

Afficher du contenu selon une condition utilise le JavaScript classique dans le JSX : {isLoggedIn ? <Dashboard /> : <LoginForm />}. L’opérateur && pour un rendu conditionnel simple : {error && <Alert type= »error »>{error}</Alert>}.

Les listes

Afficher un tableau de données utilise map : {users.map(user => <UserCard key={user.id} user={user} />)}. L’attribut key doit être unique et stable : préférez un identifiant au index du tableau.

useEffect pour les effets de bord

useEffect exécute du code après le rendu : requêtes API, abonnements, minuteries. Le tableau de dépendances contrôle quand l’effet se réexécute.

useEffect(() => {
  fetch('/api/users').then(r => r.json()).then(setUsers);
}, []); // vide = une seule fois au montage

Attention aux boucles infinies si les dépendances incluent une valeur modifiée par l’effet.

Les hooks personnalisés

Un hook personnalisé extrait une logique réutilisable dans une fonction qui utilise d’autres hooks. Exemple : useLocalStorage qui synchronise un état avec localStorage. Cette abstraction rend le code plus DRY et testable.

Le contexte

Context évite le « prop drilling » (passer des props à travers plusieurs niveaux). Créez un contexte avec createContext, fournissez une valeur avec un Provider, consommez-la avec useContext. Utile pour le thème, l’utilisateur connecté, les préférences.

Le routage avec React Router

Pour une application avec plusieurs pages, React Router gère la navigation. BrowserRouter englobe l’application, Routes et Route définissent les correspondances URL/composants, Link crée des liens qui ne rechargent pas la page. Les paramètres d’URL s’extraient avec useParams.

Les formulaires

Les formulaires simples se gèrent avec useState. Pour les formulaires complexes (validation, erreurs, soumission), React Hook Form simplifie considérablement : registrer les champs, valider avec Zod ou Yup, soumettre avec gestion automatique.

Récupérer des données

fetch natif fonctionne mais TanStack Query (anciennement React Query) apporte : cache automatique, re-fetch intelligent, loading/error states, invalidation. Pour toute application qui consomme des API, c’est un gain de productivité significatif.

const {data, isLoading, error} = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(r => r.json())
});

Les styles dans React

Plusieurs approches coexistent. CSS classique avec classes (className au lieu de class). CSS Modules pour éviter les conflits globaux. Tailwind CSS très populaire. CSS-in-JS (Styled Components, Emotion). Chaque approche a ses partisans ; Tailwind s’impose progressivement.

Le déploiement

Vercel, Netlify rendent le déploiement trivial pour les applications React : connectez votre dépôt GitHub, chaque push déclenche un déploiement automatique. Pour un hébergement traditionnel, npm run build génère les fichiers statiques à placer sur n’importe quel serveur.

Next.js, l’étape suivante

Next.js est un meta-framework construit sur React. Il ajoute : rendu côté serveur (SSR) pour le SEO, routage basé sur la structure de fichiers, optimisations automatiques des images et polices, déploiement simple via Vercel. Pour une application destinée à être indexée par les moteurs de recherche, Next.js est souvent le choix recommandé.

Les erreurs courantes du débutant

Muter directement l’état (user.name = ‘X’ au lieu de setUser({…user, name: ‘X’})). Oublier les keys dans les listes. Boucles infinies d’useEffect. Confondre props et state. Créer des composants trop gros. Ces erreurs se dissipent avec la pratique.

Les ressources pour progresser

La documentation officielle react.dev a été entièrement refondue et est excellente. Les cours de Josh W Comeau, les chaînes YouTube comme Web Dev Simplified, les projets sur frontendmentor.io pour pratiquer. Un apprentissage solide demande 2 à 4 mois de pratique régulière.

Conclusion : investissement structurant

Apprendre React ouvre des opportunités professionnelles considérables : l’écosystème est omniprésent dans l’industrie. La prise en main demande de la rigueur mais les concepts sont accessibles avec une base JavaScript solide. Construisez plusieurs projets complets (todo app, app météo, clone Twitter simple) pour ancrer les apprentissages. Chaque projet consolide les acquis et révèle de nouvelles nuances.

Étape 1 — Préparer votre environnement Node 22 LTS

React s’appuie sur Node.js pour le bundling, le serveur de développement et l’écosystème npm. En 2026, la version stable recommandée est Node 22 LTS, supportée jusqu’en avril 2027. Sur un poste Windows, Linux ou macOS à Dakar comme à Abidjan, installez-la depuis nodejs.org ou via nvm pour pouvoir basculer entre versions.

# Linux / macOS via nvm
nvm install 22
nvm use 22
node --version   # doit afficher v22.x.x
npm --version    # doit afficher 10.x ou supérieur

Si vous obtenez bien v22.x.x, votre environnement est prêt. Sinon redémarrez le terminal pour recharger les variables. Une mauvaise version de Node provoque 80 % des erreurs cryptiques que les débutants rencontrent au premier npm install.

Étape 2 — Créer un projet React avec Vite

Create React App est officiellement déprécié depuis 2025. L’outil moderne recommandé par l’équipe React est Vite, beaucoup plus rapide au démarrage et au rechargement à chaud. Sur une connexion Orange Fibre à Dakar, l’installation prend moins de deux minutes.

npm create vite@latest mon-premier-react -- --template react
cd mon-premier-react
npm install
npm run dev

Le serveur démarre sur http://localhost:5173. Ouvrez cette URL dans Chrome — vous voyez le logo React tournant et un compteur. Si la page s’affiche, votre toolchain fonctionne. Tout problème à ce stade vient de Node, pas de React.

Étape 3 — Comprendre la structure des fichiers générés

Avant de coder, prenez 10 minutes pour lire les fichiers créés. Cette habitude vous évitera des heures de tâtonnement plus tard.

mon-premier-react/
├── index.html          # point d'entrée HTML servi par Vite
├── package.json        # dépendances et scripts npm
├── vite.config.js      # configuration du bundler
└── src/
    ├── main.jsx        # racine — monte React dans le DOM
    ├── App.jsx         # composant principal
    └── App.css         # styles du composant App

Le fichier main.jsx appelle createRoot pour attacher React au div #root de index.html. Tous vos composants vivent dans src/. Cette séparation propre est l’un des cadeaux de Vite par rapport aux anciens setups Webpack.

Étape 4 — Écrire votre premier composant fonctionnel

En React moderne, un composant est une fonction JavaScript qui retourne du JSX. Le JSX ressemble à du HTML mais s’écrit dans du JS. Créez le fichier src/Salutation.jsx avec le contenu suivant.

export default function Salutation({ prenom }) {
  return (
    <div className="salutation">
      <h2>Bonjour {prenom}</h2>
      <p>Bienvenue sur votre première application React.</p>
    </div>
  );
}

Importez-le dans App.jsx avec import Salutation from './Salutation'; puis utilisez <Salutation prenom="Awa" />. Sauvegardez — le navigateur recharge automatiquement et affiche « Bonjour Awa ». Vous venez d’écrire un composant, de le composer et de passer une prop. C’est 60 % de React.

Étape 5 — Gérer l’état avec useState

L’état est ce qui distingue React d’un simple template engine. Le hook useState permet à un composant de mémoriser une valeur entre les rendus. Construisons un compteur de clics utile pour mesurer l’engagement sur une page démo.

import { useState } from 'react';

export default function Compteur() {
  const [clics, setClics] = useState(0);
  return (
    <button onClick={() => setClics(clics + 1)}>
      Clics : {clics}
    </button>
  );
}

Chaque appel à setClics demande à React de re-rendre le composant avec la nouvelle valeur. Vous ne mutez jamais directement la variable. Cette discipline immuable est au cœur du modèle mental React et explique pourquoi les bugs d’état sont rares quand on respecte la règle.

Étape 6 — Charger des données distantes avec useEffect

Pour appeler une API depuis un composant, utilisez useEffect. Voici un exemple qui récupère les taux de change EUR-FCFA depuis une API publique fictive — utile pour une appli e-commerce sénégalaise affichant les prix en temps réel.

import { useEffect, useState } from 'react';

export default function TauxFCFA() {
  const [taux, setTaux] = useState(null);
  useEffect(() => {
    fetch('https://api.exemple.com/eur-xof')
      .then(r => r.json())
      .then(data => setTaux(data.rate));
  }, []);
  if (!taux) return <p>Chargement...</p>;
  return <p>1 EUR = {taux} FCFA</p>;
}

Le tableau vide en second argument indique à React de n’exécuter l’effet qu’une seule fois au montage. Sans ce tableau, vous bouclez à l’infini sur l’API — erreur classique des débutants qui plombe les quotas en quelques minutes.

Étape 7 — Styliser sans framework lourd

Pour démarrer, restez simple — un fichier CSS par composant suffit. Évitez Tailwind ou styled-components au début, ils ajoutent une couche d’abstraction qui cache les fondamentaux. Une fois à l’aise, Tailwind devient un excellent choix pour aller vite sur des dashboards.

/* Salutation.css */
.salutation {
  background: #f6f9ff;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #2563eb;
}

Importez le CSS en haut du composant : import './Salutation.css';. Vite injecte automatiquement la feuille dans le bundle. Pas de configuration nécessaire — c’est l’un des grands plaisirs de l’écosystème moderne.

Étape 8 — Construire et déployer en production

Quand votre application est prête, générez le bundle optimisé. Vite produit des fichiers statiques que vous pouvez héberger sur Netlify, Vercel, GitHub Pages ou même un simple bucket OVH à 2 EUR par mois (environ 1 300 FCFA).

npm run build
# génère le dossier dist/ contenant index.html + assets minifiés
npm run preview
# sert le bundle localement pour vérification finale

Si npm run preview affiche votre app sans erreur, vous pouvez déployer en confiance. Drag-and-drop le dossier dist/ sur Netlify Drop pour publier en moins d’une minute, accessible depuis Dakar comme depuis Lomé.

Étape 9 — Continuer avec le routage et la composition avancée

Une fois ces 8 étapes maîtrisées, ajoutez React Router pour gérer plusieurs pages, puis explorez TanStack Query pour la gestion serveur. Pour l’IA, voyez notre comparatif LangChain vs LlamaIndex avec Claude et notre guide CTR Google pour faire ranker votre app React.

Étape 10 — Diagnostiquer les erreurs courantes du débutant

Trois erreurs reviennent dans 90 % des questions de débutants. Sachez les reconnaître vite — vous gagnerez des journées entières sur vos premières semaines avec React.

1. "Each child in a list should have a unique key prop"
   Cause : .map() sans prop key={}
   Fix   : ajouter key={item.id} sur le composant retourné

2. "Cannot read properties of undefined (reading 'X')"
   Cause : accès à un champ avant chargement async
   Fix   : if (!data) return <p>Chargement...</p>;

3. "Too many re-renders"
   Cause : appel direct setState dans le corps du composant
   Fix   : envelopper dans onClick, useEffect, ou handler

Notez ces patterns dans un fichier NOTES.md à côté de votre projet. Quand l’erreur revient, vous la corrigez en trente secondes au lieu d’une heure de Google. Cette habitude de capitaliser sur ses propres bugs est ce qui sépare un développeur React junior d’un confirmé en six mois.