Installer React : créer une application React avec Vite

Pour installer React, créez un nouveau projet avec Vite : lancez npm create vite@latest my-app -- --template react, puis cd my-app, npm install et npm run dev. Node.js doit être installé au préalable. Vite configure React, la compilation du JSX et un serveur de développement qui recharge la page à chaque enregistrement.

Rien de tout cela n'est nécessaire pour commencer à apprendre. L'éditeur ci-dessous exécute React dans cette page ; c'est une version simplifiée du fichier App.jsx que Vite génère pour vous.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Cliquez sur le bouton, puis modifiez le texte du titre : l'aperçu se met à jour pendant que vous tapez, comme le serveur de développement de Vite qui injecte vos modifications sans recharger la page (c'est ce que signifie « HMR », hot module replacement).

Prérequis : Node.js

Les outils qui construisent une application React tournent sur Node.js, et npm (son gestionnaire de paquets) est fourni avec. Installez la version LTS actuelle depuis le site de Node.js ou avec un gestionnaire de versions comme nvm, puis vérifiez-la dans un terminal :

node -v
npm -v

Les deux commandes doivent afficher un numéro de version. Si node -v affiche une ancienne version, mettez à jour : Vite 8 demande Node.js 20.19 ou plus récent (22.12 ou plus récent sur la branche 22) et affiche un avertissement sur les versions plus anciennes.

Créer une application React avec Vite

Lancez ces quatre commandes dans le dossier où vous rangez vos projets :

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest télécharge le dernier générateur de projet. my-app est le nom du dossier, et --template react choisit React seul avec JavaScript. Le -- supplémentaire transmet l'option de modèle au générateur à travers npm.
• npm install télécharge React, React DOM, Vite et les autres dépendances listées dans package.json dans node_modules.
• npm run dev démarre le serveur de développement et affiche une adresse locale, en général http://localhost:5173. Ouvrez-la dans un navigateur.

Le générateur pose ensuite deux questions : quel linter configurer (Oxlint ou ESLint), et s'il faut installer et démarrer l'application tout de suite. Si vous répondez oui à la seconde, il lance npm install et npm run dev pour vous, et vous pouvez sauter les deux dernières commandes. Pour TypeScript, utilisez --template react-ts à la place ; voir React avec TypeScript.

Les fichiers créés par Vite

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Trois d'entre eux comptent le plus :

index.html est la page que le navigateur charge. Son body contient un seul élément vide, <div id="root"></div>, et une balise script qui charge src/main.jsx. React dessine toute l'application dans cette div.

src/main.jsx est le point d'entrée. Il relie React à la page :

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot prend l'élément #root et confie à React tout ce qu'il contient. render(<App />) y dessine votre composant principal. StrictMode est une aide au développement qui lance des vérifications supplémentaires ; il n'a aucun effet dans le build de production (voir Strict Mode). Vous aurez rarement besoin de modifier ce fichier.

src/App.jsx est votre premier composant, et le fichier que vous modifiez. La version de Vite importe trois images (une illustration et les logos de Vite et de React) et App.css, et se termine par export default App. Cela revient à écrire export default function App() en haut, qui est la forme utilisée dans les exemples de ces pages.

Faire votre première modification

Ouvrez src/App.jsx, supprimez son contenu et remplacez-le par votre propre composant. Enregistrez, et le navigateur se met à jour. Voici une petite première application à taper ; essayez-la d'abord ici :

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Tapez dans le champ et le titre suit. Ajoutez ensuite un second <Greeting name="Vite" /> sous le premier : les composants sont réutilisables, et chaque copie reçoit son propre name.

Quand App.jsx grossit, déplacez les composants dans leurs propres fichiers, par exemple src/Greeting.jsx, exportez-les et importez-les là où vous les utilisez. La page sur les composants montre comment.

Build de production

Le serveur de développement sert à travailler sur votre code. Quand vous êtes prêt à publier, construisez l'application :

npm run build
npm run preview

npm run build compile le JSX, regroupe et minifie votre code, et écrit des fichiers statiques dans un dossier dist/. npm run preview sert ce dossier en local pour que vous puissiez vérifier le vrai build. Envoyez dist/ sur n'importe quel hébergement statique. Dans le build, React passe aussi en mode production, plus rapide et sans les avertissements de développement.

Create React App est obsolète

Pendant des années, la façon standard de commencer était npx create-react-app my-app. En février 2025, l'équipe React a déclaré Create React App obsolète, et il n'est plus maintenu. Beaucoup d'anciens tutoriels l'utilisent encore, vous y verrez donc react-scripts start et un fichier d'entrée src/index.js ; les composants eux-mêmes fonctionnent de la même façon dans un projet Vite.

Quoi utiliser à la place :

• Vite pour une application côté client, un projet d'apprentissage ou un widget : la configuration ci-dessus.
• Un framework quand vous avez besoin du routage, du rendu serveur ou du chargement de données intégrés. Next.js et le mode framework de React Router sont les choix courants :

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Pour migrer un projet Create React App existant vers Vite, les étapes principales sont : installer vite et @vitejs/plugin-react et retirer react-scripts ; ajouter un vite.config.js qui charge le plugin React ; déplacer index.html de public/ vers la racine du projet, supprimer les marqueurs %PUBLIC_URL% et ajouter une balise <script type="module" src="/src/index.jsx"> pour votre fichier d'entrée ; renommer en .jsx les fichiers qui contiennent du JSX ; renommer les variables d'environnement REACT_APP_ en VITE_ et les lire depuis import.meta.env ; et remplacer les commandes react-scripts de package.json par vite, vite build et vite preview.

Ajouter React à une page existante

React n'a pas besoin de gérer toute la page. Vous pouvez le rendre dans un seul élément d'un site existant, comme un widget de panier sur une boutique rendue côté serveur. Il vous faut quand même un bundler comme Vite pour compiler le JSX. Installez les deux paquets :

npm install react react-dom

Créez ensuite une racine sur l'élément que React doit contrôler :

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Tout ce qui est en dehors de #cart reste tel quel. Vous pouvez créer plusieurs racines sur une même page, une par élément, et chacune fonctionne indépendamment.