Tu commences React et tu te poses mille questions ? C'est normal. React a sa propre logique, son propre vocabulaire, et quand on vient de JavaScript vanilla, tout semble différent. Voici les 23 questions que tous les débutants se posent — avec des réponses claires, des exemples de code, et zéro jargon inutile.

Les bases

1. C'est quoi React exactement ?

React est une bibliothèque JavaScript créée par Facebook (Meta) pour construire des interfaces utilisateur. Au lieu d'écrire du HTML statique, tu crées des composants — des morceaux d'interface réutilisables — qui se mettent à jour automatiquement quand les données changent.

// Un composant React, c'est juste une fonction
function Bonjour({ nom }) {
  return 
Salut {nom} !
;
}

C'est tout. Une fonction qui retourne de l'interface.

2. React est un framework ou une librairie ?

React est officiellement une librairie (bibliothèque), pas un framework. La différence :

• Librairie : tu l'appelles quand tu en as besoin (React gère l'UI, tu choisis le reste)
• Framework : il appelle ton code selon ses règles (Angular, Vue dans une certaine mesure)

En pratique, on combine souvent React avec d'autres outils (React Router, Zustand…) pour former un écosystème complet. Next.js et Remix sont des frameworks basés sur React.

3. Est-ce qu'il faut maîtriser JavaScript avant React ?

Oui, c'est indispensable. React EST du JavaScript. Si tu ne connais pas les bases, tu vas confondre les erreurs React et les erreurs JS.

Le minimum vital avant React :

• let, const, var et la portée des variables
• Les fonctions fléchées : const fn = () => {}
• Le destructuring : const { nom, age } = personne
• Le spread : { ...objet, clé: valeur }
• map, filter, reduce sur les tableaux
• async/await et les Promises
• Les closures (pour comprendre les hooks)

Si un de ces points te semble flou, commence par notre guide JavaScript complet avant d'attaquer React.

4. C'est quoi JSX ?

JSX (JavaScript XML) est une extension de syntaxe qui te permet d'écrire du HTML dans ton JavaScript.

// Ça ressemble à du HTML, mais c'est du JavaScript
const element = 
Bonjour !
;

// Babel le transforme en :
const element = React.createElement('h1', { className: 'titre' }, 'Bonjour !');

3 différences clés avec le HTML :

• class → className (class est un mot réservé en JS)
• for → htmlFor (même raison)
• Les balises doivent toujours être fermées : <img />, <br />

5. C'est quoi un composant React ?

Un composant est une fonction JavaScript qui retourne du JSX. C'est la brique de base de toute application React.

// Composant simple
function CarteProduit({ nom, prix }) {
  return (
    <div className="carte">
      <h2>{nom}</h2>
      <p>{prix} €</p>
    </div>
  );
}

// Utilisation
<CarteProduit nom="T-shirt" prix={29.99} />

Les composants commencent toujours par une majuscule — sinon React les confond avec des balises HTML.

Props et State

6. Quelle différence entre props et state ?

C'est LA question fondamentale en React :

function Compteur({ initial }) {     // initial = prop (vient du parent)
  const [count, setCount] = useState(initial); // count = state (local)
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Règle simple : si la donnée vient de l'extérieur → prop. Si elle change à l'intérieur du composant → state.

7. C'est quoi useState et comment ça marche ?

useState est le hook qui te permet de stocker des données qui changent dans un composant. Quand le state change, React re-rend le composant automatiquement.

import { useState } from 'react';

function Formulaire() {
  const [nom, setNom] = useState('');         // string
  const [age, setAge] = useState(0);           // number
  const [actif, setActif] = useState(true);    // boolean
  const [items, setItems] = useState([]);      // array
  const [user, setUser] = useState(null);      // object ou null

  return (
    <input 
      value={nom} 
      onChange={(e) => setNom(e.target.value)} 
    />
  );
}

useState retourne toujours un tableau de 2 éléments : [valeur, setter]. On utilise le destructuring pour les nommer.

Pour aller plus loin : guide pratique useState et useEffect.

8. Pourquoi mon state ne se met pas à jour immédiatement ?

C'est le piège n°1 des débutants. setState est asynchrone — React regroupe (batch) les mises à jour pour optimiser les rendus.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // ❌ Affiche 0, pas 1 !
}

Pourquoi ? count est une constante dans ce rendu. La nouvelle valeur ne sera disponible qu'au prochain rendu. Si tu as besoin de chaîner des mises à jour, utilise la forme fonctionnelle :

setCount(prev => prev + 1); // ✅ Lit la vraie valeur actuelle
setCount(prev => prev + 1); // ✅ 0 → 1 → 2

9. C'est quoi le "lifting state up" ?

Quand deux composants frères ont besoin de partager des données, tu remontes le state dans leur parent commun.

// ❌ Chaque composant a son propre state — ils ne se parlent pas
function InputA() {
  const [valeur, setValeur] = useState('');
  return <input value={valeur} onChange={e => setValeur(e.target.value)} />;
}

// ✅ Le parent détient le state et le passe en props
function Parent() {
  const [valeur, setValeur] = useState('');
  return (
    <>
      <Input valeur={valeur} onChange={setValeur} />
      <Apercu texte={valeur} />
    </>
  );
}

Hooks essentiels

10. C'est quoi useEffect et quand l'utiliser ?

useEffect sert à synchroniser ton composant avec un système extérieur : API, timer, event listener, localStorage.

// S'exécute une fois au montage
useEffect(() => {
  document.title = 'Ma page';
}, []);

// S'exécute quand userId change
useEffect(() => {
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(setUser);
}, [userId]);

// Cleanup : nettoyer en quittant
useEffect(() => {
  const timer = setInterval(() => tick(), 1000);
  return () => clearInterval(timer); // ← cleanup
}, []);

Règle d'or : si tu peux calculer une valeur à partir du state/props, ne mets PAS ça dans un useEffect. Calcule-le directement pendant le rendu. Voir les 15 erreurs React pour tous les pièges de useEffect.

11. Pourquoi mon useEffect s'exécute deux fois ?

En mode développement, React StrictMode monte → démonte → remonte chaque composant. C'est voulu : ça t'aide à détecter les effets sans cleanup.

// Dans main.jsx — c'est StrictMode qui cause le double appel
<React.StrictMode>
  <App />
</React.StrictMode>

Ce n'est pas un bug et ça ne se produit pas en production. Si ton code casse avec le double appel, c'est que ton effet a besoin d'une fonction de cleanup.

12. C'est quoi useRef et quand l'utiliser ?

useRef crée une boîte qui persiste entre les rendus sans déclencher de re-rendu quand elle change.

// 1. Accéder à un élément DOM
function AutoFocus() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // Accès direct au DOM
  }, []);
  return <input ref={inputRef} />;
}

// 2. Stocker une valeur sans re-rendu
function Timer() {
  const countRef = useRef(0);
  // countRef.current++ ne provoque PAS de re-rendu
}

useState vs useRef : useState re-rend, useRef ne re-rend pas. Utilise useRef pour les valeurs qui n'affectent pas l'affichage (timers, valeurs précédentes, refs DOM).

13. Quand utiliser useMemo et useCallback ?

useMemo mémorise une valeur calculée. useCallback mémorise une fonction. Les deux évitent des recalculs ou re-rendus inutiles.

// useMemo : ne recalcule que quand `items` change
const total = useMemo(() => {
  return items.reduce((sum, item) => sum + item.prix, 0);
}, [items]);

// useCallback : même fonction entre les rendus
const handleClick = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

Bonne nouvelle (2026) : le React Compiler (stable depuis React 19.2) fait cette mémorisation automatiquement. Tu n'as plus besoin d'écrire useMemo/useCallback manuellement dans la plupart des cas.

14. C'est quoi le Context API et quand l'utiliser ?

Le Context API permet de partager des données dans toute l'arborescence sans passer les props à chaque niveau ("prop drilling").

// 1. Créer le contexte
const ThemeContext = createContext('light');

// 2. Fournir la valeur (dans un parent haut placé)
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Page />
    </ThemeContext.Provider>
  );
}

// 3. Consommer (n'importe où dans l'arbre)
function Bouton() {
  const { theme, setTheme } = useContext(ThemeContext);
  return <button className={theme}>Toggle</button>;
}

Quand l'utiliser : thème, langue, utilisateur connecté. Ne pas l'utiliser pour tout le state de l'app — ça provoque des re-rendus massifs. Pour du state complexe, préfère Zustand ou Redux Toolkit.

Le rendu React

15. C'est quoi le Virtual DOM ?

Le Virtual DOM est une copie légère du vrai DOM que React garde en mémoire. Quand le state change :

1. React crée un nouveau Virtual DOM
2. Il le compare avec l'ancien (diffing)
3. Il calcule le minimum de changements nécessaires
4. Il applique uniquement ces changements au vrai DOM

Résultat : au lieu de reconstruire toute la page, React ne touche que les éléments qui ont vraiment changé. C'est pour ça que React est rapide.

16. Pourquoi j'ai besoin d'une key dans mes listes ?

La key permet à React d'identifier chaque élément de ta liste. Sans key stable, React ne sait pas quel élément a été ajouté, supprimé ou déplacé.

// ❌ Pas de key ou key={index} → bugs d'affichage
{items.map((item, index) => (
  <li key={index}>{item.nom}</li>  // Problème si on trie/supprime
))}

// ✅ Key unique et stable liée à la donnée
{items.map(item => (
  <li key={item.id}>{item.nom}</li>
))}

Règle : utilise toujours un identifiant unique de la donnée (id, slug). N'utilise l'index que si la liste est statique et ne change jamais.

17. Composant contrôlé vs non contrôlé ?

// Contrôlé — React pilote l'input
const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />

// Non contrôlé — le DOM pilote
const emailRef = useRef();
<input ref={emailRef} defaultValue="" />
// Lire avec : emailRef.current.value

En 2026, la recommandation officielle reste les composants contrôlés pour la plupart des cas.

18. Comment passer des données entre composants ?

Il y a 4 façons, selon la direction :

• Parent → Enfant : props (le plus courant)
• Enfant → Parent : callback function passée en prop
• Frères : lifting state up (remonter dans le parent commun)
• N'importe où : Context API ou state manager (Zustand)

// Enfant → Parent via callback
function Parent() {
  const [message, setMessage] = useState('');
  return <Enfant onEnvoi={(msg) => setMessage(msg)} />;
}

function Enfant({ onEnvoi }) {
  return <button onClick={() => onEnvoi('Hello!')}>Envoyer</button>;
}

En pratique

19. Comment faire un appel API en React ?

Utilise useEffect + fetch avec un state pour stocker le résultat :

function ListeUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch('/api/users', { signal: controller.signal })
      .then(r => {
        if (!r.ok) throw new Error('Erreur réseau');
        return r.json();
      })
      .then(data => setUsers(data))
      .catch(err => {
        if (err.name !== 'AbortError') setError(err.message);
      })
      .finally(() => setLoading(false));

    return () => controller.abort(); // Cleanup
  }, []);

  if (loading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error}</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Points importants : toujours gérer le loading, l'erreur, et le cleanup avec AbortController. Si tu fais beaucoup d'appels API, regarde des librairies comme TanStack Query (React Query) qui gèrent le cache et les retries.

20. C'est quoi React Router ?

React Router permet de créer une navigation multi-pages dans une Single Page Application. Au lieu de recharger la page, il change le composant affiché selon l'URL.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Accueil</Link>
        <Link to="/profil">Profil</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Accueil />} />
        <Route path="/profil" element={<Profil />} />
        <Route path="*" element={<p>404</p>} />
      </Routes>
    </BrowserRouter>
  );
}

21. Comment structurer un projet React ?

Pour un débutant, cette structure suffit :

src/
├── components/     # Composants réutilisables
│   ├── Button.jsx
│   └── Card.jsx
├── pages/          # Pages (une par route)
│   ├── Home.jsx
│   └── Profile.jsx
├── hooks/          # Hooks custom
│   └── useAuth.js
├── utils/          # Fonctions utilitaires
│   └── formatDate.js
├── App.jsx         # Composant racine + routes
└── main.jsx        # Point d'entrée

Ne sur-architecte pas dès le départ. Commence simple, refactorise quand ça devient compliqué. Un fichier par composant, des noms clairs, c'est suffisant.

22. C'est quoi le React Compiler ?

Le React Compiler (stable depuis React 19.2, début 2026) est un compilateur qui optimise automatiquement tes composants. Il fait ce que tu faisais manuellement avec useMemo, useCallback et React.memo.

Avant (manuel) :

const total = useMemo(() => calculerTotal(items), [items]);
const handleClick = useCallback(() => setCount(c => c + 1), []);

Avec le Compiler (automatique) :

// Tu écris du code normal, le Compiler optimise pour toi
const total = calculerTotal(items);
const handleClick = () => setCount(c => c + 1);

Le Compiler ne corrige pas les erreurs de logique — comprendre les hooks reste essentiel. Mais il simplifie beaucoup le code au quotidien.

23. Par où commencer pour apprendre React en 2026 ?

Voici un parcours réaliste :

1. Semaine 1-2 : Solidifier JavaScript (ES6+)
2. Semaine 3 : Composants, JSX, props — débuter avec React
3. Semaine 4 : useState et useEffect à fond
4. Semaine 5 : Appels API, React Router, formulaires
5. Semaine 6 : Premier projet complet (todo app, météo, blog)
6. Semaine 7-8 : Context API, hooks custom, tests

Ressource clé : la documentation officielle React est excellente et interactive depuis sa refonte. C'est le meilleur point de départ.

Et pour pratiquer : GoGoKodo propose des ateliers interactifs où tu codes directement dans le navigateur.

FAQ rapide

Est-ce que React est gratuit ?
Oui, React est 100% open-source sous licence MIT. Tu peux l'utiliser pour des projets personnels et commerciaux sans restriction.

React ou Vue.js pour débuter ?
Les deux sont de bons choix. React a un écosystème plus large et plus d'offres d'emploi en France. Vue a une courbe d'apprentissage légèrement plus douce. En 2026, React reste le choix le plus demandé sur le marché.

Est-ce que les class components sont encore utilisés ?
Quasiment plus. Depuis React 16.8 (2019), les hooks ont remplacé les class components. En 2026, 99% du code React utilise des composants fonctionnels. Tu n'as pas besoin d'apprendre les classes.

Combien de temps pour apprendre React ?
Avec de bonnes bases JavaScript : 4-8 semaines pour être autonome sur un projet simple. 3-6 mois pour être confortable en entreprise. La clé c'est de pratiquer avec de vrais projets, pas juste regarder des tutos.

Faut-il apprendre TypeScript avec React ?
Pas obligatoire pour débuter, mais fortement recommandé. TypeScript attrape les bugs avant l'exécution et améliore l'autocomplétion. Commence en JavaScript pur, puis ajoute TypeScript quand tu es à l'aise avec les hooks.

Next.js ou React seul ?
Commence avec React seul (via Vite). Next.js ajoute le SSR, le routing, et beaucoup de magie — c'est trop à absorber pour un débutant. Comprends d'abord les fondamentaux React, puis explore Next.js.

Ces 23 questions couvrent l'essentiel de ce que tout débutant React doit savoir. Pour aller plus loin, explore nos guides détaillés :

• Débuter avec React en 2026
• useState et useEffect : le guide pratique
• 15 erreurs React à éviter
• JavaScript : le guide complet

Envie de pratiquer ? GoGoKodo propose des ateliers interactifs pour apprendre React, JavaScript et Python en codant directement dans le navigateur — 100% gratuit.