Guide : Introduction à React.js pour débutants

React en 5 minutes : ce que vous devez comprendre avant de coder

React est une bibliothèque JavaScript créée par Meta (Facebook) pour construire des interfaces utilisateur. Elle domine le marché du front-end : Instagram, WhatsApp Web, Netflix, Airbnb et des millions de sites l’utilisent. Ce guide vous fait passer de zéro à un premier projet fonctionnel avec les concepts essentiels.

Prérequis : vous devez être à l’aise avec HTML, CSS, et JavaScript (fonctions, tableaux, objets, déstructuration, arrow functions). Si les termes map(), const { nom } = objet et () => {} ne vous parlent pas, révisez d’abord les bases de JavaScript moderne (ES6+).

Installer et lancer un projet React

# Créer un projet avec Vite (rapide, moderne)
npm create vite@latest mon-app -- --template react
cd mon-app
npm install
npm run dev

# Votre app tourne sur http://localhost:5173

Pourquoi Vite et pas Create React App ? CRA est obsolète depuis 2023. Vite démarre en moins d’une seconde, recharge instantanément, et produit des builds optimisés. C’est le standard actuel.

Concept 1 : les composants

En React, tout est un composant : un bloc d’interface réutilisable qui combine HTML, CSS et logique. Un composant est simplement une fonction JavaScript qui retourne du JSX (du HTML enrichi).

// Un composant simple
function Bonjour({ nom }) {
  return <h1>Bonjour, {nom} !</h1>;
}

// Utilisation
function App() {
  return (
    <div>
      <Bonjour nom="Fatou" />
      <Bonjour nom="Moussa" />
      <Bonjour nom="Aminata" />
    </div>
  );
}

Règles des composants :

• Le nom commence toujours par une majuscule (Bonjour, pas bonjour)
• Un composant retourne un seul élément racine (utilisez <>...</> si besoin)
• Les {} dans le JSX permettent d’insérer du JavaScript
• { nom } dans les paramètres est une prop (donnée passée par le parent)

Concept 2 : le state (état local)

Le state est une donnée qui peut changer et qui déclenche automatiquement un re-render du composant quand elle change. On utilise le hook useState :

import { useState } from 'react';

function Compteur() {
  const [count, setCount] = useState(0);
  //     ^valeur   ^fonction pour la modifier  ^valeur initiale

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

Règle d’or : ne modifiez JAMAIS le state directement (count = 5). Utilisez toujours la fonction setter (setCount(5)). Sinon React ne sait pas que la valeur a changé et ne met pas à jour l’affichage.

Concept 3 : les listes et les conditions

function ListeEtudiants() {
  const [etudiants, setEtudiants] = useState([
    { id: 1, nom: 'Amadou', present: true },
    { id: 2, nom: 'Mariama', present: false },
    { id: 3, nom: 'Ibrahima', present: true }
  ]);

  return (
    <ul>
      {etudiants.map(etudiant => (
        <li key={etudiant.id}>
          {etudiant.nom} — 
          {etudiant.present 
            ? <span style={{color: 'green'}}>Présent</span>
            : <span style={{color: 'red'}}>Absent</span>
          }
        </li>
      ))}
    </ul>
  );
}

Points importants :

• .map() transforme un tableau de données en tableau d’éléments JSX
• key={etudiant.id} est obligatoire — React l’utilise pour identifier chaque élément et optimiser les mises à jour
• L’opérateur ternaire condition ? vrai : faux remplace les if/else dans le JSX

Concept 4 : les formulaires

function FormulaireContact() {
  const [formData, setFormData] = useState({
    nom: '',
    email: '',
    message: ''
  });

  function handleChange(e) {
    setFormData({
      ...formData,                    // Garder les autres champs
      [e.target.name]: e.target.value  // Mettre à jour le champ modifié
    });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log('Données envoyées :', formData);
    // Ici : appel API avec fetch()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="nom" value={formData.nom} onChange={handleChange} placeholder="Votre nom" />
      <input name="email" type="email" value={formData.email} onChange={handleChange} placeholder="Votre email" />
      <textarea name="message" value={formData.message} onChange={handleChange} placeholder="Votre message" />
      <button type="submit">Envoyer</button>
    </form>
  );
}

Concept 5 : useEffect pour les effets de bord

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Se lance après le premier rendu
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then(res => res.json())
      .then(data => {
        setArticles(data);
        setLoading(false);
      });
  }, []); // [] = ne s'exécute qu'une seule fois (au montage)

  if (loading) return <p>Chargement...</p>;

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

useEffect sert à exécuter du code « en dehors » du rendu : appels API, timers, abonnements. Le tableau [] en second argument contrôle quand l’effet se relance.

Structure d’un projet React

mon-app/
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── ArticleCard.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── About.jsx
│   ├── App.jsx        ← Composant racine
│   ├── main.jsx       ← Point d'entrée
│   └── index.css      ← Styles globaux
├── public/
├── package.json
└── vite.config.js

Exercice : créez une app de cartes de visite

1. Créez un composant ContactCard qui affiche nom, titre, email et photo
2. Créez un tableau de 5 contacts avec des données fictives
3. Affichez les cartes avec .map()
4. Ajoutez un champ de recherche qui filtre les cartes en temps réel
5. Ajoutez un bouton « Favoris » avec un state sur chaque carte
6. Stockez les favoris dans localStorage avec useEffect