react nativeのプロジェクトを作成する

react nativeで開発を進める上で必要な環境を整えます。

react nativeプロジェクトを新規で作成する際に入力するコマンドは以下の二つあります。

$ react-native init プロジェクト名
$ create-react-native-app プロジェクト名

初心者からすると最初にwebpackの設定とか、ほにゃららの設定とか色々やって自分好みの環境にするっていうことよりもとりあえず手っ取り早くアプリを作りたいって人が多いですよね。

create-react-native-appは諸々の設定をとりあえずやってくれたreact native プロジェクトを作成してくれます。 こちらはexpoと呼ばれるreact nativeでの開発をサポートしてくれるツールを提供する環境、サービスの一部でもあります。

react nativeの公式ドキュメントでもこちらのやり方でチュートリアルが進められているので怪しくはない、と思う。

というか初心者のスタンダードなのでは?というくらい簡単にプロジェクトが立ち上げれます。

create-react-native-appまで


nodeJSをインストール済み(v8.4.0)。

create-react-native-appをインストール

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

ここでもしnpm5を使っている人がいたら、エラーになります。(2018/02/08時点) 僕はなりました汗

yarnでのinstallすることをお勧めされたのでyarn自体をinstallしましたー Installation | Yarn

調べてみるとyarnの方がnpmでインストールするより早いみたいです! Yarnとnpmの違い:JavaScriptパッケージマネジャーを比較する - WPJ

改めてcreate-react-native-appをインストールします(globalで)

//npmの方
$ npm install -g create-react-native-app
//yarnの方
$ yarn global add create-react-native-app

globalでインストールすることによってどの階層(デスクトップ、書類などなど)にいてもcreate-react-native-app プロジェクト名 をすることによってreact nativeアプリを作成することができるようになります。

ここでexpoアプリをスマホにインストールしていれば、npm startをすることによってexpoアプリを通してアプリを開くことができます。

もうreact nativeでアプリを開発する準備は完了です!

参考はこちら GitHub - react-community/create-react-native-app: Create a React Native app on any OS with no build config.