id="root" 的元素將在其中安裝 React 應用程式。
<!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>
登入後複製
- src/main.jsx React 應用程式的主要 JavaScript 入口點。它將 App 元件渲染到 index.html 的 #root div 中。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
登入後複製
-
src/App.jsx ：React 應用程式的主要元件。您將在此處開始建立 UI。預設情況下，它包含一個簡單的 React 元件，但您可以對其進行修改以滿足您的需求。
import React from 'react';
function App() {
return (
<div>
<h1>Welcome to Vite + React!</h1>
</div>
);
}
export default App;
登入後複製
修改 App.jsx 以建立簡單的 React 元件
讓我們修改預設的 App.jsx 元件來建立一個顯示項目清單的簡單 React 元件：
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;
登入後複製
在此範例中：
- 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.
-
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:
-
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:
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.
-
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:
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.
