Framework · Depuis 2013

React

React est une bibliothèque JavaScript pour construire des interfaces à partir de composants : on décrit l'UI voulue et React ne met à jour que ce qui change.

Commencer le guide Discussions

React est une bibliothèque d'interfaces utilisateur créée chez Meta (alors Facebook) et publiée en open source en 2013. L'écran est découpé en petits composants fonctions, et chacun décrit en JSX l'apparence qu'il doit avoir selon les props qu'il reçoit et l'état qu'il conserve. Quand les données changent, React compare le nouveau résultat au précédent et n'applique au DOM que les différences réelles.

React excelle sur les écrans très interactifs, remplis de boutons, de formulaires et de listes. On l'utilise pour des applications monopages, des tableaux de bord, des outils d'administration et des design systems, et le même modèle mental s'applique aux sites rendus côté serveur avec des frameworks comme Next.js ou aux applications mobiles avec React Native. Son vaste écosystème de routeurs, de bibliothèques de récupération de données et d'outils de test permet de choisir et d'assembler les briques nécessaires.

Pour débuter, suivez le Quick Start et le tutoriel du morpion sur react.dev. La documentation officielle recommande un framework comme Next.js pour les nouveaux produits, mais un projet Vite simple est plus facile à comprendre pendant l'apprentissage. Maîtriser d'abord le JavaScript moderne, comme les méthodes de tableaux, la déstructuration et les modules, rend JSX et les hooks bien plus accessibles.

Points forts

Conception par composants

L'interface est découpée en composants fonctions indépendants, les données passent par les props et de petites pièces forment des écrans complets.

UI déclarative avec JSX

Au lieu de modifier le DOM vous-même, vous décrivez en JSX le résultat pour l'état courant, et React ne met à jour que ce qui a changé.

État et effets avec les hooks

Des hooks comme useState, useEffect, useRef et useContext gèrent l'état, les effets de bord, les références au DOM et les données partagées dans de simples fonctions.

Un vaste écosystème

Avec Next.js, React Router, TanStack Query, React Native et d'autres outils éprouvés, la même approche s'applique du web au mobile.

Domaines d'utilisation

Applications monopages (SPA)
Tableaux de bord et outils d'administration
Design systems et composants d'interface réutilisables
Applications web et mobiles avec Next.js ou React Native

Installation

1
Préparer Node.js
Les outils React s'exécutent sur Node.js. Installez la version LTS depuis nodejs.org, puis vérifiez que node et npm affichent leur version.
```
node --version && npm --version
```
2
Créer un projet avec Vite
Le modèle react-ts de Vite crée un projet React en TypeScript. Pour du JavaScript simple, utilisez plutôt le modèle react.
```
npm create vite@latest my-app -- --template react-ts
```
3
Lancer le serveur de développement
Placez-vous dans le dossier du projet, installez les dépendances et lancez le serveur de développement. Ouvrez dans le navigateur l'adresse affichée dans le terminal (http://localhost:5173 par défaut).
```
cd my-app && npm install && npm run dev
```

Votre premier programme

Votre premier composant

La fonction App de src/App.tsx est un composant qui renvoie le JSX à afficher. Elle crée un état count avec le hook useState, et un clic sur le bouton le modifie via setCount. Quand l'état change, React rappelle App et ne met à jour que le nombre à l'écran. Tant que le serveur de développement tourne, le navigateur se rafraîchit instantanément à chaque enregistrement.

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

Outils du quotidien

Vite: Outil de build frontend avec un serveur de développement rapide et des builds de production optimisés. Il fournit des modèles officiels pour React.
React Developer Tools: Extension de navigateur pour inspecter l'arbre des composants, les props et l'état de chacun, et mesurer les performances de rendu.
ESLint: Un linter. Avec eslint-plugin-react-hooks, il repère les violations des règles des hooks et les dépendances manquantes dans les effets.
Vitest: Un lanceur de tests qui réutilise la configuration Vite. Avec React Testing Library, il teste les composants comme un utilisateur s'en servirait.

Guide pas à pas

Six chapitres pour aller de l'installation aux notions essentielles de React.

Documentation officielle et ressources

Langages

Discussions

Lancer une discussion

Posez vos questions, partagez votre expérience et échangez vos avis sur React.

Aucune discussion pour l'instant. Lancez la première.