React Native starter different

ReactNativeを始めるにあたって、雛形を作成する手段がいくつかあります。

• create-react-native-app（公式サイト掲載）
• react-native init（公式サイト掲載）
• exp init（非公式）

実際に構築して、それぞれにどういう違いがあるのか調査してみました。

なお、今回の検証で利用したコードは以下のリポジトリに置いていますので、ご自由にご利用下さい。

ReactNativeStarter

また、本記事作成にあたっては、それぞれの公式サイトを参考にしました。

• Getting Started · React Native
• Installation - Expo Documentation

create-react-native-app

# install
$ npm install -g create-react-native-app
$ create-react-native-app RNAppWithCreateReactNativeApp

# create-react-native-app version
$ create-react-native-app --version
create-react-native-app version: 1.0.0

# structure
$ tree RNAppWithCreateReactNativeApp/ -L 1
RNAppWithCreateReactNativeApp/
├── App.js
├── App.test.js
├── README.md
├── app.json
├── node_modules
├── package.json
└── yarn.lock

Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.

フォルダ構成、ドキュメントを見る感じ、実質expoを利用した開発を行う場合の雛形になる感じですね。expoは以前触ったことがあるんですが、ネイティブコードは全く書かない場合にはexpoの方がシンプルで良い印象。

個人開発であればおそらくネイティブコードは書かないように設計/実装していくと思うので、こちらの方が良さそう。

ただ実務案件ベースで考えると、要件によってはネイティブコードも書かないといけない場面に直面しそうな気がしていて、それを考えるとexpoベースじゃない方がいいかな、という判断。

react-native init

# install
$ npm install -g react-native-cli
$ react-native init RNAppWithReactNativeInit

# react-native version
$ react-native --version
react-native-cli: 2.0.1

# structure
$ tree RNAppWithReactNativeInit/ -L 1
RNAppWithReactNativeInit/
├── App.js
├── android
├── app.json
├── index.js
├── ios
├── node_modules
├── package.json
└── yarn.lock

これが王道のReactNativeの作り方ですね。iOS独自の、Android独自の、とかがある場合には、これを使いことになるんじゃないかと。

今はある程度ReactNative側で対応されてそうなので、そんなに独自処理を書くって部分は無いかも？このへんは実際に書いていかないとわかんないなぁ。

exp init

# install
$ npm install exp --global
$ exp init RNAppWithExpo

# exp version
$ exp --version
52.0.3

# structure
$ tree RNAppWithExpo/ -L 1
RNAppWithExpo/
├── App.js
├── app.json
├── assets
├── node_modules
└── package.json

こちらはフルフルでexpoに頼り切った開発をする際に使う感じになるかと思います。expoを触った所感は上記の通り。

どれを使うのがベターか？

実務ベースで考えて、react-native initが個人的にはオススメ。

（未検証だけど）react-native initで作成してもexpoでの配布はできるだろうし、とりあえずやってみるという状況下であれば、react-native initで進めた方が無難かと。テストもデフォルトで設定されてるし。

もしこの辺の知見のある方いらっしゃればコメントください:D