Installation de React (Vite)

Vite est un outil de build frontend moderne conçu pour offrir une expérience de développement rapide en tirant parti de la prise en charge native des modules ES des navigateurs modernes.

Vite est actuellement l'outil privilégié officiellement recommandé par React. Il est plus rapide, plus léger et offre une meilleure expérience de développement que le traditionnel Create React App.

Vite repose sur les modules ES natifs, prend en charge le remplacement instantané de module à chaud (HMR) et ne prend généralement que quelques centaines de millisecondes pour démarrer.

Pour plus de détails sur Vite, voir :Tutoriel Vite。

Pourquoi choisir Vite + React ?

  • Démarrage ultra-rapide: Le serveur de développement s'ouvre instantanément, et les mises à jour à chaud sont presque en temps réel.
  • Fonctionnalités modernes: Prise en charge prête à l'emploi de JSX, TypeScript, CSS Modules, PostCSS, etc.
  • Léger et flexible: Fichier de configuration simple, facilement personnalisable.
  • Optimisation de production: Build Rollup intégré, taille de sortie réduite et performances élevées.
  • Soutien officiel: La documentation officielle de React a fait de Vite la recommandation par défaut.

Créez votre premier projet Vite + React

Ouvrez un terminal (Windows : PowerShell/Command Prompt ; macOS/Linux : Terminal).

Installez avec npm :

npm create vite@latest my-first-react-app -- --template react

Commande recommandée (avec pnpm, la plus rapide et celle qui économise le plus d'espace disque)：

pnpm create vite@latest my-first-react-app -- --template react

Autres commandes de gestionnaires de paquets :

Installer avec yarn :

yarn create vite my-first-react-app --template react

Explication de la commande :

  • create vite@latest: Utilisez la dernière version de l'outil de scaffolding Vite.
  • my-first-react-app: Le nom de votre projet (lettres minuscules + tirets recommandés).
  • -- --template react: Spécifiez le modèle React.

Invites interactives(Vous serez invité à sélectionner) :

  • Nom du projet : appuyez sur Entrée pour confirmer ou le modifier.
  • Sélectionnez le framework : sélectionnezReact。
  • Sélectionnez la variante :
    • JavaScript(Recommandé pour les débutants, commencez avec du JS pur).
    • TypeScript(Recommandé pour les utilisateurs avancés, meilleure sécurité de type, vous pourrez changer plus tard).

Ici, nous choisissonsJavaScript。

Attendez quelques secondes, et le squelette du projet est créé !

Installer les dépendances et démarrer le projet

Entrez dans le répertoire du projetcd my-first-react-app, installez les dépendances :

npm install

Démarrez le serveur de développement :

npm run dev

Le navigateur ouvrira automatiquement http://localhost:5173 (port par défaut de Vite).

Vous verrez une page d'accueil avec le logo Vite + React et un exemple de compteur. C'est votre première application React en cours d'exécution !

L'expérience du Hot Module Replacement (HMR) : modifiez n'importe quel code (nous vous apprendrons plus tard), enregistrez, et la page se met à jour automatiquement sans rafraîchissement ! C'est la magie de Vite.

Structure du projet expliquée en détail

Ouvrez le dossier du projet (il est recommandé d'utiliser VS Code :code .commande pour l'ouvrir en un clic).

cd my-first-react-app
code .

La structure typique est la suivante :

my-first-react-app/
├── public/              # 静态资源（直接复制到构建输出）
│   └── vite.svg         # Vite Logo
├── src/                 # 源码主目录（重点！）
│   ├── assets/          # 图片等资源
│   │   └── react.svg
│   ├── App.jsx          # 主组件（应用入口）
│   ├── main.jsx         # 入口文件（挂载根组件）
│   ├── index.css        # 全局样式
│   └── vite-env.d.ts    # TypeScript 声明（JS 项目可忽略）
├── .gitignore
├── index.html           # HTML 入口模板
├── package.json         # 依赖和脚本
├── vite.config.js       # Vite 配置文件（目前为空，可自定义）
└── README.md

Explications des fichiers clés :

  • index.html: point d'entrée de la page,<div></div>est le point de montage de React.
  • src/main.jsx: fichier de démarrage React, utilise la nouvelle API de React 18 pour créer le nœud racine.
  • src/App.jsx: Votre composant principal, comprend par défaut un exemple de compteur.

Modifier le code : Votre premier composant React

Opensrc/App.jsx, remplacez tout le contenu par le code suivant (commençons par un simple message d'accueil) :

Exemple

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 className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Logo Vite" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="Logo React" />
        </a>
      </div>
      <h1>Bonjour, React+ Vite！</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
Compteur actuel :{count}
        </button>
      </div>
      <p>
Modifier<code>src/App.jsx</code>et enregistrez pour profiter des mises à jour à chaud !
      </p>
    </div>
  )
}

export default App

Après l'enregistrement, la page se met à jour automatiquement ! Vous avez écrit un composant fonction complet :

  • import { useState } from 'react': Importer un Hook.
  • useState(0): Déclarer une variable d'étatcount, avec une valeur initiale de 0.
  • onClickÉvénements : Cliquer sur le bouton met à jour l'état et déclenche un nouveau rendu.
  • Syntaxe JSX : Cela ressemble à du HTML, mais c'est en fait du JavaScript.

Mini exercice：

  1. Remplacez le titre par votre nom :<h1>你好，[你的名字]！</h1>
  2. Ajoutez un nouveau bouton : implémentez un compteur de soustraction.
    <button onClick={() => setCount(count - 1)}>
  减一
</button>

Comprendre le fichier d'entrée : src/main.jsx

Opensrc/main.jsx：

Exemple

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Application />
  </React.StrictMode>
)

Explication :

  • ReactDOM.createRoot: la nouvelle API de React 18, active les fonctionnalités concurrentes.
  • <App />: Affiche votre composant principal.
  • <React.StrictMode>: Vérifications strictes en mode développement pour aider à identifier les problèmes.

Ajout de nouveaux composants (Pratique de la décomposition en composants)

Danssrc/Créez un nouveau fichier souscomponents/HelloWorld.jsx(créez d'abord manuellement le dossier) :

// src/components/HelloWorld.jsx
function HelloWorld({ name }) {
  return <h2>欢迎，{name || '陌生人'}！</h2>
}

export default HelloWorld

DansApp.jsxImportez-le et utilisez-le dans :

import HelloWorld from './components/HelloWorld.jsx'

// 在 return 中添加：
<HelloWorld name="Example" />

Enregistrez et actualisez, et vous verrez le nouveau composant rendu. C'est l'intérêt de ladécomposition en composants: réutilisable et composable !

Gestion des styles et des ressources

  • CSS: Importez directement./App.css, prend en charge le CSS standard.
  • Images: Utilisez comme variable après import (Vite optimise automatiquement).
  • Avancé: Prend en charge les CSS Modules (nom de fichier.module.css), Tailwind CSS (peut être configuré plus tard).

Créer une version de production

Une fois le développement terminé, générez les fichiers statiques pour le déploiement :

npm run build

La sortie se trouve dans ledist/dossier : HTML/CSS/JS pur, peut être téléversé sur Vercel, Netlify, etc.

Autres extensions