シンプルなMultipageReact MaterialUIアプリケーション

この記事では、フロントエンドのReact MaterialWebアプリケーションの作成を最初から開始する方法について説明します。このようなことを始めるのは気が遠くなるかもしれませんが、ここでの目的はそれを行う方法を説明することです。Material-UIのコンポーネントを使用します（https://mui.com/）これは、マテリアルデザインガイドラインのReact実装です。Reactは最も人気のあるJavascriptフレームワークであり、Material-UIはReactの最も人気のあるコンポーネントライブラリです。これらの事実は、これらを使用して次のWebアプリケーションを構築するための強力な根拠となります。

私たちはします基本的なナビゲーションを提供するための基本的なメニューと簡単なマルチページのWebアプリケーションを作成します。これは、React MaterialWebアプリケーションの優れた出発点です。材質UIの使用アプリケーションバーとツールバーのコンポーネントは、このアプリケーションで実証されています。

シンプルなマルチページReactマテリアルアプリケーション

前提条件

NodeJSをインストールしてください

Visual StudioCodeをインストールしてください

Reactプロジェクトを作成する

Visual StudioCodeを起動します

Visual Studio Codeでターミナル/「新しいターミナル」を開き、次の手順を実行します。

mkdir c:\projects\
cd c:\projects\
npx create-react-app materialapp

cd c:\projects\materialapp
npm start

http：// localhost：3000 /

Visual Studio Codeで、[ファイル] / [フォルダーを開く]を選択し、C：\ projects \ materialappを選択します

上記のページは、画面にレンダリングされた対応するhtmlを確認できるように、/ src /App.jsファイルで定義されています。変更を加えることができ、ブラウザに表示されます。

Reactルーターモジュールをインストールします

アプリケーションのさまざまなページにルーティングするために、Reactルーターモジュールが必要になります。Ctrlキーを押しながらCキーを押してサーバーの実行を停止し、サーバーを実行しているバッチジョブを終了できます。次のように、Reactルーターモジュールをインストールできないはずです。

npm install --save react-router-dom

Material-UIのインストール

次に、Material-UIの依存関係をインストールして、Material-UIコンポーネントに必要なすべての依存関係があることを確認します。以下のコマンドが、コードに必要なすべての依存関係をカバーすることを願っています。そうでなければ、少しのインターネット検索であなたが抱えている問題を発見できるかもしれません。

npm install @mui/material
npm install @emotion/react
npm install @emotion/styled 
npm install @mui/icons-material

次に、必要なすべてのソースファイルを更新します。あなたはそれらを見つけることができますhttps://github.com/collin-smith/materialapp。すべてのファイルは/ srcフォルダーの下にあります。

/src/index.js（アプリをBrowserRouterタグでラップして、リダイレクト用のルートを有効にします）

/src/App.js（アプリケーションのヘッダーとルートを含める）

/components/Header.js（ヘッダーのコードにより、ユーザーは別のページに移動することもできます）

/ pages / *。js（選択したメニューオプションに基づいてどこかに行く場所を提供する10ページ

ファイルをReactプロジェクトにコピーすると、ファイルの設定は次のようになります。

VisualStudioコード

アプリケーションを起動します

ターミナルで次のコマンドを発行すると、アプリケーションを再起動できるはずです。

cd c:\projects\materialapp
npm start

localhost：3000

ナビゲーションがどのように機能するかを簡単に確認でき、各オプションで異なるページがレンダリングされます。これがこの記事の目標であり、誰かをすばやく立ち上げて実行することでした。

何が起こっているのかをウォークスルーする

この時点で、/ src / index.jsがアプリケーションをBrowserRouterコードでラップすることにより、ルーターモジュールを有効にしていることがわかります。

/ src / App.jsファイルはReactアプリケーションのベースであり、pagesディレクトリにある10個の可能なページのそれぞれへの許容ルートを定義します。また、App.jsのHeaderタグを見ると、Headerコンポーネントがレンダリングされることがわかります。

/ components / Header.jsファイルは、ヘッダーの詳細と、/ pages /フォルダーの下の各宛先ページへの10個の可能なリンクをレンダリングします。また、ナビゲーションメニューのレンダリングで非常に重要なAppBarおよびToolBarマテリアルコンポーネントも使用しています。詳細については、お問い合わせくださいhttps://mui.com/components/app-bar/。