igniteでモダンなReactNative環境を楽々セットアップ

f:id:rskull:20171117015447p:plain

react-native init appでアプリを始めても最初はreduxやmiddlewareなど

いつも決まって使うような環境は入っていない

とりあえず試したいけど面倒くさいよ！って時はigniteコマンドを使うと

定番の環境、いわゆるボイラープレートをいい感じに構築してくれる

そうでない人も、個人的にフォルダ構成や書き方は参考になった

github.com

準備

react-native

まずはReactNativeを動かせる環境を作る

Getting Started - React Native

$ brew install node
$ brew install watchman
$ npm install -g react-native-cli

ignite

igniteをインストール

$ npm install -g ignite-cli

igniteコマンドを使うと

対話形式で定番のライブラリを導入するか聞かれていき

最後に全て設定が整ったプロジェクトが生成される

この生成されるボイラープレートには種類があり

下のリンクで配布されている中から -b で指定出来る

ignite/BOILERPLATES.md at master · infinitered/ignite · GitHub

また、自分でボイラープレートを作成することも出来る

ignite/creating-boilerplates.md at master · infinitered/ignite · GitHub

$ ignite new MyNewAppName -b ir-boilerplate

何もなも指定しないと、デフォルトで redux/redux-saga がメインの構成になる

試す

$ ignite new igniteApp

実行した後、いくつか質問されます

Would you like Ignite Development Screens?
- 動いてるサンプルが見たい場合はyes
What vector icon library will you use?
- 用意された様々なiconを表示出来るツールが使いたい場合はyes
What internationalization library will you use?
- 多言語対応したい場合はyes
What animation library will you use?
- 便利なアニメーションライブラリが使いたい場合はyes

とりあえず全部yesにする

f:id:rskull:20171117012631g:plain

すると以下のようなフォルダが生成される

├── App
│   ├── Components
│   ├── Config
│   ├── Containers
│   ├── Fixtures
│   ├── I18n
│   ├── Images
│   ├── Lib
│   ├── Navigation
│   ├── Redux
│   ├── Sagas
│   ├── Services
│   ├── Themes
│   └── Transforms
│
├── README.md
├── Tests
├── android
├── app.json
├── ignite
├── index.js
├── ios
├── node_modules
├── package.json
├── storybook
└── yarn.lock

storybookもデフォルトで設定されてて嬉しい

起動

$ react-native run-ios

f:id:rskull:20171117014902g:plain