Tutoriel React — Chapitre 3

Préparer son environnement de travail

Sommaire Alt+S Plan Alt+1 Exercice Alt+3

Chapitre 3 — Préparer son environnement de travail

Avant d’écrire du React “sérieusement”, on met en place un environnement propre : Node.js , npm , un éditeur (VS Code) et un outil pour démarrer un projet. L’objectif est double : installer correctement et surtout comprendre ce que l’on installe .

Objectif : comprendre (pas apprendre par cœur) Niveau : débutant absolu Pratique : mini-exercice à la fin

Plan du chapitre

1) Pourquoi React a besoin d’outils

Au début, on peut se demander : “Pourquoi je ne mets pas juste React dans un fichier HTML ?” En réalité, sur un petit exemple, c’est possible. Mais dès que vous voulez une app “propre” et maintenable, vous avez besoin d’un minimum d’outillage.

Ce que vous écrivez VS ce que le navigateur comprend

Ce que vous écrivez

Du JavaScript moderne + souvent du JSX (un “mélange” qui ressemble à du HTML). C’est très pratique pour écrire des composants.

Ce que le navigateur exécute

Le navigateur a besoin de JavaScript standard (et de fichiers bien organisés). Il faut donc transformer/assembler le code.

Idée centrale : les outils servent à transformer (JSX → JS), organiser (imports), et faciliter le développement (serveur local, rechargement rapide).

Les 3 besoins “pro” les plus courants

  • Compiler/transformer : convertir JSX et fonctionnalités modernes.
  • Bundler : regrouper les fichiers et dépendances.
  • Dev server : lancer l’app localement avec mise à jour rapide.

2) Installer Node.js (LTS) + vérifier l’installation

Node.js permet d’exécuter du JavaScript sur votre machine (en dehors du navigateur). Dans le contexte React, Node sert surtout à lancer des outils : installer des dépendances, démarrer un serveur, construire une version production.

Quelle version choisir ?

Prenez la version LTS (Long Term Support) : c’est la version stable recommandée pour apprendre et travailler.

Vérifier que Node et npm sont bien installés

Ouvrez un terminal (ou le terminal intégré VS Code) et tapez : 

node -v
npm -v

Si vous voyez des numéros de versions, c’est bon. Si vous voyez “commande inconnue”, il y a un problème d’installation ou de PATH (on le traite dans la section “Erreurs fréquentes”).

Node.js et npm, c’est la même chose ?

Non. Node.js est l’environnement d’exécution. npm est l’outil qui installe et gère les bibliothèques (les “packages”). Généralement, npm est installé avec Node.

3) Comprendre npm et package.json

Quand vous créez un projet React, vous ne “téléchargez pas un fichier React.js” à la main. Vous installez des dépendances via npm. Ces dépendances sont listées dans un fichier central : package.json.

Analogie simple

  • Votre projet = une cuisine
  • Les packages = des ingrédients
  • package.json = la liste des ingrédients + les versions

À quoi sert package.json ?

  • Déclarer les dépendances (ex : React)
  • Définir des scripts (ex : lancer le serveur)
  • Stabiliser les versions (important pour éviter les surprises)

Commandes que vous verrez tout le temps

npm install        # installe les dépendances du projet
npm run dev        # démarre le serveur de développement (souvent)
npm run build      # génère la version "production"
npm run preview    # prévisualise la version build (selon l'outil)

À retenir : npm installe, et les scripts npm run ... lancent des commandes déjà prévues par le projet.

4) VS Code : la configuration minimale utile

VS Code est un excellent choix pour React. L’idée n’est pas d’installer 30 extensions, mais d’avoir juste ce qu’il faut pour un code clair et des erreurs visibles rapidement.

Extensions conseillées (minimum)

ESLint

Vous signale des problèmes courants (variables inutilisées, erreurs de syntaxe, etc.).

Prettier

Formate automatiquement votre code pour qu’il soit propre et cohérent.

Réglage pratique : formatage automatique

Dans VS Code : activez “Format On Save” (formatage à l’enregistrement). Résultat : un code propre sans effort.

5) Le terminal : commandes essentielles (sans panique)

Le terminal fait peur au début, mais pour React, vous avez besoin de très peu de commandes. On vise l’efficacité : créer un projet, aller dans un dossier, installer, lancer.

Se déplacer dans les dossiers

cd mon-dossier
cd ..

cd signifie “change directory”. .. signifie “remonter d’un niveau”.

Ouvrir un terminal dans VS Code

Dans VS Code : Terminal → New Terminal. La majorité du temps, vous êtes déjà dans le dossier du projet ouvert.

Règle simple : vous tapez les commandes dans le terminal, vous écrivez le code dans l’éditeur. Les deux travaillent ensemble.

6) Démarrer un projet React : quelles options ?

Pour apprendre React, vous allez utiliser un “starter” (un outil qui génère la structure du projet). L’important est de comprendre ce qu’il crée et pourquoi.

Options courantes

  • Vite : rapide, moderne, recommandé pour démarrer aujourd’hui.
  • Create React App : ancien standard, moins recommandé pour de nouveaux projets.
  • Next.js : framework React (plus avancé), plutôt après les bases.

Dans ce tutoriel, nous utiliserons Vite au moment opportun (chapitre 6), après avoir consolidé JavaScript (chapitres 4 et 5). Cela évite d’apprendre trop de choses d’un coup.

Arborescence typique (repérage)

mon-projet/
├─ index.html
├─ package.json
├─ src/
│  ├─ main.jsx
│  └─ App.jsx
└─ node_modules/   (généré après npm install)

7) Checklist “tout fonctionne”

  • node -v affiche une version
  • npm -v affiche une version
  • VS Code s’ouvre correctement et vous pouvez créer un fichier
  • Vous savez ouvrir un terminal et lancer une commande

8) Erreurs fréquentes et solutions

“node” n’est pas reconnu comme une commande

Réinstallez Node (LTS), puis redémarrez le terminal (voire le PC). Souvent, le PATH n’a pas été pris en compte.

“npm install” échoue

Vérifiez la connexion internet. Réessayez. En cas de blocage, la cause est souvent réseau/proxy.

Problèmes de droits (permission)

Travaillez dans un dossier utilisateur (Documents / Bureau), évitez les dossiers système.

9) Résumé (à retenir)

  • React moderne s’appuie sur des outils : transformation, bundling, serveur local.
  • Node.js sert à faire tourner ces outils sur votre machine.
  • npm installe les dépendances et lance les scripts.
  • VS Code + ESLint + Prettier : une base saine pour apprendre.
Aller au chapitre 4 Faire l’exercice Retour au sommaire

10) Exercice pratique (débutant)

Faites cet exercice pour valider que votre environnement est prêt.

Vérification

node -v
npm -v

Questions (répondez en une phrase)

  • À quoi sert Node.js dans un projet React ?
  • À quoi sert package.json ?
  • Pourquoi utiliser npm plutôt que copier des fichiers ?

Prochaine étape : Chapitre 4, bases JavaScript utiles pour React.

Continuer : Chapitre 4 Retour au sommaire