Développement web avancé

ReactJS

Année 2023-2024

Les outils du développeur React

Sommaire

• Extension React
• NPM
• Babel
• Webpack
• Create React App

Extension React Devtools

• Firefox
• Chrome
• Edge

Nouveaux onglets

• Components
• Profiler

Components

NPM

• 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

Babel

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

Configuration

• .babelrc
• package.json
• Plugins
• Presets

Ressources

• Quelques plugins
• Quelques presets
• La doc officielle

Alternatives

• Typescript
• Sucrase
• SWC

Webpack

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
• La documentation

Alternatives

• Parcel
• Rollup
• esbuild

Create-react-app

• Configuration difficile de Babel, Webpack et cie
• Un starter template complet et officiel

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

Ressources

• La doc officielle
• Le README des projets générés !

Alternatives

• Vite
• Next.js
• Remix

A vous !

                            
                                npx create-react-app monprojet
    
                                cd monprojet
    
                                npm run start
                            
                        

Ce qui est caché...

                            
                                npm run eject