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.
위 내용은 React와 함께 Vite를 사용하기 위한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
