が含まれています。 React アプリがマウントされる id="root" 要素。
<!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.
