Get started React-Native with WebStorm

ReactNative

インターン先でReactNativeを触る機会があったので、ReactNativeのセットアップについて書いていきます。

今回はIDEにWebStormを使います。

話すこと

  • プロジェクトの作成方法と実行方法

話さないこと

  • WebStormの便利機能
  • ReactNativeの実装方法

プロジェクト作成方法の種類

主に２つに分けられると思います。

  1. react-native initで作成する。
  2. create-react-native-appで作成する。(expoを使う。)

この２つのプロジェクト作成の仕方について書いていきます。

メリット・デメリット

react-native init

標準で用意しているProjectの作成方法です。android, ios それぞれのファイルが用意されるので、 react-native run-ios (run-android) とコマンドを打てば実行することができます。

ちなみにWebStormでReactNativeのプロジェクト作成を行うと、この方法で作成されます。

メリット

  • WebStormのRunで実行できる。

デメリット

  • コード変更ごとにRunしなければいけない。
  • iOS実行(リリース)のためにはMacOSでなければいけない
  • ビルドがやや遅い

create-react-native-app

FacebookとExpoのReactにおけるcreate-react-appのReactNative版。 Expoを使っているので、Xcode / AndroidStudioを使う必要がない。

メリット

  • 変更がリアルタイムで反映される
  • MacOSでなくてもiOSでの実行(リリース)ができる
  • Expo SDKが様々な機能を提供してくれている。

詳しくは下記の記事を読んでみてください。

ducklings.hateblo.jp

デメリット

  • WebStormのRunで実行できない
  • 実行に少し手間がかかる
  • iOS / Androidのコードが一切かけない。 Bridgeできない。

プロジェクト作成の仕方

それぞれのプロジェクト作成の仕方と実行方法について書いていきます。

共通

nodebrew

nodeのバージョン管理ができるtoolです。nodeをすでにインストールしている場合は飛ばして構わないです。

brew install nodebrew
echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bash_profile
source ~/.bash_profile
nodebrew setup
brew uninstall node
nodebrew install-binary stable (or latest)
nodebrew use stable (or latest)

watchman

ReactNativeのアプリをビルドするのに使います。

brew install watchman

react-native-cli

react-native ~というコマンドを使うためのものです。

npm install -g react-native-cli

react-native init

Android Studio env

Androidで実行するためにPATHを通す必要があります。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH

作成 & 実行

Terminalで実行する際は、react-native start, react-native run-ios/androidをする必要があります。

WebStormで実行する際は公式のヘルプを参考にしてください。

react-native init <Project_name>
cd <Project_name>
npm install
react-native start --reset-cache &
react-native run-ios

pleiades.io

create with create-react-native-app

作成 & 実行

npm install -g create-react-native-app
create-react-native-app <Project_name>
cd <Project_name>
npm install
npm start

それぞれのデバイスで実行する。

終わり。

参考

React NativeでiOSアプリをリリースビルドする

Expo ではじめる ReactNative 開発環境

node.jsのversionを管理するためにnodebrewを利用する

終わりに

今回、どうしてもRunボタンを使って実行したくて色々調べたのですが、Expoで実行した方がはるかにメリットがあると調べていて気づきました。

プロジェクトの作成の仕方によって実行の仕方も変わるということに気付かず、結構な時間を使ってしまいました。

Runボタンは飾りやったんやな....