React 프로젝트의 Vite 흐름 및 구조 이해-JS 튜토리얼-php.cn

React 프로젝트의 Vite 흐름 및 구조 이해

王林

풀어 주다： 2024-07-18 20:00:32

원래의

508명이 탐색했습니다.

Understanding Vite Flow and Structure in a React Project

React로 작업할 때 Vite는 기존 Create React App 설정과 몇 가지 주요 차이점이 있는 간소화된 개발 환경을 제공합니다. 이 블로그 게시물에서는 index.html, main.jsx 및 App.jsx와 같은 주요 파일에 초점을 맞춰 일반적인 Vite 프로젝트의 구조를 살펴보겠습니다.

1. index.html

Vite 기반 React 애플리케이션에서 index.html은 중요한 시작점 역할을 합니다. 스크립트가 자동으로 삽입되는 Create React App과 달리 Vite에서는 스크립트 파일을 직접 지정해야 합니다. 이렇게 명시적으로 포함하면 애플리케이션의 진입점과 종속성을 쉽게 이해할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- The root div where your React app will be mounted -->
    <script type="module" src="/src/main.jsx"></script>
    <!-- The script tag importing your main JavaScript module -->
  </body>
</html>

로그인 후 복사

이 예에서는 script 태그가 main.jsx를 직접 로드하는 것을 볼 수 있습니다. 이러한 직접 포함은 Create React App과의 주요 차이점으로, 프로젝트 진입점에 대한 명확성과 제어력이 향상됩니다.

1.1 종속성

스크립트 파일이 올바르게 로드되도록 Vite는 최신 ES 모듈 가져오기를 활용합니다. package.json에 필요한 종속성이 포함되어 있는지 확인하세요.

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

로그인 후 복사

HTML 파일에 스크립트를 명시적으로 포함하면 애플리케이션의 올바른 로드 및 실행 순서가 보장되어 스크립트 로드와 관련된 잠재적인 문제가 완화됩니다.

2. 메인.jsx

main.jsx 파일은 React 애플리케이션의 진입점 역할을 합니다. 이 파일은 루트 구성 요소를 DOM으로 렌더링하는 역할을 합니다. 일반적으로 index.html에 있는 스크립트 태그의 src 속성에 지정된 파일입니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Render the root component into the root element in the HTML
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

로그인 후 복사

이 파일에서 ReactDOM.createRoot는 App 구성 요소를 ID 루트가 있는 HTML 요소로 렌더링하는 데 사용됩니다. 루트 요소를 일시적으로 유지하지 않는 이러한 직접 렌더링 접근 방식은 프로세스를 간소화하여 애플리케이션이 시작되는 위치와 관련된 구성 요소를 명확하게 만듭니다.

3. 앱.jsx

App.jsx 파일에는 기본 앱 구성 요소에 대한 정의가 포함되어 있습니다. 이 구성 요소는 React 구성 요소 트리의 루트 역할을 합니다.

import React from 'react';

const App = () => {
  return (
    <div className="App">
      <h1>Hello, Vite and React!</h1>
    </div>
  );
};

export default App;

로그인 후 복사

이 파일에서는 애플리케이션의 기본 구조와 동작을 정의합니다. 앱 구성요소는 다른 React 프로젝트에서와 마찬가지로 기본 UI와 기능을 구축하는 곳입니다.

추가 자료 및 모범 사례

4. Vite와 함께 Tailwind CSS 사용하기

Tailwind CSS는 유틸리티 우선 스타일을 위해 Vite 프로젝트에 쉽게 통합될 수 있습니다.

Tailwind CSS 설치:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

로그인 후 복사

Tailwind 구성:

tailwind.config.js를 프로젝트의 특정 경로로 업데이트하세요.

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

로그인 후 복사

CSS에 Tailwind를 포함하세요.

Tailwind의 기본, 구성요소, 유틸리티를 포함하도록 index.css를 업데이트하세요.

@tailwind base;
@tailwind components;
@tailwind utilities;

로그인 후 복사

5. 핫 모듈 교체(HMR)

Vite는 페이지를 새로 고치지 않고도 실시간으로 변경 사항을 확인할 수 있는 HMR을 제공합니다.

6. 환경변수

Vite는 .env 파일을 사용하여 환경 변수를 관리합니다. 프로젝트 루트에 .env 파일을 생성하고 변수를 정의합니다.

VITE_API_URL=https://api.example.com

로그인 후 복사

import.meta.env를 사용하여 애플리케이션에서 다음 변수에 액세스하세요.

const apiUrl = import.meta.env.VITE_API_URL;

로그인 후 복사

7. 최적화된 빌드 프로세스

Vite의 빌드 명령(vite build)은 내부적으로 Rollup을 사용하여 프로덕션에 고도로 최적화된 정적 자산을 생성합니다. 이를 통해 애플리케이션이 빠르고 효율적으로 작동할 수 있습니다.

결론

React 프로젝트에서 Vite를 사용하면 간소화되고 효율적인 개발 경험을 얻을 수 있습니다. index.html, main.jsx, App.jsx와 같은 주요 파일의 흐름과 구조를 이해하면 개발 프로세스를 크게 향상시킬 수 있습니다. Tailwind CSS 통합, HMR 및 최적화된 빌드의 추가 이점을 통해 Vite는 React 개발자를 위한 현대적이고 강력한 도구로 돋보입니다.

이러한 기능과 모범 사례를 활용하면 확장 가능하고 유지 관리가 가능한 고성능 애플리케이션을 쉽게 만들 수 있습니다.

위 내용은 React 프로젝트의 Vite 흐름 및 구조 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!