React : le guide pour bien débuter

React est la bibliothèque JavaScript la plus répandue pour construire des interfaces web. Son idée centrale est simple : découper une page en petits blocs réutilisables appelés composants, puis laisser React se charger de mettre à jour l’écran quand les données changent. Ce guide vous accompagne pour apprendre React pas à pas, des composants jusqu’aux hooks, avec des exemples concrets.

Ce que React résout

Sans React, mettre à jour une page manuellement devient vite un casse-tête : il faut retrouver le bon élément dans le DOM, modifier son contenu, gérer chaque cas à la main. React inverse la logique. Vous décrivez à quoi doit ressembler l’interface pour un état donné, et React se charge de synchroniser l’écran. Vous ne manipulez plus le DOM directement, vous décrivez un résultat.

Avant de continuer, il est utile de maîtriser les bases du langage. Si ce n’est pas le cas, notre guide pour apprendre JavaScript pose les fondations indispensables (fonctions, tableaux, objets, map).

Créer un projet React

La façon la plus simple de démarrer aujourd’hui passe par un outil de build moderne. Une commande suffit :

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

Votre application tourne sur un serveur local avec rechargement à chaud : chaque modification s’affiche immédiatement.

Les composants : les briques de base

Un composant React est une fonction JavaScript qui retourne du JSX, une syntaxe proche du HTML mais écrite dans du JavaScript. Par convention, le nom commence par une majuscule.

function Bienvenue() {
  return <h1>Bonjour, Coder Studio !</h1>;
}

On assemble ensuite les composants comme des balises :

function App() {
  return (
    <div>
      <Bienvenue />
      <p>Ma première application React.</p>
    </div>
  );
}

Cette composition est le cœur de React : une page complexe n’est qu’un arbre de petits composants.

Le JSX en quelques règles

Le JSX ressemble au HTML mais suit quelques règles propres :

on utilise className au lieu de class ;
toute expression JavaScript s’insère entre accolades { } ;
un composant doit retourner un seul élément racine (utilisez un fragment <>...</> si besoin).

function Salutation() {
  const prenom = "Léa";
  return (
    <>
      <h2 className="titre">Salut {prenom} !</h2>
      <p>Nous sommes le {new Date().getFullYear()}.</p>
    </>
  );
}

Les props : passer des données

Les props permettent à un composant parent de transmettre des données à un enfant. Ce sont les arguments du composant. Elles sont en lecture seule : un composant ne modifie jamais ses propres props.

function Carte({ titre, texte }) {
  return (
    <article>
      <h3>{titre}</h3>
      <p>{texte}</p>
    </article>
  );
}

function App() {
  return (
    <Carte titre="React" texte="Une bibliothèque pour les interfaces." />
  );
}

Grâce aux props, un même composant Carte peut afficher des contenus différents. C’est ce qui rend les composants réutilisables.

Le state avec useState

Les props viennent du parent, mais un composant a souvent besoin de sa propre mémoire interne : c’est le state (l’état). Le hook useState permet de le déclarer. Quand l’état change, React ré-affiche automatiquement le composant.

import { useState } from "react";

function Compteur() {
  const [nombre, setNombre] = useState(0);

  return (
    <button onClick={() => setNombre(nombre + 1)}>
      Cliqué {nombre} fois
    </button>
  );
}

useState(0) renvoie deux choses : la valeur actuelle (nombre) et une fonction pour la modifier (setNombre). Règle d’or : ne modifiez jamais l’état directement (nombre = 5 ne fonctionne pas). Passez toujours par la fonction de mise à jour.

Réagir aux changements avec useEffect

useEffect sert à exécuter du code en réaction au cycle de vie du composant : appeler une API, s’abonner à un événement, lancer un minuteur. Il prend une fonction et un tableau de dépendances.

import { useState, useEffect } from "react";

function Horloge() {
  const [heure, setHeure] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const id = setInterval(() => {
      setHeure(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(id); // nettoyage
  }, []); // [] = exécuté une seule fois au montage

  return <p>Il est {heure}</p>;
}

Le tableau de dépendances contrôle quand l’effet se relance : vide, il ne s’exécute qu’une fois ; avec des variables, il se relance à chaque changement de celles-ci. La fonction retournée sert au nettoyage (ici, arrêter le minuteur).

Afficher des listes

Pour afficher une collection, on utilise map en fournissant une prop key unique, indispensable pour que React suive chaque élément efficacement.

function Liste({ fruits }) {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Penser en React

Au-delà de la syntaxe, React demande une manière de raisonner. Trois réflexes à adopter :

Découper l’interface en composants : un bloc réutilisable ou complexe mérite son propre composant.
Faire descendre les données : le state vit au niveau le plus haut qui en a besoin, puis se transmet via les props.
Décrire, ne pas manipuler : vous décrivez l’interface pour un état donné ; React s’occupe des mises à jour.

Une fois ces réflexes acquis, la suite logique est un framework comme Next.js, qui ajoute routing et rendu serveur autour de React. Notre guide Next.js pour débuter prend le relais naturellement.

Continuer votre apprentissage

Le meilleur moyen de progresser est de construire. Une todo-list, une galerie d’images qui interroge une API, un petit formulaire validé : chacun de ces projets mobilise composants, props, state et effets. Ajoutez ensuite TypeScript pour fiabiliser vos composants, et vous aurez une base solide pour le développement web moderne.