ReactNativeでアプリを作る時の個人的な最小構成

  • 2
    いいね
  • 0
    コメント

React Nativeで開発をはじめる時の設定とディレクトリ構成をメモ。

一応個人的な最小構成としては、

  • 状態管理にreduxを使う
  • 非同期処理にredux-sagaを使う
  • airbnbのスタイルをカスタムしてeslintを使う

という感じ。

ディレクトリ構成の例としてはこんな感じで。

index.ios.js
index.android.js
src
|__actions
   |__hoge.js
|__saga
   |__hoge.js
|__reducers
   |__index.js
   |__hogeReducer.js
|__components
   |__hogeScreen
     |__index.js
     |__list.js
   |__fooScreen
     |__index.js
     |__buttonA.js
     |__buttonB.js
|__constants
   |__hoge.js
|__configureStore.js

特徴としては、redux用のディレクトリを作る以外にsaga用のディレクトを作るあたりか。

あとviewはcontaianerとかrouterで分けず、componentsにまとめることにする。

components内にページ単位のディレクトリを切って、その中にcontainer的なものとかボタンコンポーネントとか全部入れる。

開発環境はAtomを使っていて、プラグインはこのエントリ見ながら適宜。

ほんで実際に生成していく過程はざっくり以下。raect-nativeとeslintはすでにインストールしている前提で。

1. init

react-native init ProjectName
cd ProjectName

2. ライブラリのインストール

eslint関連のインストール

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

reduxやその他のインストール

npm install --save prop-types react-redux redux redux-saga

3. eslintの設定ファイル作成

設定は適宜。

touch .eslintrc.js
vim eslintrc.js
[.eslintrc.js]
module.exports = {
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "react/jsx-filename-extension": [
          1, {
            "extensions": [".js", ".jsx"]
          }
        ],
        "react/prefer-stateless-function": [
          0, { "ignorePureComponents": true}
        ],
        "no-console": [
          "error", { allow: ["log", "warn", "error"] }
        ],
        "react/no-array-index-key": [
          0
        ],
        "import/prefer-default-export": [
          0
        ],
        "no-constant-condition": [
          0
        ]
    }
};

4. ディレクトリ構成を作る

mkdir src
mkdir src/actions src/reducers src/components src/constants src/saga
touch ./src/configureStore.js

あとは適宜必要なファイルを作っていく。

サンプル

この構成に習ってreact-native + redux-sagaでストップウォッチのサンプルアプリを作っておいたのでみてもらうとわかりやすいと思われ。

YuheiNakasaka/react-native-redux-saga-stopwatch

参考リンク