React Nativeでアプリを作る - 0

今回はプロジェクトを作成し、開発ツールを導入するというコードを書いていく手前までやっていく。

Expoで作ったアプリのファイル構成

プロジェクトを作成

$ exp init project-name
$ npm install

Expoで作ったものは通常React Nativeで作るものとは若干異なる。主なものは以下。

App.js	このアプリのルートになるファイル。最終的にReact Nativeでビルドされる。
app.json	Expoのファイル。アプリの名前やアイコンの場所を指定している。
package.json	React Nativeのプロジェクトの依存関係を指定。実際の依存関係はnode_modulesフォルダ内に入っている。
node_module	npm installやpackage.jsonを修正してnpm installするとnode_moduleフォルダに自動的にファイルがダウンロードされる。

ディレクトリの構成の変更

プロジェクト直下にsrcというフォルダ、更にその下に、components、elements、screensというフォルダを作成。
大きさは小さい順に以下のようになる。

elements	画面を構成する最小単位
components	elementsの集合体
screens	1つの画面のcomponents

開発用ツールの導入

eslint

babel-eslint

eslint-config-airbnb

eslint-plugin-impot

eslint-plugin-jsx-a11y

eslint-plugin-react

Terminalからコマンドを実行し、package.jsonに入れていく。
package.jsonはパッケージとそのバージョンの指定をしているだけで、実態はnode_moduleフォルダにある。

npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

• • save-dev：開発環境にダウンロード

また、eslintを使うためにはフォルダ直下に「.eslintrc.json」を作成し、今回の場合は以下のような内容にする。
「rules」には出されたエラーの中で無視したいものを入れていく(0にする)。

{
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "no-use-before-define": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0
  },
  "parser": "babel-eslint"
}

高速に開発するために

--offlineオプションを付ける

$ exp start --offline
$ exp ios --offline
$ exp android --offline

上記3つのコマンドは通常「--offline」というオプションをつけずに使用出来るが、
これをつけるとネットワーク経由でJavascriptが経由されるので速い。
シミュレーターでエラーが出たらこっちの記事を参照。
React Nativeの実行環境を整える - 機械音痴な情報系

Hot Reloadを使用する

アプリを立ち上げている状態から、⌘+Dを押すとアプリの設定画面に戻れる。
Live Reloadではなく、Hot Reloadを使えるようにする。

Live Reload	コードを変更すると自動でリビルドする。
Hot Reload	変更した差分のみを転送するため反映されるのが速い。

これで開発のスタートラインに立った！！