Module 1Les bases de React
Chapitre 3 sur 18
React et le DOM virtuel, l'écosystème (npm, Babel, bundlers), l'architecture d'une application, l'installation et le premier projet.
Objectifs
Avec ce chapitre, tu sauras…
index.html, index.js et App.js.Leçon 1
React (ou ReactJS, React.js) est une bibliothèque JavaScript développée par Facebook, utilisée pour créer des composants d'affichage réutilisables.
Pour créer une application React, on crée des composants (en général des fonctions ou des classes) qu'on assemble pour former l'application finale.
L'autre intérêt de React est la mise à jour rapide de la page :
| jQuery (ou JavaScript « classique ») | React |
|---|---|
| manipule directement les éléments HTML de la page (le DOM) | manipule une copie interne du DOM : le DOM virtuel (les éléments React) |
| la manipulation directe du DOM est lente | les changements ne sont faits sur l'affichage que lorsque c'est nécessaire |
React ne sert pas qu'au Web : avec sa variante React Native, on crée aussi des applications mobiles natives iPhone et Android.
Vidéo · À regarder
FRTuto React débutant - Apprendre les bases de React en 2024
front-end · YouTube
Leçon 2
| Commande | Rôle |
|---|---|
npm install | installe le projet (ses dépendances) sur ta machine |
npm start | démarre le projet |
npm test | lance les tests du projet |
npm run dev | lance un environnement de développement |
Leçon 3
Leçon 4
| Outil | Pourquoi ? |
|---|---|
| Node.js (avec npm) | React n'a pas besoin de Node pour fonctionner dans le navigateur, mais Node est presque indispensable pour générer l'application à partir de nombreux fichiers. Vérifie avec npm --version |
| npx ou yarn (optionnels) | alternatives à npm : npm install -g yarn, npm install -g npx |
| VS Code | éditeur léger, gère nativement la syntaxe JSX |
| Chrome ou Firefox | pour leurs outils de développement |
| React Developer Tools |
Leçon 5
Leçon 6
| Élément | Rôle |
|---|---|
node_modules | toutes les bibliothèques JavaScript installées (ne jamais le modifier) |
public | contient index.html, le point de départ, avec la div d'id root où React vient « s'ancrer » |
.gitignore | les fichiers que git ne doit pas envoyer sur le dépôt distant, notamment node_modules |
package.json | les informations de l'application : scripts et dépendances |
README.md |
Leçon 7
| Ligne | Rôle |
|---|---|
| 1 | importe React. React transforme le JSX en appels React.createElement() : les composants doivent importer React, sinon erreur |
| 2 | importe react-dom, qui fournit les méthodes pour le DOM au niveau racine de l'application |
| 3 | importe la feuille de style src/index.css |
| 4 | importe src/App.js, qui définit la fonction App |
| 6 | affiche l'élément <App /> dans le nœud DOM root |
1React a été développé par…
2React manipule…
3Pour créer des applications mobiles natives, on utilise…
4npm sert à…
5Babel sert à…
6Webpack est…
7La div où React affiche l'application a l'id…
8Le dossier qu'on ne doit pas envoyer sur git est…
9Quelle commande démarre un projet créé avec create-react-app ?
L'essentiel du chapitre
install, start, test), ES6, Babel (transpile en ES5), bundler (Webpack, Browserify : un seul fichier JS).npx create-react-app nom puis npm start → localhost:3000 (aujourd'hui : npm create vite@latest → localhost:5173).public/index.html (div root) ← src/index.js (createRoot(...).render(<App />)) ← src/App.js (fonction qui renvoie du JSX, export default App).| extension du navigateur pour déboguer les composants |
| la documentation de l'application, en Markdown |
src | ton code : index.js charge le composant App et le greffe dans la div#root de public/index.html |
| 5 et 7 | Web Vitals : des mesures de l'expérience utilisateur, qu'on peut envoyer à un service comme Google Analytics |
Vidéo · À regarder
FRApprendre React.js en 1 heure
Melvynx · YouTube
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Ce que tu vas voir (3 min) : les chapitres « Qu'est-ce que React ? », « Le principe d'une SPA » et « Les composants React » : la présentation de React et de son découpage en composants réutilisables. C'est la section « Présentation de React ».
npm
npm (installé avec Node.js) fait deux choses :
Quand tu récupères un projet sur Internet, tu utilises en général :
ECMAScript 6
ECMAScript est le standard du langage JavaScript : il définit la syntaxe, les types de variables… ES6 (ou ES2015) a apporté les fonctions fléchées, les classes, les modules… (chapitre 1).
Babel
Pour écrire de l'ES6 (et du JSX) et le faire fonctionner partout, il faut le compiler (ou transpiler). Babel transforme ton code en ES5, compris par tous les navigateurs. Il fonctionne avec des presets (ensembles de plugins) ; pour React : babel-preset-es2015 et babel-preset-react.
Les bundlers
Un bundler rassemble tout le code de l'application en un seul fichier JavaScript à importer dans la page HTML. Tu peux ainsi écrire des modules (fichiers séparés) sans ajouter une balise <script> pour chaque fichier. Les deux outils principaux sont Browserify et Webpack. Webpack gère la modularité, mais seul, il ne sait pas transformer l'ES2015 ou le JSX : il travaille avec Babel.
Tu n'as rien à configurer : l'outil qui crée le projet installe et règle Babel et le bundler pour toi. Avec Vite (l'outil recommandé aujourd'hui), le bundler est Vite lui-même (basé sur esbuild et Rollup), plus rapide que Webpack.
React propose plusieurs concepts pour écrire un bon code : composants d'ordre supérieur, contexte, accessoires de rendu (render props), références… Les Hooks (chapitre 11) servent à gérer les grands projets.
@startuml
skinparam shadowing false
skinparam rectangle {
BackgroundColor #e8f6fb
BorderColor #087ea4
}
rectangle "Application React" as app
rectangle "Composant de base (racine)" as root
rectangle "Composant React UI" as ui1
rectangle "Composant React UI" as ui2
rectangle "Composant React UI" as ui3
rectangle "Composant React UI" as ui4
rectangle "Composants de troisième niveau\nGestion des routes (React Router)\nAnimation (react-transition-group…)\nGestion avancée de l'état (Redux, MobX…)\nAPI REST (fetch…)" as tiers
app --> root
root --> ui1
root --> ui2
ui1 --> ui3
ui2 --> ui4
root ..> tiers
@endumlCrée un dossier, par exemple C12-Front-end, ouvre un terminal dans ce dossier et tape :
npx create-react-app 01-hello-react
cd 01-hello-react
npm startOuvre http://localhost:3000/ : la page de bienvenue de React s'affiche, avec le logo qui tourne.
Create React App est abandonné (déprécié par l'équipe React en 2025). On crée aujourd'hui un projet avec Vite :
npm create vite@latest 01-hello-react -- --template react
cd 01-hello-react
npm install
npm run dev
L'adresse devient http://localhost:5173/. Différences : index.html est à la racine (pas dans public), le point d'entrée est src/main.jsx (au lieu de index.js), et les fichiers qui contiennent du JSX ont l'extension .jsx. Le code React lui-même est le même.
01-HELLO-REACT
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.jspublic/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>Ce fichier contient seulement la structure de base d'une page HTML. Le plus important est la div id="root" : c'est là que toute l'application sera affichée.
src/index.js
Ce fichier récupère nos composants et les affiche dans la div#root :
import React from 'react'; // 1
import ReactDOM from 'react-dom/client'; // 2
import './index.css'; // 3
import App from './App'; // 4
import reportWebVitals from './reportWebVitals'; // 5
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( // 6
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals(); // 7Explique en 4 étapes ce qui se passe entre l'ouverture de http://localhost:3000 et l'affichage du logo React (cite index.html, index.js, App.js et la div root).
(1) Installe Node.js, vérifie la version de npm. (2) Crée le projet 01-hello-react et lance-le. (3) Dans App.js, remplace le texte « Edit src/App.js and save to reload. » par « Bonjour, je suis stagiaire à l'OFPPT » : observe le rechargement automatique. (4) Ouvre l'onglet Components de React Developer Tools et retrouve le composant App.
Installer Node.js sous Windows (annexe 1 du TP) : télécharge le fichier .msi sur le site officiel, lance-le, accepte la licence, garde le dossier et les options par défaut, clique sur Installer, puis Terminer. Vérifie l'installation dans l'invite de commande avec npm --version.
Depuis React 17, le JSX n'a plus besoin de import React from 'react' dans chaque composant (nouvelle transformation JSX). La ligne reste utile dans index.js pour React.StrictMode. reportWebVitals n'existe pas dans un projet Vite.
Ce que tu vas voir (3 min) : le chapitre « Comment marche ReactDOM.render » : le formateur montre comment React prend la div racine de la page et y affiche le composant principal. C'est le fichier src/index.js expliqué ci-dessus.
src/App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;La fonction App renvoie une expression JSX : elle définit ce que le navigateur affichera dans le DOM. En bas du fichier, export default App rend le composant disponible pour les autres modules (c'est ce que index.js importe à la ligne 4).
Ce que tu vas voir (10 min) : le chapitre « Démarrer avec React (installation + Vite) » : la création du projet avec Vite, npm install, le lancement du serveur, puis la visite des fichiers (index.html, main.jsx, App.jsx) et du composant App qui renvoie du JSX. C'est l'encadré « Vite au lieu de create-react-app » et les sections 6 et 7.