Développement web avancé

ReactJS

Année 2025-2026

Les outils du développeur React

Sommaire

• Extension React
• NPM
• Babel
• Rollup
• Vite

Extension React Devtools

• Firefox
• Chrome
• Edge

Nouveaux onglets

• Components
• Profiler

Components

• Installé avec Node.js
• +1M de paquets open-source
• Outil de gestion des dépendances

Le fichier package.json

• Liste les dépendances
• Liste les détails de votre package

Le dossier node_modules

• Contient les paquets installés
• Attention à la taille

Les commandes

                            
								npm init
								
								npm install
								
								npm remove
								
								npm run
                            
                        

Ressources

• Le registry officiel
• La liste de toutes les commandes
• La syntaxe du fichier package.json

Alternatives

• Yarn
• pnpm
• bun

Babel

• Open source
• Transpilation vous dites ?
• Cjs, ESM, ES6, ES7, React...

Configuration

• .babelrc
• package.json
• Plugins
• Presets

Ressources

• Quelques plugins
• Quelques presets
• La doc officielle

Alternatives

• Typescript
• SWC
• Sucrase

Rollup

Qu'est-ce que c'est ?

• Un module bundler
• Une machine à manipuler du code

Module bundler

• Retrace l'arbre des imports
• Fait les liens avec les node_modules
• Assemble les fichiers JS

Transformation

• Babel
• Pré-processeur CSS
• Assets en tous genres
• Minification, templating...

Ressources

• Le site officiel

Alternatives

• Webpack
• esbuild
• Parcel

Vite

• Configuration difficile de Babel, Rollup et cie
• Un outil complet de construction
• Un générateur de projet pré-configuré
• Communautaire, maintenu par void(0)

• Génère un projet vide
• Configuration complète pour React
• Serveur de développement
• Nombreux autres utilitaires

Ressources

• Le site officiel
• Le README des projets !

Alternatives

• Next.js
• Remix
• Parcel

A vous !

On commence le TP2

                            
                                npm create vite@latest react-tp2 -- --template react