Debuter avec React en 2026 : Guide Essentiel

Introduction

React est partout — Netflix, Airbnb, Discord, Meta, Notion, Figma. En 2026, c'est toujours la bibliotheque front-end la plus utilisee au monde, et de loin. Si tu veux devenir developpeur web, tu ne peux pas passer a cote.

Mais par ou commencer ? La documentation officielle est dense, les tutos YouTube sont souvent obsoletes (classes, componentDidMount...), et les formations payantes te vendent 40 heures de contenu alors que tu as besoin de comprendre les fondamentaux en quelques heures.

Ce guide est la pour ca. On va partir de zero, avec du React moderne — composants fonctionnels et hooks uniquement. Pas de classes, pas de syntaxe d'il y a 5 ans. A la fin, tu auras construit ta premiere application React fonctionnelle.

Pourquoi apprendre React en 2026 ?

Avant de plonger dans le code, parlons concretement de pourquoi React merite ton temps.

Le marche de l'emploi

React domine les offres d'emploi front-end. En France, plus de 60% des offres JavaScript front-end mentionnent React. Aux Etats-Unis, c'est encore plus marque. Connaitre React, c'est multiplier tes opportunites.

Un ecosysteme massif

React n'est pas seul. Il embarque avec lui un ecosysteme entier :

• Next.js — le framework full-stack React de reference, utilise en production par Vercel, TikTok, Twitch
• React Native — creer des applications mobiles iOS et Android avec les memes competences
• React Server Components — le rendering cote serveur, integre nativement depuis React 19
• Des milliers de bibliotheques : React Query, Zustand, React Hook Form, Framer Motion...

Apprendre React, c'est debloquer l'acces a tout cet ecosysteme.

Une courbe d'apprentissage progressive

Contrairement a Angular qui impose une architecture complete des le depart, React te laisse avancer a ton rythme. Tu commences par un composant, tu ajoutes du state, puis des effets. Chaque concept s'empile naturellement sur le precedent.

Les pre-requis avant de commencer

React est une bibliotheque JavaScript. Si tu ne maitrises pas les bases de JS, tu vas galérer. Voici ce que tu dois connaitre avant de continuer.

JavaScript moderne (ES6+)

Tu dois etre a l'aise avec ces concepts — si ce n'est pas le cas, commence par bien comprendre let, const et var en JavaScript et reviens ensuite :

// Declarations avec const et letconst nom = "React";let version = 19;// Arrow functionsconst saluer = (prenom) => `Salut ${prenom} !`;// Destructuring d'objets et de tableauxconst { title, author } = article;const [premier, ...reste] = tableau;// Spread operatorconst copie = { ...original, nouvelleProp: "valeur" };// Modules ESimport { useState } from "react";export default function MonComposant() { } n * 2);const pairs = nombres.filter((n) => n % 2 === 0);

Si tu rencontres des erreurs en JavaScript, consulte aussi les erreurs JavaScript courantes pour eviter les pieges classiques.

HTML et CSS

Tu dois savoir structurer une page HTML et la styliser avec CSS. Rien d'avance — les bases suffisent. React genere du HTML, donc tu dois comprendre ce qu'il produit.

Creer ton premier projet React avec Vite

En 2026, Vite est l'outil standard pour demarrer un projet React. Oublie Create React App — c'est obsolete. Vite est rapide, leger, et maintenu activement.

Installation

Ouvre ton terminal et lance :

npm create vite@latest mon-app-react -- --template reactcd mon-app-reactnpm installnpm run dev

Ton navigateur s'ouvre sur http://localhost:5173. Tu as un projet React qui tourne. C'est aussi simple que ca.

Pour en savoir plus sur la configuration, consulte la documentation Vite.

Structure du projet

mon-app-react/  index.html          // Point d'entree HTML  src/    main.jsx          // Point d'entree JavaScript    App.jsx           // Composant principal    App.css           // Styles du composant App  package.json        // Dependances  vite.config.js      // Configuration Vite

Le fichier main.jsx est le point de depart. Il monte ton composant App dans le DOM :

import React from "react";import ReactDOM from "react-dom/client";import App from "./App";import "./App.css";ReactDOM.createRoot(document.getElementById("root")).render(  <React.StrictMode>    <App />  </React.StrictMode>);

Tu n'as pas besoin de toucher a ce fichier pour l'instant. Tout ton travail se fera dans App.jsx et les composants que tu vas creer.

Comprendre JSX

JSX, c'est la syntaxe qui te permet d'ecrire du HTML directement dans ton JavaScript. C'est la premiere chose qui surprend quand on decouvre React.

Les bases

function App() {  const langage = "React";  const annee = 2026;  return (    <div>      <h1>Bienvenue sur {langage}</h1>      <p>Nous sommes en {annee}.</p>      <p>2 + 2 = {2 + 2}</p>    </div>  );}

Les accolades {} te permettent d'inserer n'importe quelle expression JavaScript dans ton JSX. Une variable, un calcul, un appel de fonction — tout ce qui retourne une valeur.

Conditions dans le JSX

Tu ne peux pas utiliser if/else directement dans le JSX. A la place, utilise l'operateur ternaire ou le && logique :

function MessageAccueil({ estConnecte, prenom }) {  return (    <div>      {estConnecte ? (        <p>Content de te revoir, {prenom} !</p>      ) : (        <p>Connecte-toi pour continuer.</p>      )}      {estConnecte && <button>Acceder au tableau de bord</button>}    </div>  );}

Afficher des listes

Pour afficher une liste d'elements, utilise .map(). Chaque element doit avoir une prop key unique — React en a besoin pour optimiser le rendu :

function ListeDeCompetences() {  const competences = ["JavaScript", "React", "CSS", "Node.js"];  return (    <ul>      {competences.map((comp) => (        <li key={comp}>{comp}</li>      ))}    </ul>  );}

N'utilise jamais l'index du tableau comme key si ta liste peut changer (ajout, suppression, reordonnancement). Utilise un identifiant stable.

Les composants : la brique de base

En React, tout est composant. Un bouton, un formulaire, une page entiere — chaque morceau de ton interface est un composant. C'est une simple fonction JavaScript qui retourne du JSX.

Creer un composant

// src/components/Carte.jsxfunction Carte() {  return (    <div className="carte">      <h3>Mon premier composant</h3>      <p>Ca fonctionne !</p>    </div>  );}export default Carte;

Deux regles a retenir :

• Le nom du composant commence toujours par une majuscule (Carte, pas carte)
• Un composant retourne un seul element racine (utilise <div> ou un Fragment <>...</>)

Composer des composants

La puissance de React, c'est la composition. Tu assembles des petits composants pour construire des interfaces complexes :

function CarteProfil({ nom, role }) {  return (    <div className="carte-profil">      <Avatar nom={nom} />      <h3>{nom}</h3>      <Badge role={role} />    </div>  );}function Avatar({ nom }) {  return <img src={`/avatars/${nom}.jpg`} alt={nom} />;}function Badge({ role }) {  return <span className="badge">{role}</span>;}// Utilisationfunction App() {  return (    <div>      <CarteProfil nom="Alice" role="Developpeur" />      <CarteProfil nom="Bob" role="Designer" />    </div>  );}

Chaque composant a une responsabilite claire. Avatar gere l'image, Badge gere le role, CarteProfil assemble le tout. C'est ca, penser en React.

Props : passer des donnees

Les props (proprietes) sont le mecanisme pour passer des donnees d'un composant parent a un composant enfant. C'est un flux a sens unique — du parent vers l'enfant, jamais l'inverse.

Syntaxe de base

// Le parent passe les props<Bouton label="Valider" couleur="vert" taille="large" />// L'enfant les recoit via destructuringfunction Bouton({ label, couleur, taille }) {  return (    <button className={`btn btn-${couleur} btn-${taille}`}>      {label}    </button>  );}

Props par defaut

function Bouton({ label, couleur = "bleu", taille = "medium" }) {  return (    <button className={`btn btn-${couleur} btn-${taille}`}>      {label}    </button>  );}// Si tu ne passes pas couleur, elle vaut "bleu"<Bouton label="OK" />

La prop children

La prop speciale children contient tout ce que tu places entre les balises ouvrante et fermante d'un composant :

function Panneau({ titre, children }) {  return (    <div className="panneau">      <div className="panneau-header">        <h3>{titre}</h3>      </div>      <div className="panneau-body">        {children}      </div>    </div>  );}// Utilisation<Panneau titre="Informations">  <p>Tu peux mettre n'importe quoi ici.</p>  <p>Du texte, d'autres composants, des images...</p></Panneau>

Retiens cette regle fondamentale : les props sont en lecture seule. Un composant ne doit jamais modifier ses propres props. Si tu as besoin de donnees qui changent, c'est le state qu'il te faut.

State et useState : rendre l'interface reactive

Le state (etat), c'est ce qui rend ton interface vivante. Quand le state change, React re-rend automatiquement le composant avec les nouvelles valeurs. C'est le coeur de la reactivite.

Le hook useState

useState est le hook le plus fondamental de React. Il te donne une variable reactive et une fonction pour la modifier. Consulte la reference React sur useState pour tous les details.

import { useState } from "react";function Compteur() {  const [compteur, setCompteur] = useState(0);  return (    <div>      <p>Compteur : {compteur}</p>      <button onClick={() => setCompteur(compteur + 1)}>        Incrementer      </button>      <button onClick={() => setCompteur(0)}>        Reinitialiser      </button>    </div>  );}

useState(0) retourne un tableau de deux elements :

1. compteur — la valeur actuelle du state
2. setCompteur — la fonction pour mettre a jour cette valeur

Le 0 passe en argument est la valeur initiale.

L'immutabilite

C'est le piege numero un des debutants. En React, tu ne modifies jamais directement le state. Tu crees toujours une nouvelle valeur.

function ListeCourses() {  const [articles, setArticles] = useState(["Pain", "Lait"]);  const ajouterArticle = () => {    // ❌ MAUVAIS — mutation directe    // articles.push("Beurre");    // setArticles(articles);    // ✅ BON — nouvelle reference avec spread    setArticles([...articles, "Beurre"]);  };  return (    <div>      <ul>        {articles.map((article, i) => (          <li key={i}>{article}</li>        ))}      </ul>      <button onClick={ajouterArticle}>Ajouter Beurre</button>    </div>  );}

Formulaire avec state

Voici un exemple concret de formulaire controle — le pattern le plus courant en React :

import { useState } from "react";function FormulaireContact() {  const [nom, setNom] = useState("");  const [email, setEmail] = useState("");  const [envoye, setEnvoye] = useState(false);  const handleSubmit = (e) => {    e.preventDefault();    console.log("Envoi :", { nom, email });    setEnvoye(true);  };  if (envoye) {    return <p>Merci {nom}, ton message a ete envoye !</p>;  }  return (    <form onSubmit={handleSubmit}>      <label>        Nom :        <input          type="text"          value={nom}          onChange={(e) => setNom(e.target.value)}        />      </label>      <label>        Email :        <input          type="email"          value={email}          onChange={(e) => setEmail(e.target.value)}        />      </label>      <button type="submit">Envoyer</button>    </form>  );}

Chaque champ est lie a une variable de state. Quand l'utilisateur tape, onChange met a jour le state, et React re-rend le champ avec la nouvelle valeur. C'est ce qu'on appelle un composant controle.

useEffect : les effets de bord

Ton composant doit parfois faire des choses qui ne sont pas du rendu pur : appeler une API, ecouter un evenement, modifier le titre de la page. C'est le role de useEffect.

Syntaxe de base

import { useState, useEffect } from "react";function TitreDynamique() {  const [compteur, setCompteur] = useState(0);  useEffect(() => {    document.title = `Compteur : ${compteur}`;  }, [compteur]);  return (    <button onClick={() => setCompteur(compteur + 1)}>      Clique ({compteur})    </button>  );}

Le deuxieme argument de useEffect est le tableau de dependances. L'effet se re-execute uniquement quand une de ces dependances change :

• useEffect(fn, [compteur]) — se lance quand compteur change
• useEffect(fn, []) — se lance une seule fois, au montage du composant
• useEffect(fn) — se lance a chaque rendu (rarement ce que tu veux)

Appeler une API avec useEffect

C'est le cas d'usage le plus frequent. Tu charges des donnees au montage du composant. Pour bien comprendre les appels asynchrones, jette un oeil a comprendre async/await.

import { useState, useEffect } from "react";function ListeUtilisateurs() {  const [utilisateurs, setUtilisateurs] = useState([]);  const [chargement, setChargement] = useState(true);  const [erreur, setErreur] = useState(null);  useEffect(() => {    const chargerDonnees = async () => {      try {        const response = await fetch("https://jsonplaceholder.typicode.com/users");        if (!response.ok) throw new Error("Erreur reseau");        const data = await response.json();        setUtilisateurs(data);      } catch (err) {        setErreur(err.message);      } finally {        setChargement(false);      }    };    chargerDonnees();  }, []);  if (chargement) return <p>Chargement...</p>;  if (erreur) return <p>Erreur : {erreur}</p>;  return (    <ul>      {utilisateurs.map((user) => (        <li key={user.id}>{user.name} — {user.email}</li>      ))}    </ul>  );}

Remarque le pattern chargement / erreur / donnees. C'est un pattern que tu retrouveras dans tous tes projets React. Les trois etats possibles d'un appel API.

Le cleanup

Si ton effet cree un abonnement (event listener, interval, websocket), tu dois le nettoyer quand le composant se demonte. La fonction retournee par useEffect sert exactement a ca :

useEffect(() => {  const handleResize = () => {    console.log("Fenetre :", window.innerWidth);  };  window.addEventListener("resize", handleResize);  // Cleanup : se lance au demontage  return () => {    window.removeEventListener("resize", handleResize);  };}, []);

Sans ce cleanup, tu accumules des event listeners a chaque re-rendu. C'est une fuite memoire classique.

Ton premier projet : une To-Do List

On va mettre tout ca ensemble dans une mini-application complete. Une To-Do List, c'est le projet parfait pour un premier projet React : ca utilise le state, les composants, les props, les listes et les evenements.

Le composant principal

import { useState } from "react";function App() {  const [taches, setTaches] = useState([]);  const [saisie, setSaisie] = useState("");  const ajouterTache = (e) => {    e.preventDefault();    if (saisie.trim() === "") return;    const nouvelleTache = {      id: crypto.randomUUID(),      texte: saisie.trim(),      terminee: false,    };    setTaches([...taches, nouvelleTache]);    setSaisie("");  };  const toggleTache = (id) => {    setTaches(      taches.map((t) =>        t.id === id ? { ...t, terminee: !t.terminee } : t      )    );  };  const supprimerTache = (id) => {    setTaches(taches.filter((t) => t.id !== id));  };  return (    <div style={{ maxWidth: "500px", margin: "2rem auto" }}>      <h1>Ma To-Do List</h1>      <FormulaireTache        saisie={saisie}        onChangeSaisie={setSaisie}        onAjouter={ajouterTache}      />      <p>{taches.filter((t) => !t.terminee).length} tache(s) restante(s)</p>      <ListeTaches        taches={taches}        onToggle={toggleTache}        onSupprimer={supprimerTache}      />    </div>  );}export default App;

Le formulaire d'ajout

function FormulaireTache({ saisie, onChangeSaisie, onAjouter }) {  return (    <form onSubmit={onAjouter} style={{ display: "flex", gap: "0.5rem" }}>      <input        type="text"        value={saisie}        onChange={(e) => onChangeSaisie(e.target.value)}        placeholder="Ajouter une tache..."        style={{ flex: 1, padding: "0.5rem" }}      />      <button type="submit" style={{ padding: "0.5rem 1rem" }}>        Ajouter      </button>    </form>  );}

La liste et les items

function ListeTaches({ taches, onToggle, onSupprimer }) {  if (taches.length === 0) {    return <p style={{ color: "#888" }}>Aucune tache pour le moment.</p>;  }  return (    <ul style={{ listStyle: "none", padding: 0 }}>      {taches.map((tache) => (        <TacheItem          key={tache.id}          tache={tache}          onToggle={onToggle}          onSupprimer={onSupprimer}        />      ))}    </ul>  );}function TacheItem({ tache, onToggle, onSupprimer }) {  return (    <li      style={{        display: "flex",        alignItems: "center",        gap: "0.5rem",        padding: "0.5rem 0",        borderBottom: "1px solid #eee",      }}    >      <input        type="checkbox"        checked={tache.terminee}        onChange={() => onToggle(tache.id)}      />      <span        style={{          flex: 1,          textDecoration: tache.terminee ? "line-through" : "none",          color: tache.terminee ? "#888" : "#000",        }}      >        {tache.texte}      </span>      <button        onClick={() => onSupprimer(tache.id)}        style={{ color: "red", border: "none", cursor: "pointer" }}      >        Supprimer      </button>    </li>  );}

Analyse ce qu'on a utilise ici :

• useState — pour la liste de taches et le champ de saisie
• Props — pour passer les donnees et callbacks aux composants enfants
• Immutabilite — map(), filter(), spread ... partout
• Composition — 4 composants avec des responsabilites claires
• Rendu conditionnel — le message "Aucune tache" quand la liste est vide
• key — chaque TacheItem a une cle unique basee sur l'UUID

C'est un vrai projet React, pas du pseudo-code. Copie-le dans ton projet Vite et teste-le.

Recapitulatif

Voici un tableau qui resume tous les concepts fondamentaux que tu viens d'apprendre :

Si tu maitrises ces 8 concepts, tu as les fondations solides pour construire n'importe quelle interface React.

Pour aller plus loin

Tu as maintenant les bases. Mais le chemin ne s'arrete pas la. Voici comment continuer ta progression :

Les prochaines etapes

1. React Router — ajouter de la navigation multi-pages a ton application
2. Gestion d'etat globale — Zustand ou Context API pour partager le state entre composants eloignes
3. React Query / TanStack Query — gerer les appels API proprement (cache, refetch, loading states)
4. Next.js — le framework React pour la production (SSR, routing, API routes)

Evite les pieges classiques

Avant d'aller plus loin, prends le temps de lire les 15 erreurs React que font les debutants. Tu y trouveras les pieges les plus frequents avec les hooks, le rendu conditionnel et la gestion du state — exactement les sujets qu'on vient de couvrir.

Pratique, pratique, pratique

La theorie ne suffit pas. Tu dois ecrire du code, casser des choses, debugger, recommencer. C'est comme ca qu'on apprend vraiment. La documentation officielle React est excellente et regorge d'exemples interactifs — c'est ta reference numero un.

Et si tu veux pratiquer avec des exercices guides, step by step, decouvre nos ateliers interactifs sur GoGoKodo. Tu codes directement dans le navigateur, avec validation automatique a chaque etape. C'est le meilleur moyen de passer de la theorie a la pratique.