React pour les débutants : les fondamentaux pour créer ta première application

React est aujourd’hui la bibliothèque JavaScript la plus utilisée pour construire des interfaces web. Que tu regardes les offres d’emploi de développeur front-end ou que tu veuilles donner un coup de jeune à tes projets, React revient partout. Mais par où commencer quand on vient du HTML/CSS ou d’un autre langage ? Ce guide te donne les fondamentaux concrets pour créer ta première application React, avec du vrai code, pas de théorie abstraite.

Pourquoi React ? Le problème qu’il résout

Avant React, manipuler le DOM avec JavaScript pur (ou jQuery) devenait vite un cauchemar : chaque donnée affichée devait être mise à jour à la main dans plusieurs endroits du code. Tu changes une valeur, tu oublies un endroit, et l’interface ment sur l’état réel de ton application.

React apporte une réponse radicale : tu décris ce que tu veux afficher, et React se charge de mettre à jour le DOM tout seul. C’est le principe de la programmation déclarative. Tu ne dis plus « ajoute ce <li> dans cette liste », tu dis « voici la liste, avec ces données » — et React calcule la différence avec l’écran actuel pour ne modifier que ce qui a changé. Résultat : un code plus simple à écrire, à relire et à maintenir.

Les composants : le cœur de React

Tout dans React est un composant : une fonction JavaScript qui retourne du contenu à afficher. C’est la brique de base de ton interface.

function CarteUtilisateur() {
  return <div>Bonjour, je suis un composant !</div>;
}

export default CarteUtilisateur;

Un composant, c’est simple : une fonction dont le nom commence par une majuscule, qui retourne du JSX. Tu peux ensuite réutiliser ce composant partout dans ton application, comme un Lego. C’est cette capacité de composition qui rend React si puissant : tu construis des petites briques simples, puis tu les assemble en écrans complexes.

JSX : du HTML dans du JavaScript

Le JSX est la syntaxe qui ressemble à du HTML mais qui vit dans tes fichiers JavaScript. Concrètement :

function Accueil() {
  const prenom = "Sarah";
  return (
    <h1>Bonjour {prenom} !</h1>
  );
}

Les accolades { } permettent d'insérer des expressions JavaScript directement dans ton « HTML ». C'est la première chose qui surprend les débutants : on mélange structure et logique au même endroit. Et c'est justement ce qui rend le code plus facile à suivre : tu vois immédiatement ce qui est affiché et d'où viennent les données.

Deux petites différences à retenir avec le HTML classique : on écrit className au lieu de class (car class est un mot réservé en JavaScript), et les attributs se nomment en camelCase (onClick, onSubmit…).

Props et state : les deux concepts clés

Ces deux notions sont LA différence entre un débutant qui copie-colle et un développeur React qui comprend ce qu'il fait.

Les props : des données qui entrent

Les props (propriétés) sont les données qu'un parent passe à son composant enfant. Elles sont en lecture seule : l'enfant les reçoit, il ne les modifie pas.

function Bienvenue({ nom }) {
  return <p>Heureux de te voir, {nom} !</p>
}

// Usage :
<Bienvenue nom="Sarah" />
<Bienvenue nom="Karim" />

Un seul composant Bienvenue, affiché avec des données différentes. C'est ça, la réutilisation.

Le state : des données qui vivent

Le state (état), lui, est interne au composant et peut changer au fil du temps : un champ de formulaire, un compteur, une liste qui se remplit. Quand le state change, React re-rend automatiquement le composant avec les nouvelles valeurs.

import { useState } from "react";

function Compteur() {
  const [compte, setCompte] = useState(0);

  return (
    <div>
      <p>Tu as cliqué {compte} fois</p>
      <button onClick={() => setCompte(compte + 1)}>
        Clique-moi
      </button>
    </div>
  );
}

Retiens la règle d'or : jamais de mutation directe. On ne fait pas compte = compte + 1, on appelle toujours setCompte() — c'est ce qui prévient React que quelque chose a changé et déclenche la mise à jour de l'interface.

Les hooks essentiels : useState et useEffect

Les hooks sont des fonctions spéciales qui « accrochent » des capacités à tes composants. Les deux premiers à maîtriser :

• useState : gérer l'état local (on vient de le voir).
• useEffect : exécuter du code quand le composant apparaît ou quand une donnée change — parfait pour charger des données depuis une API.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://api.exemple.com/articles")
      .then((r) => r.json())
      .then((data) => setArticles(data));
  }, []); // [] = une seule fois au montage

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

Le tableau vide [] en second argument dit à React : « exécute ceci uniquement quand le composant est monté ». Sans lui, l'effet s'exécuterait à chaque rendu — boucle infinie garantie, une erreur classique chez les débutants.

Ton premier composant pas à pas

Assemble tout ça dans un mini-projet concret : une liste de tâches. Elle a un champ de saisie, un bouton d'ajout et l'affichage de la liste — avec uniquement useState.

import { useState } from "react";

function TodoList() {
  const [tache, setTache] = useState("");
  const [taches, setTaches] = useState([]);

  function ajouter(e) {
    e.preventDefault();
    if (tache.trim() === "") return;
    setTaches([...taches, tache]);
    setTache("");
  }

  return (
    <div>
      <h1>Mes tâches</h1>
      <form onSubmit={ajouter}>
        <input
          value={tache}
          onChange={(e) => setTache(e.target.value)}
          placeholder="Nouvelle tâche"
        />
        <button type="submit">Ajouter</button>
      </form>
      <ul>
        {taches.map((t, i) => (
          <li key={i}>{t}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Ce petit programme contient déjà 80 % des concepts de React : un composant, du JSX, un state, un formulaire contrôlé et un rendu de liste. Si tu le comprends ligne par ligne, tu as le niveau pour attaquer n'importe quel tutoriel React avancé.

Les erreurs de débutant à éviter

• Oublier la clé key dans les listes : React affiche un warning et les performances (et le comportement) se dégradent. Utilise toujours un identifiant unique, jamais l'index si la liste peut être réordonnée.
• Modifier le state directement : taches.push(tache) ne déclenche aucun re-rendu. Toujours créer une nouvelle valeur avec setTaches([...taches, tache]).
• Mettre trop de choses dans un seul composant : un composant de 400 lignes est un signal d'alarme. Découpe en sous-composants.
• Ignorer les hooks dans les conditions : les hooks doivent être appelés au niveau supérieur du composant, pas dans un if ou une boucle.
• Apprendre Redux trop tôt : pour 90 % des applications, useState et useEffect suffisent largement au début.

Et maintenant, par où continuer ?

Une fois ces bases en place, les prochaines étapes naturelles : les formulaires avancés et la validation, la communication parent-enfant, le routage avec React Router, puis l'outillage moderne (Vite, ESLint, tests). Et surtout : construis des projets. Un mini-projet personnel vaut dix tutoriels suivis passivement.

React s'apprend par la pratique, et chaque petit projet renforce ta compréhension des composants, du state et du flux de données. Commence petit, code tous les jours, et dans quelques semaines tu seras à l'aise pour créer des interfaces complètes.

Tu veux progresser plus vite avec un accompagnement et des exercices corrigés ? Contacte-moi pour discuter de ton projet et de tes objectifs.