最近Reactでアプリ作って遊んでいるのですが、Webフロントエンド界隈の混沌は まじで吐き気がするなあ と思いつつハマって抜け出せなくなりつつあります（ダブルミーニング）。
特に自分にとっては、プロジェクトを作る方法が名前が似てるけど全然別物だったり、前準備が多すぎでげんなりしていたので、もう迷わないようにまとめておくことにしました。
本来ReactとReactNativeは一緒にして見るようなものでもないですが、意外とやりたいことがかぶっていたりするし、Reactで使っているライブラリをそのままRNに使おうとしてあれっとなったりするので、逆に一緒に勉強したほうがいいんじゃないかと思っています。
開発マシンについて
Mac一択です。
ReactNativeでiOS開発するならどっちにしろMac必須ですし、各種コマンドの親和性を考えるとどうやってもMacになります。
以下、全部Mac前提の手順です。
あと node とか npm、yarn を使えるのも前提です。
※実装を始める前に覚えなくてはいけないツールが多いのは、最近のJavascript開発の闇だと思います。本当に。（npm, webpack, typescript, babel, etc...）
React
Webブラウザで動かすJSアプリを書くためのFacebookフレームワークです。
Fluxの概念がかっこよくて 内心マウントとりやすい ので人気があります。（違）
Create a New React App – React
CDNからReact本体のJavascriptを読み込む
HTMLをブラウザで読み込んだあと、scryptタグでReactのJSを読み込む方法です。
最初に紹介しといてアレですが まず使わない ので、できますよってことだけ書いて起きます。
試したい場合は公式サイトのチュートリアルをどうぞ。
Add React to a Website – React
nodeを使ったことがない方はこの方法を使うしかないけど、今後のためを考えるならnpm使えるようにしておきましょう。
create-react-app コマンド
必要なライブラリからディレクトリ構造、果ては PWAのmanifestファイル まで一発生成してくれる、
まさに「私、React始めました！」のFacebook公式コマンドツール。
npm 5.2.0 以上を使っているなら、npx を通してすぐ使うことができます。
npx create-react-app MyReactApp
npm 6 以上なら npm init コマンドも使えます。
npm init react-app MyReactApp
yarn を使いたい人はどうぞ。
yarn create react-app MyReactApp
作ったアプリは即実行！
cd MyReactApp npm start
GitHub - facebook/create-react-app: Set up a modern web app by running one command.
type-script を使う
「いやーJS生とかないっしょ型前提っしょー」という方も一定数いらっしゃると思う。
もちろんReactでTypeScriptを導入する方法もあります。
まず、TypeScriptの公式サイトでやりかたが載っています。
他にも、MicrosoftのGithubに、--scripts-version オプションを指定して create-app する方法が載っています。
create-react-app my-app --scripts-version=react-scripts-ts
このライブラリはサードパーティ？ なのかよくわかりませんが、使えるものは使っときましょう。
Next.js
サーバサイドレンダリング をするReactアプリを作るフレームワーク。使ったことない。いつか使って見る。
Gatsby
静的サイトでReactを使うときのフレームワーク。
create-react-app となんか違うのかな？
使ったことない。いつか使ってみる。
ReactNative
Reactのプログラム手法でクロスプラットフォームモバイルアプリを作れるという、一見して神のようなフレームワーク。
しかし民泊アプリのAirbnbがアプリでのReactNative利用をやめたり、何かときなくさいモノだったりします。
expo-cli (旧 create-react-native-app)
GitHub - expo/expo-cli: Tools for making Expo apps
元はcreate-react-native-app というコマンドラインでしたが、こちらはアーカイブされて expo-cli がメインになったようです。
元のほうの名前が create-react-app と同じような名前なので勘違いしてしまいますが、Facebook公式ではないっぽい（？）。
Expo というSDKの上で動くReactNativeプロジェクトが生成されます。
モバイル端末実機で動かす際もちょっと特殊で、アプリストアからExpoアプリをインストールし、プロジェクトから npm run して表示されるQRコードを読み込んでアプリを動かします。
Xcodeの設定とかもいらないので、この方法なら MacでなくてもiOSで動くアプリを作れます。
ただし、Expoフレームワークの上で動いているので当然 Expoが対応していない端末機能は使えない し、 最新バージョンのReactNativeではないと考えたほうがいい 。（2018/11/02現在の最新バージョン30では、RN最新0.57ではなく0.55.4がベースになっている。）
ちょろっと動かすにはいいが、OSの最新機能をバリバリ使いたいなら選択肢から外れる方法だと思います。
eject
Expo用に生成したプロジェクトを eject すると、XcodeやAndroidStudio用のプロジェクトが生成され、Expoに縛られない開発ができるようになります。
最初はExpoで画面遷移を作り、ejectしてプラットフォーム依存プラグインを書いて作り込んでいくというフローもアリかもしれない。
eject操作は不可逆 なので気をつけましょう。
react-native-init
AndroidStudio, Xcode用ファイルが含まれるプロジェクトが生成されます。(Expo eject した後と同じです)
ネイティブコードを書く必要がある場合はこちらを選択します。
react-native init MyReactNativeProject
ReactNative + TypeScriptについて
MicrosftがGitHubにサンプルを公開している。
試してない。
react-native-dom
Webフロントエンドフレームワークの概念をReactが昇華させた後、ReactNativeによってモバイルアプリへ黒船来航。
そしてReactNativeが Webへと逆輸入 されました。
ReactNativeのコードをブラウザで動かす という、もう
おまえら何したいねん
と言いたくなるようなプロダクトですが、おおむね好評のようです。よかったですね。（なぜか上から）
使う場合、ReactNativeのプロジェクトを作ったあと、npmでインストールします。
npm install --save-dev rnpm-plugin-dom # or yarn add --dev rnpm-plugin-dom # Add DOM support to your React Native project react-native dom
Expoではないので注意。
ということでReact, ReactNativeの始め方ということでまとめたのですが、
昨今の流れの早さを見ていると 一ヶ月後には使い物にならなくなっていてもおかしくはない です。
こういうの追ってると Unityっていいな と思えてしまうのは錯覚でしょうか。
