React を使用する場合、Vite は合理化された開発エクスペリエンスを提供しますが、従来の Create React App セットアップとはいくつかの重要な違いがあります。このブログ投稿では、index.html、main.jsx、App.jsx などの主要なファイルに焦点を当てて、典型的な Vite プロジェクトの構造について説明します。

1.index.html

Vite を利用した React アプリケーションでは、index.html が重要な開始点として機能します。スクリプトが自動的に挿入される Create React App とは異なり、Vite ではスクリプト ファイルを直接指定する必要があります。この明示的な組み込みにより、アプリケーションのエントリ ポイントと依存関係を簡単に理解できるようになります。

この例では、main.jsx を直接読み込む script タグがわかります。この直接の組み込みは、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(
  
);

このファイルでは、ReactDOM.createRoot を使用して、ID が root の HTML 要素に App コンポーネントをレンダリングします。この直接レンダリングのアプローチは、ルート要素を一時的に保持せずにプロセスを合理化し、アプリケーションがどこから開始され、どのコンポーネントが関係しているかを明確にします。

3.App.jsx

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

import React from 'react';

const App = () => {
  return (
    

      
Hello, Vite and React!
    
  );
};

export default App;

このファイルでは、アプリケーションの主な構造と動作を定義します。 App コンポーネントは、他の React プロジェクトと同様に、主要な UI と機能を構築する場所です。

追加資料とベストプラクティス

4. Vite での Tailwind CSS の使用

Tailwind CSS は、ユーティリティ優先のスタイルを実現するために Vite プロジェクトに簡単に統合できます。

1. Tailwind CSS をインストールします:

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

1. Tailwind の構成:

tailwind.config.js をプロジェクトの特定のパスで更新します:

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

1. 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 開発者にとって最新の強力なツールとして際立っています。

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