deve.K

エンジニアが未来を切り開く。

English

React create-react-appのディレクトリ構成の解説


スポンサーリンク

react画像

本日はReactの学習でSPA開発する際に手軽にプロジェクトの雛形を提供してくれるCLIツールである

create-react-appテンプレのディレクトリ構成の中身を解説します。

こちらは完全な初学者用もしくは現在学ばれてる方々用になります、そこはご了承下さい。

公式ドキュメントではWebpackやbabelを知る必要がないとありますが

把握してるかしてないかで差はかなりあると思います。

create-react-appのインストールや使い方は今では調べればかなりありふれてる。

なのでディレクトリの中を細かく覗いていきましょう!。

OSの関係上、多少構造が前後する場合があります。

構造

create-react-app画像

ツリー構造にするとこんな感じです。

順番にいきましょう

my-app

ファイルシステムで最上位にあるディレクトリで

プロジェクトルートになります。

ルートディレクトリは全てに繋がる枝の開始地点です。

README.md

READMEにはそれぞれ役割があります。

  • プロジェクトのツールの使い方やインストール方法 コマンドなどその他詳細

  • 宣伝などで使われたりします。

取り扱い説明書みたいな感じですね!。

node_modules

npmでインストールされたモジュールの『バージョン』の依存関係を管理している場所となります。 複数のファイルがあります

依存関係については、モジュールやコンパイラーなど npmやnode.jsを学ばれてみてください。

package.json

こちらはnpmでパッケージをインストールしたのをここで設定する事が可能です。

npmパッケージを使用して開発している場合は、 1 つもしくは複数のパッケージが更新されている時に、プロジェクトをビルドすると

警告やエラーが発生することは珍しくありませんね。

時にはバージョンが競合したり

パッケージのバージョンが廃止されていたりする場合もあります。

package.jsonを作成し、npmでインストールをすればpackage.jsonに登録しておいたnode moduleがinstallされたり、わざわざGitにpushする必要もありません。

詳しくは別で取り上げたいと思います。

create-react-app画像

gitingnore

Gitに関する登録をしたくないファイルがある場合はこの場所に記述します。

Gitによる追跡から特定のファイルを除外します

つまりGitの管理下ではなくなる、ということです。

public

この場所ではHTMLや画像、フォントなどを管理します。

publicフォルダに他のアセットを追加することも可能となります。

Webで公開されるファイル『ファイルにアクセスできるもの』をまとめておくところになります。

その中でも1番重要なのが『index.html』となりますReactではこのファイルにコードを入れ、ブラウザに実行できるようになるからです。

public内にある『manifest.json』はJSONテキストファイルでアプリに関する構成情報を提供しているファイルとなる。

情報はアプリの『作成者・アイコン・説明』などなどこれらをデバイスのホーム画面にWebアプリをインストールします。

create-react-app画像

src

このディレクトリーはアプリを開発していく上で主にこの部分での開発となります。

JavaScriptファイルやReactのコンポーネントで扱うCSSなどがここに配置されます。

index.jsでは、テンプレ内のpublic/index.htmlからbodyにあるid="root"の部分にDOM要素を生成しApp というReactコンポーネントを設定しています

  • Service Worker.js

Service Worker.jsはネットワークの関連機能を提供します。 機能と言うのはプッシュ通知やバックグラウンド同期などの機能を有効にします。 ファイルを開くとあらかじめ最初からコードの処理が記述してありますが

あなたのアプリが本番環境でなおかつブラウザに対応されているかになります。


  • setupTests.js

これはユニットテストを行うことができます

必要なツールを使いReactと連携させコンポーネントレンダリングなどのテストが可能となります。

React便利ツールcreate-react-appのテンプレート構造の中身の解説は以上です!

setupTestやServiceWorkerなどは初学者のうちは無視してても構わないかと思います!

でも聞かれたときに簡単な説明ぐらいはできるようにしときましょう!。

create-react-appは開発のケースによりディレクトリの構成は変わったりします。

  • build

  • build/static

さきほどのpublicなど

Reactのbuildに関しては調べてみて下さい。

React基礎が終わったらcreate-react-appからNext.jsに移行するのをオススメします!

プライバシーポリシー