Ta première app React avec Vite

Montre-moi : configurer le projet

Vite (prononcé « veet », « rapide » en français) est un outil qui prépare un squelette de projet React prêt à l’emploi. Ouvre le terminal et va là où tu veux que le projet vive (comme ton Bureau) :

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite pourrait te demander quelque chose – confirme avec Entrée. Puis :

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install télécharge tout ce dont le projet a besoin (ça prend un moment – React et ses assistants sont téléchargés dans le dossier node_modules).
• npm run dev -- --port 3901 démarre le serveur de développement. Le terminal affichera l’adresse http://localhost:3901. Ouvre-la dans ton navigateur.

Tu vois un logo qui tourne et le titre « Vite + React » ? Félicitations – ta première app React tourne ! 🎉

Visite du projet

Ouvre le dossier my-react-web dans VS Code (File → Open Folder). Ça ressemble à beaucoup de fichiers, mais seulement trois comptent pour toi maintenant :

Ignore le reste pour l’instant (n’ouvre ni ne supprime jamais node_modules, package.json est une liste des packages du projet).

Ton premier changement de code

Ouvre src/App.jsx. Supprime tout et écris :

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Enregistre – et la page dans le navigateur a changé toute seule. Voici ce que tu regardes :

• Le composant App est une fonction qui retourne du HTML (cette notation s’appelle JSX).
• {name} – les accolades insèrent du JavaScript dans le HTML. N’importe quoi : une variable, un calcul {2 + 3}, même une condition.
• export default App – « j’offre ce composant aux autres fichiers » (main.jsx est celui qui le prend).

JSX a deux particularités auxquelles tu t’habitueras : au lieu de class, tu écris className (class est un mot réservé en JavaScript), et un composant doit retourner un élément enveloppant (c’est pour ça qu’il y a un <div> autour de tout).

À toi 💪

1. Configure le projet en suivant le guide et fais-le tourner.
2. Modifie App.jsx : un titre avec ton nom, un paragraphe sur ce que tu construis, et une variable age que tu affiches dans la phrase I am {age} years old.
3. Supprime exprès une balise fermante et regarde à quoi ressemble l’erreur – Vite l’affiche directement dans le navigateur, avec le numéro de ligne. Puis corrige.
4. Arrête le serveur (Ctrl+C dans le terminal) et redémarre-le (npm run dev -- --port 3901) – pour maîtriser tout le cycle.

Ce que tu retiens de cette leçon

• npm create vite@latest configure un projet, npm install télécharge les packages, npm run dev démarre localhost.
• Tu écris du code dans src/App.jsx : un composant est une fonction qui retourne du JSX, {} insère du JavaScript dans le HTML.
• En JSX : className au lieu de class, toujours un élément enveloppant.

© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu