REACT【アプリビルド時のフォルダ構成】

はじめてnpm init react-appすると、ファイルの多さに少し圧倒されてしまいますよね。

初期の開発ではあまり理解する必要はないかもしれませんが、知らないままにするのもじれったいので、今回はアプリのビルド時のフォルダ構成について軽く見ていきます。

Reactアプリのビルド

念のため、プロジェクトの立ち上げから。

プロジェクトをビルドしたいディレクトリにおいて、

npm init react-app .

を実行します。さらに、

npm start

とするとアプリがビルドできます。

ここで、npx(node package executor)でもビルドすることができます。その場合は

npx create-react-app react-app
cd react-app
npm start

の順に実行してください。

---

ファイル構成

さて、ビルド時のファイル構成はこんな感じです。一つずつ見ていきます。

node_modules

ここには、アプリで使われる全てのモジュールが保管されています。

特定のnpmパッケージをダウンロードするとnode_moduleも自動的に追加されます。
例えば、Reactはnpmパッケージの一つです(npm install reactとコマンドで打った覚えがあると思います)。

パッケージはファイルやnode.jsのモジュールの集まりで,
誰かが一生懸命書いてくれたコードを借りて、自分のアプリにその機能を追加するために使用します。

つまりReactであれば、Facebookのエンジニアが書いてくれたコードが、パッケージとしてnode_moduleの中に入っているということです。

public

publicにはアプリに表示されるアセットが入っているフォルダです。
一番わかりやすいのは写真やファビコンなどです。
以下public内のファイルの説明をします。

robots.tct (publicフォルダ内)

検索エンジンの最適化のためのファイルです。このファイルでクローラーに、「クロールされたいページ」や「クロールされたくないページ」を教えます。

manifest.json (publicフォルダ内)

reactで動いているアプリがデバイスにインストールされたときに、デバイスにメタデータを提供するために使用します。
メタデータとは、アプリの名前やアイコンなど
例えば、Facebookをスマホにインストールすると、ホーム画面にFacebookのアイコンとその下に「Facebook」と表示されますよね。
このような情報をmanifest.jsonでは管理しています。

index.html

このファイルは最終的なreactのアプリがぶっこまれる部分です。
私たちが頑張って書いたコンポーネントはidが"root"になっているところに全て入れられて、表示されるということです。

src

このフォルダでは私たちが書くコンポーネントやスタイルシートなどが含まれています。
したがって、このフォルダでの作業が開発のメインになるでしょう。
以下、srcに含まれるファイルをいくつか紹介します。

App.css/index.js

App.css はApp.jsのスタイルシートです。
対して、index.cssはアプリ全体に共通するスタイルシートになります。

App.test.js / reportWebVitals.js / setupTest.js

アプリのパフォーマンスやテストに関連するファイルです。

---

以上。