React avec Vite : Guide de Setup Rapide

React avec Vite - Setup et Premiers Pas

Introduction

Vite, c'est un outil de build moderne qui va nous permettre de développer ultra rapidement.
C'est un des outils permettant de run du react.
et un des plus utilisés aujourd'hui.

Pourquoi Vite avec React ?

Les problèmes d'avant

Avant, on avait Create React App (CRA) qui était l'outil officiel. Mais c'était lent, lourd et pas optimisé pour le développement moderne.

Les avantages de Vite

Hot Module Replacement (HMR) ultra rapide : vos modifications s'affichent instantanément
Temps de démarrage ultra court : plus d'attente de 30 secondes pour lancer le serveur de dev
Build optimisé : utilise Rollup sous le capot pour des builds de production efficaces (développés par des cracks de l'écosystème js)
Support TypeScript natif : pas besoin de config compliquée
Écosystème moderne : plugins, ES modules, tout ce qu'il faut

Setup d'un projet React avec Vite

Prérequis

Vous devez avoir Node.js installé sur votre machine.

Création du projet

npm create vite@latest mon-app-react -- --template react

Installation et lancement

cd mon-app-react
npm install
npm run dev

Et voilà ! Votre app React tourne sur http://localhost:5173

Structure du projet

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

Les fichiers importants

`main.jsx` - Le point d'entrée

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>,
)

C'est ici que tout démarre. On monte notre composant App dans l'élément HTML avec l'id root.

`App.jsx` - Le composant principal

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

`vite.config.js` - Configuration de Vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})