Tutoriel React — Chapitre 6

Plan du chapitre

• 1) Avant de commencer : prérequis et état d’esprit
• 2) Créer le projet React avec Vite
• 3) Installer les dépendances (npm install)
• 4) Lancer le serveur de développement (npm run dev)
• 5) Comprendre la structure des fichiers (sans se noyer)
• 6) Modifier App.jsx : votre premier changement visible
• 7) Premier contact avec JSX (très simple)
• 8) Problèmes fréquents et solutions
• 9) Résumé (à retenir)
• 10) Exercice pratique (débutant)

1) Avant de commencer : prérequis et état d’esprit

Vous avez déjà installé Node.js et compris les bases (chapitres 3 à 5). Ici, on passe à la pratique. Deux points importants :

• Vous allez écrire des commandes dans un terminal : ce n’est pas dangereux si vous suivez les étapes.
• Si quelque chose ne marche pas, c’est normal : on a une section “erreurs fréquentes”.

2) Créer le projet React avec Vite

Vite est un outil qui génère une structure de projet moderne et rapide. Il va vous poser quelques questions, puis créer les fichiers nécessaires.

Étape A — Se placer dans le bon dossier

Exemple : vous avez un dossier cours-react dans “Documents”. Placez-vous dedans :

cd chemin/vers/cours-react

Astuce VS Code : ouvrez le dossier cours-react dans VS Code, puis ouvrez le terminal intégré. Vous serez généralement déjà au bon endroit.

Étape B — Lancer la création du projet

npm create vite@latest

Vite vous pose des questions. Pour un débutant, choisissez :

• Project name : react-demo
• Framework : React
• Variant : JavaScript

3) Installer les dépendances (npm install)

Après la création, un nouveau dossier apparaît : react-demo (ou le nom que vous avez choisi). On doit maintenant installer les dépendances du projet.

Étape A — Entrer dans le dossier du projet

cd react-demo

Étape B — Installer

npm install

Cette commande peut prendre un peu de temps. Elle télécharge des packages et crée le dossier node_modules.

4) Lancer le serveur de développement (npm run dev)

Maintenant, on lance l’application en local. Cela démarre un serveur et vous donne une URL.

npm run dev

Vous verrez une URL du type :

http://localhost:5173

Ouvrez cette URL dans votre navigateur : vous devez voir une page de démarrage React/Vite.

5) Comprendre la structure des fichiers (sans se noyer)

Ouvrez le dossier du projet dans VS Code. Vous verrez plusieurs fichiers. On ne va pas tout apprendre d’un coup : on repère uniquement les éléments essentiels.

react-demo/
├─ index.html
├─ package.json
├─ vite.config.js (parfois)
├─ src/
│  ├─ main.jsx
│  ├─ App.jsx
│  └─ ... (assets, styles, etc.)
└─ node_modules/ (généré)

À retenir, très simplement

• package.json : les dépendances + les scripts (dev/build…)
• index.html : la page “coquille” qui contient #root
• src/main.jsx : le point de départ React (il rend <App />)
• src/App.jsx : le composant principal (votre UI commence souvent ici)

6) Modifier App.jsx : votre premier changement visible

Ouvrez src/App.jsx. Vous verrez du JSX et du code de démarrage. On va faire une modification simple : changer un titre.

Exemple (à adapter selon votre fichier)

Repérez un titre et remplacez-le. Par exemple :

export default function App() {
  return (
    <div>
      <h1>Bonjour React !</h1>
      <p>Mon premier projet React fonctionne.</p>
    </div>
  );
}

Enregistrez le fichier. Retournez sur le navigateur : la page doit se mettre à jour automatiquement.

7) Premier contact avec JSX (très simple)

Le JSX ressemble à du HTML, mais ce n’est pas exactement du HTML. C’est une syntaxe qui permet d’écrire l’interface dans JavaScript.

Règles simples (pour commencer)

• Un composant retourne un “bloc” JSX (souvent une racine unique).
• On peut insérer du JavaScript avec { ... }.
• On utilise souvent className au lieu de class.

Exemple : afficher une variable

export default function App() {
  const name = "Alice";

  return (
    <div>
      <h1>Bonjour {name} !</h1>
    </div>
  );
}

8) Problèmes fréquents et solutions

9) Résumé (à retenir)

• On crée un projet React avec npm create vite@latest.
• On installe les dépendances avec npm install.
• On lance le serveur avec npm run dev puis on ouvre l’URL localhost.
• Les fichiers clés : index.html, src/main.jsx, src/App.jsx.
• Modifier App.jsx permet de voir un résultat immédiatement.
• Le JSX permet de décrire l’UI avec des balises dans JavaScript.

10) Exercice pratique (débutant)

Faites l’exercice en conditions réelles : c’est comme cela que vous solidifiez vos bases.

Exercice A — Créer le projet

1. Créez un projet Vite + React (JavaScript) nommé react-demo.
2. Entrez dans le dossier : cd react-demo.
3. Installez : npm install.
4. Lancez : npm run dev.

Exercice B — Modifier l’UI

1. Ouvrez src/App.jsx.
2. Changez le titre par “Mon premier React” (ou votre texte).
3. Ajoutez un paragraphe qui affiche votre prénom avec {...}.

Exercice C — Questions (répondez en 1 phrase)

• À quoi sert npm install ?
• Quel fichier rend <App /> dans #root ?
• Dans quel fichier modifie-t-on le plus souvent l’UI au début ?