React pour débutants : créer sa première application web interactive

Tu as codé une page en HTML/CSS, ajouté un peu de JavaScript, et tu t’es retrouvé à écrire pour la dixième fois document.querySelector suivi d’un innerHTML bricolé. Le jour où l’interface commence à avoir plusieurs états (un formulaire, une liste qui se met à jour, un compteur), le code devient vite un plat de spaghettis. React existe précisément pour ça : décrire à quoi ressemble ton interface pour un état donné, et laisser la bibliothèque se charger de mettre le DOM à jour. Ce guide te fait passer de zéro à une petite application fonctionnelle, avec les outils réellement utilisés en 2026.

React, pourquoi tout le monde en parle (et quand s’en passer)

#

React reste le poids lourd du front-end, et les chiffres ne bougent pas beaucoup. Dans la dernière grande enquête Stack Overflow, 46,9 % des développeurs professionnels déclarent l’utiliser, loin devant Angular (19,8 %) et Vue (18,4 %). Next.js, qui est bâti sur React, en revendique 21,5 % de son côté. Autrement dit, apprendre React, c’est apprendre le dialecte majoritaire du secteur. Côté rémunération en France, un profil junior orienté React démarre en général entre 32 000 et 38 000 euros bruts, un confirmé tourne autour de 42 000 à 55 000, avec une majoration de 10 à 20 % en région parisienne.

Ça ne veut pas dire que React est la bonne réponse partout. Pour un site vitrine de cinq pages, un blog ou une landing page, React ajoute une couche de complexité dont tu n’as aucun besoin : du HTML propre et un peu de JavaScript feront mieux, plus vite, et se référenceront tout aussi bien. React devient intéressant quand ton interface a de la mémoire : des données qui changent, des composants qui se répètent, des écrans qui réagissent aux actions de l’utilisateur. Un tableau de bord, un panier, une messagerie, un configurateur de produit.

Prérequis honnête : React ne s’apprend pas avant JavaScript. Si les fonctions fléchées, la déstructuration, map sur un tableau ou async/await te sont étrangers, tu vas passer ton temps à confondre les difficultés du langage avec celles de la bibliothèque. Un détour par les concepts essentiels de JavaScript moderne t’évitera des semaines de frustration.

Créer son projet : Vite, et rien d’autre

#

Première chose à savoir, parce que la moitié des tutoriels du web sont périmés là-dessus : create-react-app est mort. L’équipe React l’a officiellement déprécié en février 2025, et il ne faut plus l’utiliser pour un nouveau projet. L’outil recommandé aujourd’hui, c’est Vite. Serveur de développement quasi instantané, rechargement à chaud qui ne casse pas l’état de ta page, build de production optimisé, le tout sans configuration.

Tu as besoin de Node.js installé (version 20 ou supérieure, idéalement la LTS). Ensuite, trois commandes :

# Génère le squelette du projet avec le modèle React
npm create vite@latest ma-premiere-app -- --template react

# Installe les dépendances déclarées dans package.json
cd ma-premiere-app
npm install

# Lance le serveur de développement (souvent sur http://localhost:5173)
npm run dev

Ouvre l’URL affichée dans le terminal, tu as une page React qui tourne. La version installée sera de la ligne 19.2, sortie en octobre 2025 et maintenue depuis (le correctif 19.2.7 date de juin 2026). Bonus notable : les nouveaux projets Vite activent par défaut le React Compiler, passé en 1.0 fin 2025. Ce compilateur optimise automatiquement les rendus, ce qui t’épargne les useMemo et useCallback que les anciens tutoriels te faisaient saupoudrer partout. Tu peux ignorer son existence pendant tes premiers mois, il travaille dans ton dos.

Regarde le dossier généré : src/App.jsx est ton point d’entrée visuel, src/main.jsx branche React sur la page HTML, index.html est le squelette. Vide le contenu de App.jsx, on repart de zéro.

Le composant, seule brique à comprendre vraiment

#

Un composant React, c’est une fonction JavaScript qui retourne du balisage. Rien de plus. Ce balisage s’appelle du JSX : ça ressemble à du HTML, mais c’est bien du JavaScript, avec quelques différences de vocabulaire (className au lieu de class, htmlFor au lieu de for).

// Un composant = une fonction dont le nom commence par une majuscule
function CarteFormation() {
  return (
    <article className="carte">
      <h2>Initiation à React</h2>
      <p>Durée : 12 heures</p>
    </article>
  );
}

Ce composant est figé, donc peu utile. Pour le rendre réutilisable, on lui passe des données depuis l’extérieur : ce sont les props, l’équivalent des attributs HTML. Les accolades permettent d’insérer n’importe quelle expression JavaScript dans le JSX.

function CarteFormation({ titre, duree, gratuite }) {
  return (
    <article className="carte">
      <h2>{titre}</h2>
      <p>Durée : {duree} heures</p>
      {/* Affichage conditionnel : le && n'affiche l'élément que si la condition est vraie */}
      {gratuite && <span className="badge">Gratuit</span>}
    </article>
  );
}

// Utilisation, dans App.jsx
export default function App() {
  return (
    <main>
      <CarteFormation titre="Initiation à React" duree={12} gratuite />
      <CarteFormation titre="React avancé" duree={25} />
    </main>
  );
}

Deux règles à graver tout de suite. Le nom d’un composant commence toujours par une majuscule, sinon React le prend pour une balise HTML classique. Et un composant ne modifie jamais ses props : elles arrivent en lecture seule, comme les paramètres d’une fonction pure.

L’état avec useState : là où l’interface prend vie

#

Les props descendent du parent. L’état, lui, appartient au composant et peut changer au fil du temps. C’est le hook useState qui s’en charge, et c’est le concept central de React.

import { useState } from "react";

function Compteur() {
  // useState renvoie un tableau : la valeur actuelle, et la fonction pour la changer
  const [nombre, setNombre] = useState(0);

  return (
    <div>
      <p>Modules terminés : {nombre}</p>
      <button onClick={() => setNombre(nombre + 1)}>Valider un module</button>
    </div>
  );
}

Le mécanisme mérite qu’on s’y arrête trente secondes, parce que c’est là que ça coince chez la plupart des débutants. Quand tu appelles setNombre, React ne modifie pas la variable sur place : il relance la fonction Compteur du début, avec la nouvelle valeur, et compare le résultat au rendu précédent pour n’appliquer au DOM que ce qui a réellement changé. D’où la règle numéro un : ne touche jamais directement à une variable d’état. nombre++ ne déclenchera aucun rendu, et tu passeras une heure à te demander pourquoi ton bouton ne fait rien.

Même logique pour les objets et les tableaux : on ne les modifie pas, on en crée une copie modifiée.

// Faux : mutation directe, React ne voit rien
taches.push(nouvelleTache);
setTaches(taches);

// Juste : on crée un nouveau tableau
setTaches([...taches, nouvelleTache]);

Mini-projet : une liste de tâches en une trentaine de lignes

#

Assez de théorie. Voici l’application complète qui combine tout ce qu’on vient de voir : état, formulaire contrôlé, rendu de liste et suppression. Colle-la dans src/App.jsx et regarde-la fonctionner.

import { useState } from "react";

export default function App() {
  const [taches, setTaches] = useState([]);
  const [saisie, setSaisie] = useState("");

  function ajouterTache(event) {
    event.preventDefault();           // sinon le formulaire recharge la page
    if (saisie.trim() === "") return; // on ignore les saisies vides

    const nouvelle = { id: crypto.randomUUID(), texte: saisie, faite: false };
    setTaches([...taches, nouvelle]);
    setSaisie("");                    // on vide le champ après ajout
  }

  function basculer(id) {
    // map renvoie un nouveau tableau : on remplace uniquement la tâche visée
    setTaches(taches.map((t) => (t.id === id ? { ...t, faite: !t.faite } : t)));
  }

  return (
    <main>
      <h1>Mes tâches ({taches.filter((t) => !t.faite).length} en cours)</h1>

      <form onSubmit={ajouterTache}>
        {/* Champ contrôlé : sa valeur vient de l'état, pas du DOM */}
        <input
          value={saisie}
          onChange={(e) => setSaisie(e.target.value)}
          placeholder="Réviser les hooks"
        />
        <button type="submit">Ajouter</button>
      </form>

      <ul>
        {taches.map((tache) => (
          // key aide React à suivre chaque élément entre deux rendus
          <li key={tache.id} onClick={() => basculer(tache.id)}>
            {tache.faite ? <s>{tache.texte}</s> : tache.texte}
          </li>
        ))}
      </ul>
    </main>
  );
}

Le champ input illustre un pattern que tu vas croiser en permanence : le composant contrôlé. La valeur affichée vient de l’état React, et chaque frappe déclenche onChange qui met l’état à jour. Ça paraît tortueux au début, mais ça te donne le contrôle total sur la saisie (validation, formatage, réinitialisation) sans jamais interroger le DOM.

Attention à la key : quand tu affiches une liste, chaque élément a besoin d’un identifiant stable et unique. Beaucoup de tutoriels utilisent l’index du tableau, ce qui provoque des bugs bizarres dès qu’on supprime ou réordonne des éléments (une case à cocher qui saute d’une ligne à l’autre, par exemple). Utilise un vrai identifiant, comme ici avec crypto.randomUUID().

Aller chercher des données avec useEffect

#

Une application réelle affiche rarement des données inventées sur place. Pour appeler une API au chargement du composant, le hook useEffect sert de passerelle vers le monde extérieur.

import { useEffect, useState } from "react";

function ListeArticles() {
  const [articles, setArticles] = useState([]);
  const [chargement, setChargement] = useState(true);

  useEffect(() => {
    async function charger() {
      const reponse = await fetch("https://api.example.com/articles");
      setArticles(await reponse.json());
      setChargement(false);
    }
    charger();
  }, []); // tableau vide = exécution une seule fois, au montage du composant

  if (chargement) return <p>Chargement en cours...</p>;

  return (
    <ul>
      {articles.map((a) => (
        <li key={a.id}>{a.titre}</li>
      ))}
    </ul>
  );
}

Le second argument de useEffect, le tableau de dépendances, décide quand l’effet se relance. Vide, il ne s’exécute qu’une fois. Avec [categorie] dedans, il repart à chaque changement de catégorie. Omis complètement, il se relance à chaque rendu, et tu obtiens une boucle infinie de requêtes réseau. C’est le classique du genre, tout le monde y passe une fois.

Un conseil qui va à contre-courant de beaucoup de tutoriels : useEffect sert à synchroniser ton composant avec un système externe (réseau, minuteur, abonnement), pas à réagir aux clics ni à recalculer des valeurs dérivées. Si tu peux calculer une donnée directement pendant le rendu, fais-le, sans effet ni état supplémentaire.

Ce qui a changé récemment, et ce que tu peux ignorer

#

React 19 a introduit une salve de nouveautés dont on parle beaucoup, et il vaut mieux savoir lesquelles te concernent maintenant. useActionState simplifie la gestion des formulaires (état en attente, erreurs, résultat) et remplace avantageusement le trio état de chargement, état d’erreur, gestionnaire manuel. useEffectEvent, arrivé avec la 19.2, résout enfin le problème des callbacks qui forcent à relancer tout un effet. Le composant <Activity> permet de masquer une partie de l’interface tout en conservant son état, pratique pour des onglets.

Honnêtement, aucun de ces ajouts n’est nécessaire à ta première application. Ce qui compte pendant tes premières semaines : composants, props, état, listes, effets. Les Server Components, le rendu côté serveur, Next.js, la gestion d’état globale avec Zustand ou Redux, tout ça a du sens quand tu auras buté sur les problèmes que ces outils résolvent. Les apprendre avant, c’est mémoriser des réponses à des questions que tu ne t’es pas encore posées.

Où apprendre React sérieusement

#

Mon conseil : commence impérativement par le tutoriel officiel de react.dev, réécrit il y a peu et devenu excellent. Il enseigne la bonne façon de penser en React (décomposer l’interface, faire remonter l’état) plutôt qu’une collection de recettes. Ensuite seulement, prends un cours plus long si tu veux du guidage, ou attaque directement un projet personnel.

Et pense à versionner ton travail dès le premier jour. Un projet React grossit vite, et pouvoir revenir en arrière quand une refonte tourne mal change la vie : Git et GitHub pour les débutants couvre le strict nécessaire en une session.

L’essentiel à retenir

#

React tient sur une idée simple : ton interface est une fonction de ton état. Tu décris le résultat souhaité, React s’occupe de la mise à jour du DOM. Composants, props, useState, useEffect et les listes avec key couvrent l’immense majorité de ce que tu écriras pendant tes six premiers mois.

Pour la suite, le plan tient en trois étapes : refais la liste de tâches sans regarder cet article, ajoute-lui la persistance dans le localStorage, puis branche-la sur une vraie API. Chaque blocage rencontré t’apprendra plus que trois heures de vidéo. Si tu veux replacer React dans un parcours plus large, du HTML jusqu’à l’emploi, notre guide complet pour apprendre le développement web donne l’itinéraire d’ensemble.