React : installation

React est une bibliothèque JavaScript pour construire des interfaces à partir de composants. Cette rubrique décrit React 19 avec Vite, l’outil de construction le plus simple pour une application monopage. Les exemples utilisent des noms génériques (monapp).

Choisir un point de départ

Besoin	Outil
Application monopage (tableau de bord, outil interne)	Vite (ce guide)
Site avec rendu serveur, routage et API intégrés	Next.js
Site de contenu avec quelques composants interactifs	Astro

Prérequis

Node.js récent (voir Node.js : installation).

node --version
npm --version

Créer le projet

npm create vite@latest monapp -- --template react-ts       # TypeScript
# ou : --template react                                      # JavaScript
cd monapp
npm install
npm run dev

Le serveur de développement écoute sur http://localhost:5173. Sur un serveur distant :

npm run dev -- --host 127.0.0.1
ssh -N -L 5173:127.0.0.1:5173 utilisateur@serveur.exemple.com

Voir SSH : tunnels.

Structure

monapp/
├── index.html           # point d'entrée HTML
├── package.json
├── vite.config.ts
├── tsconfig.json
├── public/              # fichiers servis tels quels
└── src/
    ├── main.tsx         # démarre React
    ├── App.tsx          # composant racine
    ├── index.css
    └── assets/

src/main.tsx :

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

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

StrictMode double certains appels en développement (rendu, effets) pour révéler les erreurs : c’est voulu, et sans effet en production.

Scripts

Commande	Effet
`npm run dev`	Serveur de développement avec rechargement à chaud
`npm run build`	Construction de production dans `dist/`
`npm run preview`	Sert `dist/` localement
`npm run lint`	Analyse du code avec ESLint

Premier composant

src/App.tsx :

import { useState } from 'react';

export default function App() {
  const [compteur, setCompteur] = useState(0);

  return (
    <main>
      <h1>Bonjour React</h1>
      <button onClick={() => setCompteur(compteur + 1)}>
        Cliqué {compteur} fois
      </button>
    </main>
  );
}

Variables d’environnement

.env :

VITE_API_URL=https://api.exemple.com

const api = import.meta.env.VITE_API_URL;

Seules les variables préfixées VITE_ sont exposées au navigateur (donc publiques) : ne jamais y mettre de secret. Ne pas versionner .env s’il contient des valeurs sensibles.

Ajouter Tailwind

npm install tailwindcss @tailwindcss/vite

Déclarer le plugin dans vite.config.ts et ajouter @import "tailwindcss"; à src/index.css : voir Tailwind : installation.

Alias d’imports (facultatif)

vite.config.ts :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  plugins: [react()],
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
});

tsconfig.app.json : "paths": { "@/*": ["./src/*"] } dans compilerOptions (avec "baseUrl": "." selon la version de TypeScript). Importer ensuite import { Bouton } from '@/components/Bouton'.

Dépannage

Symptôme	Piste
`npm create vite` échoue	Version de Node.js trop ancienne
Page blanche	Console du navigateur : erreur d’exécution ; élément `#root` absent
`Port 5173 is in use`	`sudo ss -tlnp \| grep 5173` ; Vite propose un autre port
`import.meta.env.X` est `undefined`	Variable sans préfixe `VITE_`, ou serveur à redémarrer
`Failed to resolve import`	Chemin ou dépendance manquante (`npm install`)
Rechargement à chaud inactif sur serveur distant	Tunnel SSH et `--host 127.0.0.1` ; le WebSocket de Vite passe par le même port