Home > Article > Web Front-end > A beginners guide to using Vite with React
When starting a new React project, choosing the right tools can have a big impact on your workflow. While tools like Webpack have been widely used for years, newer options like Vite offer faster and more efficient alternatives.
Vite, developed by Evan You (the creator of Vue.js), is designed to deliver a lightning-fast development environment. It does this by serving files via native ES modules and using an optimized development server. This results in quicker server startup times and more responsive development.
React, one of the most popular libraries for building user interfaces, works seamlessly with Vite. Its component-based architecture is ideal for developing dynamic single-page applications (SPAs). Here’s why Vite is a great choice for React projects:
Instant Server Start: Unlike traditional bundlers, Vite’s development server starts almost instantly by serving files as native ES modules, avoiding bundling during development.
Fast Hot Module Replacement (HMR): Vite’s HMR is incredibly fast, allowing you to see changes in your React components nearly instantly, which speeds up development.
Optimized Production Builds: For production, Vite uses Rollup to optimize your bundles. It includes features like automatic code splitting, which improves your app's load time.
Modern Development Support: Vite works well with modern JavaScript tools like TypeScript, JSX, and CSS preprocessors such as Sass, providing a cutting-edge development experience out of the box.
In this blog, we’ll guide you through setting up a React project with Vite, explore the project’s structure, and show you how to work with assets and deploy your app. By the end, you’ll see how Vite can improve your React development experience.
Vite is a modern build tool designed for speed and efficiency, particularly when working with JavaScript frameworks like React. Developed by Evan You, the creator of Vue.js, Vite stands out due to its ability to deliver a fast and streamlined development experience.
Instant Server Start: Vite serves files via native ES modules, allowing the development server to start almost instantly, even for large projects.
Fast Hot Module Replacement (HMR): Vite’s HMR is extremely quick, enabling near-instant updates to your React components as you develop.
Optimized Builds: Vite uses Rollup for production builds, ensuring efficient bundling with features like code splitting and tree-shaking.
Modern JavaScript Support: Vite comes with built-in support for the latest JavaScript features, including TypeScript, JSX, and CSS preprocessors like Sass.
While Webpack has been a popular choice for years, it often requires complex configurations and can be slower during development due to its bundling process. In contrast, Vite simplifies the setup process and skips bundling during development, leading to faster server start times and HMR. Vite’s production builds are also highly optimized, much like Webpack’s, but with a more straightforward configuration.
Speed: Vite’s quick server start and HMR make it easier to develop React applications without waiting for long bundling processes.
Simplicity: Vite’s easy-to-use setup lets you focus on building your React components rather than configuring build tools.
Efficiency: Vite ensures that your React app is not only quick to develop but also optimized for production with minimal effort.
Vite offers a more modern and efficient alternative to traditional bundlers like Webpack, making it a great fit for React projects that prioritize speed and simplicity.
Before diving into Vite with React, you'll need to ensure that you have Node.js and npm installed on your system. If you don't have them installed, follow the steps below to get started.
To install Node.js and npm, visit the Node.js official website and download the latest stable version. Once installed, you can verify the installation by running the following commands in your terminal:
node -v npm -v
These commands should display the installed versions of Node.js and npm, confirming that they are set up correctly.
With Node.js and npm ready, you can now create a new React project using Vite. Vite provides a straightforward command to set up a new project quickly. Open your terminal and run the following commands:
npm create vite@latest my-react-app --template react cd my-react-app npm install
Once your project is set up and dependencies are installed, you can start the development server. Vite's server is fast, and you'll see how quickly it starts:
npm run dev
Running this command will start the Vite development server and open your new React application in your default web browser. The application will automatically reload as you make changes to the code, thanks to Vite's fast Hot Module Replacement (HMR) feature.
Running this command will start the Vite development server and open your new React application in your default web browser. The application will automatically reload as you make changes to the code, thanks to Vite's fast Hot Module Replacement (HMR) feature.
Vite sets up a simple and organized project structure. Here's a quick overview of the key files and folders:
This structure is designed to be minimal yet powerful, giving you a solid foundation to start building your React application without unnecessary complexity. You can easily expand and customize the structure as your project grows.
When you initialize a React project using Vite, it creates a clean and minimal project structure. This structure is designed to help you get started quickly without the overhead of unnecessary files or complex configurations. Let’s break down the key files and folders created by Vite to help you understand the setup.
my-app ├── node_modules ├── src ├── .eslintrc.cjs ├── index.html ├── README.md ├── package.json └── vite.config.js
index.html: This file is the entry point of your application and is located in the root directory. Unlike traditional bundlers, Vite directly serves this HTML file during development. It’s where your React application is mounted, and Vite injects the necessary scripts to load the app.
src/: The src folder contains all your application code.
main.jsx: This is the main entry point for your React app. It imports React, renders the root component (App.jsx), and attaches it to the #root element in the index.html file.
App.jsx: This is the root component of your application, where you'll start building your UI. You can modify this file to add more components as your project grows.
vite.config.js: This file contains Vite’s configuration. It allows you to customize Vite’s behavior, add plugins, or modify the build process, but for most small projects, you may not need to touch this file.
Key Files
8b05045a5be5764f313ed5b9168a17e6 49099650ebdc5f3125501fa170048923 93f0f5c25f18dab9d176bd4f6de5d30e 7c8d9f814bcad6a1d7abe4eda5f773e5 26faf3d1af674280d03ba217d87e9421 b2386ffb911b14667cb8f0f91ea547a7Vite React App6e916e0f7d1e588d4f442bf645aedb2f 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 19bcd4103e1ab0d65154026dcb13abb816b28748ea4df4d9c2150843fecfba68 ab34d035723b51ae7608c1a5af2465152cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')).render( e40a65d765d61baa05a126c5d6a7e30a a04f3bfb10583669370762b6ad4b2dc1 db43dfc68f8758907320fe5e4259c7bc );
import React from 'react'; function App() { return ( dc6dce4a544fdca2df29d5ac0ea9906b 4a249f0d628e2318394fd9b75b4636b1Welcome to Vite + React!473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 ); } export default App;
Let’s modify the default App.jsx component to create a simple React component that displays a list of items:
import React from 'react'; function App() { const items = ['Item 1', 'Item 2', 'Item 3']; return ( dc6dce4a544fdca2df29d5ac0ea9906b 4a249f0d628e2318394fd9b75b4636b1Simple List with Vite and React473f0a7621bec819994bb5020d29372a ff6d136ddc5fdfeffaf53ff6ee95f185 {items.map((item, index) => ( ba933d1ba6eb3b125bac48a5e6256165{item}bed06894275b65c1ab86501b08a632eb ))} 929d1f5ca49e04fdcb27f9465b944689 16b28748ea4df4d9c2150843fecfba68 ); } export default App;
In this example:
This project structure offers flexibility and simplicity, allowing you to grow your application easily as you continue development.
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.
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 ( dc6dce4a544fdca2df29d5ac0ea9906b 4ccb2c01b16c2bad77e1308e25ee29fa 4a249f0d628e2318394fd9b75b4636b1Welcome to Vite React App!473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 ); } 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 ( 11287760be4ea6bfff7670b389046e86 4a249f0d628e2318394fd9b75b4636b1Welcome to Vite React App!473f0a7621bec819994bb5020d29372a 16b28748ea4df4d9c2150843fecfba68 ); } export default App;
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 ( dc6dce4a544fdca2df29d5ac0ea9906b 4a249f0d628e2318394fd9b75b4636b1Welcome to the updated Vite React App!473f0a7621bec819994bb5020d29372a {/* Change the text */} 16b28748ea4df4d9c2150843fecfba68 ); } 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.
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.
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:
npm install
If the issue persists, clear Vite’s cache and restart the server
rm -rf node_modules/.vite npm run dev
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()], };
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:
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.
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.
The above is the detailed content of A beginners guide to using Vite with React. For more information, please follow other related articles on the PHP Chinese website!