React プロジェクトにおける Vite のフローと構造を理解する-jsチュートリアル-php.cn

React プロジェクトにおける Vite のフローと構造を理解する

王林

リリース： 2024-07-18 20:00:32

オリジナル

509 人が閲覧しました

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>

ログイン後にコピー

この例では、スクリプトタグが main.jsx を直接ロードしていることがわかります。この直接の組み込みは、Create React App との大きな違いであり、プロジェクトのエントリポイントの明確さと制御が強化されています。

1.1 依存関係

スクリプトファイルが正しく読み込まれるようにするために、Vite は最新の ES モジュールインポートを利用します。 package.json に必要な依存関係が含まれていることを確認してください:

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

ログイン後にコピー

HTML ファイルにスクリプトを明示的に含めることで、アプリケーションの正しい読み込みと実行順序が確保され、スクリプトの読み込みに関する潜在的な問題が軽減されます。

2.main.jsx

main.jsx ファイルは、React アプリケーションのエントリポイントとして機能します。このファイルは、ルートコンポーネントを DOM にレンダリングする役割を果たします。通常、これは、index.html の script タグの 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 を使用して、ID が root の HTML 要素に App コンポーネントをレンダリングします。この直接レンダリングのアプローチは、ルート要素を一時的に保持せずにプロセスを合理化し、アプリケーションがどこから開始され、どのコンポーネントが関係しているかを明確にします。

3.App.jsx

App.jsx ファイルには、メインのアプリコンポーネントの定義が含まれています。このコンポーネントは、React コンポーネントツリーのルートとして機能します。

import React from 'react';

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

export default App;

ログイン後にコピー

このファイルでは、アプリケーションの主な構造と動作を定義します。 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) は、内部でロールアップを使用して、本番用に高度に最適化された静的アセットを生成します。これにより、アプリケーションが高速かつ効率的に動作します。

結論

React プロジェクトで Vite を使用すると、合理化された効率的な開発エクスペリエンスが得られます。 Index.html、main.jsx、App.jsx などの主要なファイルのフローと構造を理解すると、開発プロセスを大幅に強化できます。 Tailwind CSS 統合、HMR、最適化されたビルドの利点が追加された Vite は、React 開発者にとって最新の強力なツールとして際立っています。

これらの機能とベストプラクティスを活用することで、高性能でスケーラブルで保守可能なアプリケーションを簡単に作成できます。

以上がReact プロジェクトにおける Vite のフローと構造を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。