React Nativeでのアプリ開発をはじめました。
基本ではありますが、ディレクトリ構成についてまとめてみました。
今後たくさん加筆修正するので、どんどんコメントください。
ディレクトリ構成
小ネタですが、homebrewがすでにある場合はターミナルで
$ brew install tree
として、
$ tree
とすると、自分が今いるディレクトリのディレクトリツリー（ディレクトリ構造）が入手できるみたい。
第一階層目だけのツリーを
$ tree -a -L 2
でみると
├── .eslintrc.json
├── .expo
├── .expo-shared
├── .git
├── .gitignore
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
└── package.json
こんな感じ。
.eslintrc.json
は前回作成した構文チェック用のやつなので、なくても問題ない。
これから、この階層にsrcというディレクトリを新規作成して、
├── .eslintrc.json
├── .expo
├── .expo-shared
├── .git
├── .gitignore
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
└── src
こうなる。src(source codeの略らしい)のディレクトリに必要なコードを全部格納する。
さらに、srcの中に、
- Elements
- Components
- Screens
の3つのディレクトリを新規作成する。
- Elementsはアプリ内で汎用性・共通性の高い要素（ボタンなど）の.jsファイルを入れる場所。
- ComponentsはElements汎用性のあまり高くない（特定のスクリーンにしか現れない）構成要素の.jsファイルを入れる場所。
- Screensは各々のスクリーンについて記述した.jsファイルを入れる場所。
それぞれに.jsファイルを追加すると、srcのディレクトリツリーはこんな感じ。
├── Components
│ ├── AhogeComponent.js
│ ├── BhogeComponent.js
│ └── ChogeComponent.js
├── Elements
│ ├── AhogeElement.js
│ └── BhogeElement.js
└── Screens
├── SettingScreen.js
└── WelcomeScreen.js
画面遷移のあるアプリを開発するのであれば、App.jsにたくさん書き込むのはおすすめしない。
これらの.jsファイルをimportしながらアプリケーションを構成していくのが基本。
アプリ開発においてディレクトリの構造化は基本にして超重要。
それぞれの.jsファイルの書き方
編集中...