React テンプレート

ドキュメントのこのセクションでは、Tailwind CSS 管理ダッシュボード テンプレートで (opens in a new tab)ある Mosaic のみを参照します。 これは、最新のフロントエンド ツールの 1 つである Vite (opens in a new tab)で作成された基本アプリで構成されています。Vite は、インスタント サーバーの起動、超高速のホット モジュール交換などの優れた機能により、開発者の間で人気があります。

この React テンプレートは、開発プロセスをすぐに開始できるように、基本構成とともに出荷されます。

Quickstart

Mosaic React の使用を開始するには、テンプレートのメイン フォルダーに移動し、名前に -react が含まれるファイルを見つけます。 ファイルを解凍すると、React アプリのカスタマイズを開始する準備が整います。

選択したコード エディターでプロジェクト フォルダーを開き、ターミナルを起動します。 npm i を実行して必要な依存関係をすべてインストールし、npm run dev を実行します。 Vite はローカル サーバーを実行し、アプリを表示するための URL を提供します。 変更を加えるたびにページがリロードされます。

yarn pnpmなども利用可能です。

この時点から、テンプレートのカスタマイズを開始できます。 クラス名に変更を加えるたびに、CSS の再生成がトリガーされます。

フォルダー構造

テンプレートのフォルダー構造は、エンド ユーザーにとって理解しやすいように設計されています。 テンプレートのルートには、Vite 設定ファイルや PostCSS など、React テンプレートが機能するために必要なファイルが含まれています。

src/ フォルダーには、テンプレートをカスタマイズするために必要なすべてのファイルが含まれています。 React コンポーネントは 3 つのフォルダーに編成されています。

• Pages/ には、テンプレートを構成するページが含まれます。
• Partials/ には、ヘッダー、フッター、ページ セクションなどの部分的なコンポーネントが含まれます。
• utils/ にはユーティリティ関数が含まれています。
• components/ には、モーダル、ドロップダウンなどの再利用可能なコンポーネントが含まれています。
• charts/ には、Chart.js で作成されたグラフを表示するダッシュボード コンポーネントが含まれています。

さらに、src/ ディレクトリには、css/ や image/ などの他のフォルダーが含まれており、その内容はそれぞれの名前で明示的に説明されています。

私はassets/配下に、css/,images/を配置して、使ってます。

ルーティング

ルーティングは、ユーザーのナビゲーションに基づいて別のページにリダイレクトするプロセスです。 React テンプレートでは、React Router と呼ばれる外部ライブラリを使用します。これは main.jsx ファイルにインポートされ、クライアント側のルーティングを有効にします。

App.jsx ファイルでは、すべてのテンプレート ページをインポートし、それぞれのパスを使用して各ページのルートを定義しました。

ページの追加または削除

すべてのテンプレートには、事前に構築されたページのセットが付属しています。 ある時点で、サイトにページを追加または削除する必要がある場合があります。

ページを削除するには、削除するページ コンポーネントを見つけて削除します。 その後、App.jsx ファイルと対応するルート パスからインポート ステートメントを削除する必要もあります。

Web サイトまたはアプリに新しいページを追加するには、いくつかの手順に従う必要があります。 まず、新しいページコンポーネントを作成する必要があります。 このコンポーネントには、新しいページのコンテンツとレイアウトを定義するコードが含まれます。

コンポーネントを作成したら、それを App.jsx ファイルにインポートする必要があります。 このファイルはアプリのメイン エントリ ポイントであり、ページのルーティング システムを設定するコードが含まれています。 新しいコンポーネントをこのファイルにインポートすると、それをアプリのナビゲーション フローに含めることができます。

最後に、新しいページのルート パスを定義する必要があります。 これは、ユーザーが新しいページにアクセスするために使用する URL です。 ルート パスを定義すると、ユーザーが指定された URL に移動したときにどのコンポーネントをレンダリングするかをアプリに指示することになります。

React アプリの構築とデプロイ

変更を加えた後、npm run build を実行して、実稼働用にコードをコンパイルおよび縮小します。 デフォルトでは、ビルド出力は dist フォルダーに配置されます。 アプリを構築したら、npm runreview コマンドを実行してローカルでテストできます。

すべてが正しく動作していれば、アプリをデプロイする準備は完了です。 GitHub Pages、GitLab Pages、Netlify、Vercel、またはその他の好みのホスティングサービスを使用できます。 詳細については、Vite のドキュメント (opens in a new tab)を参照してください。