クライアントの設定

Catalyst React プラグインを使用して “app” という名前の React アプリをすでに作成しました。次に、ダウンロードしたリポジトリからアプリに必要なコードを追加します。

ダウンロードした GitHub リポジトリには、以下のクライアントディレクトリ構造が含まれています：

それでは、Cat.ly のコードをクライアントディレクトリに追加しましょう。これを簡単に行うには、プロジェクトディレクトリの “app” ディレクトリを、ダウンロードしたリポジトリの Cat.ly のファイルで置き換えます。

以下のファイルとディレクトリが複製されていることを確認してください：

1. package.json ファイル。
2. 隠しファイルの .gitignore ファイル。
3. public フォルダ。
4. src フォルダ。

プロジェクトディレクトリに、ダウンロードしたリポジトリと同じ構造ですべてのクライアントファイルが含まれているはずです。

それでは、クライアントディレクトリ内のファイルを詳しく見ていきましょう。

• クライアントのルートディレクトリには、client-package.json ファイルがあり、クライアントコンポーネントの名前、バージョン、デフォルトのホームページを定義する設定ファイルです。

• app フォルダには、React アプリのデフォルトプロジェクト構造に従って 2 つのサブフォルダが含まれています。

  • public フォルダは通常、Web アプリのアイコンファイルや index.html など、ブラウザからパブリック URL を通じて直接アクセスできるファイルを保持するために使用します。
  • src フォルダには、React アプリをコンパイルする際に build フォルダに含まれるアプリケーションのソースファイルが含まれています。

app フォルダには、package.json 依存関係ファイル、.gitignore ファイル、yarn.lock ファイルも含まれています。

• public フォルダには以下が含まれます：

  • index.html: Cat.ly のデフォルトエントリポイント
  • manifest.json: Web アプリケーションの情報が含まれ、start_url が “.” に設定されています。これにより、ユーザーが入力した URL の短縮版がすべて、アプリがホストされた際のベース URL Catalyst_web_app_URL/app/ から始まるようになります。これについてはチュートリアルの最終ステップで説明します。
  • error.html: ユーザーが無効な URL を短縮しようとした場合に Cat.ly がリダイレクトするページ

• src フォルダには以下が含まれます：

  • クライアントコンポーネントの JavaScript および CSS ファイル。App.js はアプリケーションのフロントエンドの動作を制御します。変更イベントと短縮イベントを処理し、先に定義した 3 つのルートを使用してデータの送受信を行います。その他のファイルは DOM のレンダリングと Web ページの外観の定義に関与しています。

  • input: このサブフォルダには、ユーザーからの入力を処理するコードが含まれています。Header.js は、新しい URL が短縮されて Web ページに表示されるたびに URL カウントを 1 増やす機能を提供します。InputForm.js は入力テキストバーと送信ボタンを処理します。List.js は短縮された URL をリストとして表示する機能を提供します。

  • utils: このサブフォルダには、App.js で使用する 3 つのルートの定数値を保存する constants.js が含まれています。

ファンクションの設定プロセスを完了するには、以下の手順に従ってください：

ダウンロードしたリポジトリには、アプリケーションに必要な React プラグインの依存関係が含まれていません。そのため、app フォルダにプラグインをインストールする必要があります。

CLI で /app に移動し、以下のコマンドを実行します：

これにより、アプリケーションに必要な Catalyst React プラグインがインストールされ、依存関係ファイルが更新されます。

それでは、React アプリをコンパイルしてテストしましょう。