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

  • 0
    いいね
  • 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

    参考リンク