Un guide du débutant pour utiliser Vite avec React

Introduction

Lorsque vous démarrez un nouveau projet React, le choix des bons outils peut avoir un impact important sur votre flux de travail. Alors que des outils comme Webpack sont largement utilisés depuis des années, des options plus récentes comme Vite offrent des alternatives plus rapides et plus efficaces.

Vite, développé par Evan You (le créateur de Vue.js), est conçu pour fournir un environnement de développement ultra-rapide. Pour ce faire, il sert des fichiers via des modules ES natifs et en utilisant un serveur de développement optimisé. Cela se traduit par des temps de démarrage du serveur plus rapides et un développement plus réactif.

React, l'une des bibliothèques les plus populaires pour créer des interfaces utilisateur, fonctionne de manière transparente avec Vite. Son architecture basée sur des composants est idéale pour développer des applications dynamiques monopage (SPA). Voici pourquoi Vite est un excellent choix pour les projets React :

• Démarrage instantané du serveur : Contrairement aux bundlers traditionnels, le serveur de développement de Vite démarre presque instantanément en servant les fichiers en tant que modules ES natifs, évitant ainsi le regroupement pendant le développement.

• Remplacement rapide du module à chaud (HMR) : Le HMR de Vite est incroyablement rapide, vous permettant de voir les changements dans vos composants React presque instantanément, ce qui accélère le développement.

• Builds de production optimisés : Pour la production, Vite utilise Rollup pour optimiser vos bundles. Il inclut des fonctionnalités telles que le fractionnement automatique du code, qui améliore le temps de chargement de votre application.

• Prise en charge du développement moderne : Vite fonctionne bien avec les outils JavaScript modernes tels que TypeScript, JSX et les préprocesseurs CSS tels que Sass, offrant une expérience de développement de pointe prête à l'emploi.

Dans ce blog, nous vous guiderons dans la mise en place d'un projet React avec Vite, explorerons la structure du projet et vous montrerons comment travailler avec des actifs et déployer votre application. À la fin, vous verrez comment Vite peut améliorer votre expérience de développement React.

Qu’est-ce que Vite ?

Vite est un outil de construction moderne conçu pour la rapidité et l'efficacité, en particulier lorsque vous travaillez avec des frameworks JavaScript comme React. Développé par Evan You, le créateur de Vue.js, Vite se distingue par sa capacité à offrir une expérience de développement rapide et rationalisée.

Principales caractéristiques de Vite

1. Démarrage instantané du serveur : Vite sert les fichiers via des modules ES natifs, permettant au serveur de développement de démarrer presque instantanément, même pour les grands projets.

2. Remplacement rapide du module à chaud (HMR) : le HMR de Vite est extrêmement rapide, permettant des mises à jour quasi instantanées de vos composants React au fur et à mesure de votre développement.

3. Builds optimisées : Vite utilise Rollup pour les builds de production, garantissant un regroupement efficace avec des fonctionnalités telles que le fractionnement de code et le tremblement d'arborescence.

4. Prise en charge de JavaScript moderne : Vite est livré avec une prise en charge intégrée des dernières fonctionnalités JavaScript, notamment les préprocesseurs TypeScript, JSX et CSS comme Sass.

Vite contre Webpack

Bien que Webpack soit un choix populaire depuis des années, il nécessite souvent des configurations complexes et peut être plus lent pendant le développement en raison de son processus de regroupement. En revanche, Vite simplifie le processus de configuration et évite le regroupement pendant le développement, ce qui entraîne des temps de démarrage du serveur et un HMR plus rapides. Les versions de production de Vite sont également hautement optimisées, un peu comme celles de Webpack, mais avec une configuration plus simple.

Pourquoi utiliser Vite avec React ?

1. Vitesse : le démarrage rapide du serveur de Vite et le HMR facilitent le développement d'applications React sans attendre de longs processus de regroupement.

2. Simplicité : la configuration facile à utiliser de Vite vous permet de vous concentrer sur la création de vos composants React plutôt que sur la configuration des outils de construction.

3. Efficacité : Vite garantit que votre application React est non seulement rapide à développer, mais également optimisée pour la production avec un minimum d'effort.

Vite offre une alternative plus moderne et efficace aux bundles traditionnels comme Webpack, ce qui en fait un choix idéal pour les projets React qui privilégient la vitesse et la simplicité.

Configuration de l'environnement de développement

Avant de plonger dans Vite avec React, vous devez vous assurer que Node.js et npm sont installés sur votre système. Si vous ne les avez pas installés, suivez les étapes ci-dessous pour commencer.

Installation de Node.js et npm

Pour installer Node.js et npm, visitez le site officiel de Node.js et téléchargez la dernière version stable. Une fois installé, vous pouvez vérifier l'installation en exécutant les commandes suivantes dans votre terminal :

node -v
npm -v

Ces commandes doivent afficher les versions installées de Node.js et npm, confirmant qu'elles sont correctement configurées.

Initialiser un nouveau projet Vite

Avec Node.js et npm prêts, vous pouvez désormais créer un nouveau projet React à l'aide de Vite. Vite fournit une commande simple pour configurer rapidement un nouveau projet. Ouvrez votre terminal et exécutez les commandes suivantes :

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

• npm create vite@latest my-react-app --template réagir : Cette commande initialise un nouveau projet Vite avec un modèle React. Remplacez my-react-app par le nom de votre projet souhaité.
• cd my-react-app : accédez au répertoire de votre projet nouvellement créé.
• npm install : installez les dépendances nécessaires pour votre projet React.

Exécution du serveur de développement

Une fois votre projet configuré et les dépendances installées, vous pouvez démarrer le serveur de développement. Le serveur de Vite est rapide et vous verrez à quelle vitesse il démarre :

npm run  dev

L'exécution de cette commande démarrera le serveur de développement Vite et ouvrira votre nouvelle application React dans votre navigateur Web par défaut. L'application se rechargera automatiquement au fur et à mesure que vous apporterez des modifications au code, grâce à la fonction rapide de remplacement de module à chaud (HMR) de Vite.

L'exécution de cette commande démarrera le serveur de développement Vite et ouvrira votre nouvelle application React dans votre navigateur Web par défaut. L'application se rechargera automatiquement au fur et à mesure que vous apporterez des modifications au code, grâce à la fonction rapide de remplacement de module à chaud (HMR) de Vite.

Comprendre la structure du projet

Vite met en place une structure de projet simple et organisée. Voici un aperçu rapide des fichiers et dossiers clés :

• index.html : Le point d’entrée de votre application. Vite injecte vos scripts dans ce fichier.
• src/main.jsx : le fichier JavaScript principal où démarre votre application React. Il restitue généralement le composant racine (App.jsx) dans le DOM.
• src/App.jsx : Le composant React principal de votre application. Vous pouvez commencer à créer votre interface utilisateur ici.
• vite.config.js : le fichier de configuration de Vite dans lequel vous pouvez personnaliser votre processus de construction, ajouter des plugins, etc.

Cette structure est conçue pour être minimale mais puissante, vous donnant une base solide pour commencer à créer votre application React sans complexité inutile. Vous pouvez facilement étendre et personnaliser la structure à mesure que votre projet se développe.

Comprendre la structure du projet

Lorsque vous initialisez un projet React à l'aide de Vite, cela crée une structure de projet propre et minimale. Cette structure est conçue pour vous aider à démarrer rapidement sans la surcharge de fichiers inutiles ou de configurations complexes. Décomposons les fichiers et dossiers clés créés par Vite pour vous aider à comprendre la configuration.

my-app
├── node_modules
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js

Répartition des fichiers et dossiers clés

1. index.html : Ce fichier est le point d'entrée de votre application et se trouve dans le répertoire racine. Contrairement aux bundlers traditionnels, Vite sert directement ce fichier HTML pendant le développement. C'est là que votre application React est montée et Vite injecte les scripts nécessaires pour charger l'application.

2. src/ : Le dossier src contient tout le code de votre application.

3. main.jsx : Il s'agit du point d'entrée principal de votre application React. Il importe React, restitue le composant racine (App.jsx) et l'attache à l'élément #root dans le fichier index.html.

4. App.jsx : Il s'agit du composant racine de votre application, où vous commencerez à créer votre interface utilisateur. Vous pouvez modifier ce fichier pour ajouter plus de composants à mesure que votre projet se développe.

5. vite.config.js : Ce fichier contient la configuration de Vite. Il vous permet de personnaliser le comportement de Vite, d'ajouter des plugins ou de modifier le processus de construction, mais pour la plupart des petits projets, vous n'aurez peut-être pas besoin de toucher à ce fichier.

Fichiers clés

1. index.html : Le fichier HTML dans lequel votre application React est injectée. Il contient un seul
   élément avec l'id="root" où l'application React sera montée.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

1. src/main.jsx Le principal point d'entrée JavaScript pour votre application React. Il restitue le composant App dans le div #root du index.html.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

1. src/App.jsx : Le composant principal de votre application React. C'est ici que vous commencerez à créer votre interface utilisateur. Par défaut, il inclut un simple composant React, mais vous pouvez le modifier pour l'adapter à vos besoins.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to Vite + React!</h1>
    </div>
  );
}

export default App;

Modification d'App.jsx pour créer un composant React simple

Modifions le composant App.jsx par défaut pour créer un composant React simple qui affiche une liste d'éléments :

import React from 'react';

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>Simple List with Vite and React</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Dans cet exemple :

• We define an array items with a few sample items.
• We use the map() function to iterate over the items array and render each item as a list item (
• ).

This project structure offers flexibility and simplicity, allowing you to grow your application easily as you continue development.

Working with Vite in a React Project

Vite simplifies the process of working with assets, styles, and offers fast feedback during development through Hot Module Replacement (HMR). Let’s walk through how to handle these features in your Vite-React project.

Importing and Using Assets (Images, Styles)

Vite allows you to easily import assets such as images or CSS files directly into your React components, with the benefit of bundling them efficiently during the build.

import React from 'react';
import logo from './assets/logo.png'; // Importing an image

function App() {
  return (
    <div>
      <img src={logo} alt="App Logo" />
      <h1>Welcome to Vite React App!</h1>
    </div>
  );
}

export default App;

In this example, Vite processes the logo.png image file and ensures it’s bundled efficiently when you build the project. During development, the image is served directly without bundling, contributing to faster reload times.

import React from 'react';
import './App.css'; // Importing a CSS file

function App() {
  return (
    <div className="app-container">
      <h1>Welcome to Vite React App!</h1>
    </div>
  );
}

export default App;

How Vite Handles Hot Module Replacement (HMR)

One of Vite’s standout features is its fast Hot Module Replacement (HMR). HMR allows you to see changes in your application instantly without a full page reload. When you modify a file, Vite only updates the specific module that was changed, maintaining the application’s state.

For example, if you update a React component:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to the updated Vite React App!</h1> {/* Change the text */}
    </div>
  );
}

export default App;

Upon saving the file, Vite’s HMR immediately updates the UI without a full page reload. This speeds up the development process significantly, especially when you are working on UI components or tweaking styles.

Troubleshooting Common Issues

While Vite generally offers a smooth development experience, you might still run into a few common issues when using it with React. Here are some of those issues and how to fix them, along with tips for optimizing performance and build times.

1. Error: "Failed to resolve module"

   This is a common issue that occurs when Vite cannot resolve a module you’re trying to import, especially when dealing with third-party libraries or incorrect paths.
   Solution:

• Double-check the import paths in your code. Ensure you are importing the correct file or module.
• For third-party libraries, try reinstalling the dependencies:

  npm install

• If the issue persists, clear Vite’s cache and restart the server
  

  rm -rf node_modules/.vite
  npm run dev
  

1. Error: "React Refresh failed" Vite uses React Fast Refresh to enable Hot Module Replacement (HMR). Sometimes, this can fail, particularly when the React version is mismatched or there’s a configuration issue.

Solution:

• Make sure that you're using a supported version of React (17.x or later).

• Ensure that @vitejs/plugin-react is correctly installed and added to your vite.config.js file:
  

npm install @vitejs/plugin-react --save-dev

In vite.config.js:

import react from '@vitejs/plugin-react';

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

• Restart your Vite development server after applying these fixes.

1. Assets Not Loading After

   If assets like images, fonts, or other static files are not loading properly after building the app, it’s often due to incorrect asset paths.

Solution:

• Make sure that you're using relative paths for your assets. For example, use ./assets/logo.png instead of /assets/logo.png.

• Check yourvite.config.js for the correct base path. If your app is deployed in a subdirectory, you may need to set the base option:
  

  export default {
  base: '/subdirectory/',
  };
  

Following these troubleshooting steps should help you resolve common issues and ensure your Vite + React project runs smoothly.

Conclusion

In this guide, we walked through setting up a React project with Vite, explored its project structure, imported assets, and styles, and highlighted how Vite's fast Hot Module Replacement (HMR) enhances development. You’ve also learned some common troubleshooting tips and optimizations for build performance.

Vite’s speed and simplicity make it a powerful tool, whether you’re working on small projects or scaling up to larger ones. As you continue to explore Vite, dive into its advanced features, such as plugins and environment-specific configurations, to make your development experience even better.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!