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

  • 18
    いいね
  • 0
    コメント

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

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

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

という感じ。

もしReduxいらない場合は、Redux関連のライブラリインストールとディレクトリ作成は省く。

ディレクトリ構成の例としてはこんな感じで。Redux使うバージョン。

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
|__libs // utility的な関数とかhelper的なやつ
|__models // strorageアクセスやAPIアクセス的なやつ
|__assets // stylesheetや画像とか
|__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やその他routerのインストール。別にいらない場合はスキップで。

npm install --save prop-types react-redux redux redux-saga react-native-router-flux

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

設定は適宜。

touch .eslintrc.js
vim .eslintrc.js
[.eslintrc.js]
module.exports = {
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "globals": { "fetch": false, "require": false },
    "rules": {
        "react/jsx-filename-extension": [
          1, {
            "extensions": [".js", ".jsx"]
          }
        ],
        "react/prefer-stateless-function": [
          0, { "ignorePureComponents": true}
        ],
        "react/forbid-prop-types": [
          0
        ],
        "no-console": [
          "error", { allow: ["log", "warn", "error"] }
        ],
        "react/no-array-index-key": [
          0
        ],
        "import/prefer-default-export": [
          0
        ],
        "no-constant-condition": [
          0
        ],
        "max-len": [
          0
        ],
        "no-underscore-dangle": [
          0
        ],
        "no-plusplus": [
          0
        ],
        "class-methods-use-this": [
          0
        ],
        "react/jsx-no-bind": [
          0
        ]
    }
};

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

  • Redux使う時
mkdir src src/actions src/reducers src/components src/constants src/saga src/models src/libs src/assets
touch ./src/configureStore.js
touch ./src/App.js
  • Redux使わない時
mkdir src src/components src/constants src/models src/libs src/assets
touch ./src/App.js

5. 最低限のファイル作成

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

Reduxを使う場合はファイル多いので省略。

下記はRedux使わない場合。

index.ios.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react';
import {
  AppRegistry,
} from 'react-native';

import App from './src/App';

const SampleApp = () => (
  <App />
);

AppRegistry.registerComponent('SampleApp', () => SampleApp);
/src/App.js
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Root from './components/RootScreen/index';

const App = () => (
  <Router>
    <Scene key="root">
      <Scene key="home" component={Root} title="SampleApp" initial />
    </Scene>
  </Router>
);

export default App;
src/components/RootScreen/index.js
import React from 'react';
import {
  View,
  Text,
} from 'react-native';

class Root extends React.Component {
  render() {
    return (
      <View>
        <Text>Test</Text>
      </View>
    );
  }
}

export default Root;

Simulator Screen Shot 2017.08.11 10.03.17.png

サンプル

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

YuheiNakasaka/react-native-redux-saga-stopwatch

参考リンク