Help us understand the problem. What is going on with this article?

ReactNativeはじめの一歩(Create React Native App)

More than 1 year has passed since last update.

できること

実機を使ってライブデバッグをしながらアプリを開発出来る環境を簡単に作る事が出来ます。
『Create React Native App』というFacebookとExpoで共同開発したという、環境構築ツールを利用します。
また詳しくは書きませんが、『Expo SDK』を使うと、開発版の簡易リリースが出来ます(開発版DL用のURLが発行される)。気軽に、開発したものを他人に見せる事が出来るので便利です。

やったこと

  • インストール
    • Node.js & npm
    • npmダウングレード
    • watchmanの導入
  • 実機でのライブデバッグ
  • Hello World

※ 環境は、mac & ios :apple:

インストール

Node.js & npm

公式ドキュメントではまずNodeを入れよと書いてあるので、
nodebrewを使って最新版のNode.jsをインストールします。

nodebrew導入

$ curl -L git.io/nodebrew | perl - setup
$ vi .bashrc
  export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source .bashrc
$ echo $PATH
$ nodebrew help
  nodebrew 0.9.7

Node.js

Node.jsの最新版を確認します。
こちらにバージョンについて書かれていますが、この時点では、
LTS(長期サポート版)がv8.9.1、最新版がv9.0.0となっていました。
特に業務で使うものでないので、せっかくなのでv9.0.0にします。

$ nodebrew ls-remote
v8.0.0    v8.1.0    v8.1.1    v8.1.2    v8.1.3    v8.1.4    v8.2.0    v8.2.1
v8.3.0    v8.4.0    v8.5.0    v8.6.0    v8.7.0    v8.8.0    v8.8.1    v8.9.0
v8.9.1    

v9.0.0

ということで9.0.0をインストール

$ nodebrew install-binary v9.0.0
Fetching: https://nodejs.org/dist/v9.0.0/node-v9.0.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

currentがnoneなので、

$ nodebrew ls
v9.0.0
current: none

9を使うように設定してやります。

$ nodebrew use v9.0.0
use v9.0.0

$ nodebrew ls
v9.0.0
current: v9.0.0

// こちらもOK
$ node -v
v9.0.0

// Node.jsと一緒にnpmも入ります
$ npm -v
5.5.1

npm (Node Package Manager)も一緒に入りますので、このコマンドで諸々インストールしていきます。

npmのダウングレード

現時点でnpm 5系は、React Nativeでは使えないという問題があるらしく、
4系にダウングレードします :thumbsdown:

$ npm -v
5.5.1

$ npm install -g npm@4.6.1
/Users/me/.nodebrew/node/v9.0.0/bin/npm -> /Users/me/.nodebrew/node/v9.0.0/lib/node_modules/npm/bin/npm-cli.js
+ npm@4.6.1
added 32 packages, removed 193 packages and updated 267 packages in 9.173s

$ npm -v
4.6.1

watchmanのインストール

さて、このまま作業を進めると、下記のエラーに遭遇することになると思うので、ここで watchmanを入れておきます。

エラー
Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

インストール方法 にも書いてある通りに以下でインストールします。

$ brew update
$ brew install watchman

ReactNativeのインストール

Create React Native App インストール

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

プロジェクトの作成とビルトインサーバーの起動

$ cd 自分の/好きな/ディレクトリ
$ create-react-native-app MyProject

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  npm run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  npm run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd MyProject
  npm start

Happy hacking!

npmコマンドの説明と、次にするべきことが出力されてくるので、そのとおりに npm start してみます。

$ cd MyProject
$ npm start

スクリーンショット.png

実機での確認

iPhoneでの例になりますが、App Storeから 『Expo App』をインストールします。開発中はこのアプリ上で動作確認をしながら進めます。

また、iPhoneとPCを同じWifiに接続しておきます。
出力されたQRコードをアプリで読み取ると、アプリ起動リンクが表示されるので、押下して起動。

App.js にべた書きされた文章が出てくれば完了です。

続いてチュートリアルに沿ってべた書き文章を Hello world に書き換えて保存をすると、アプリ側がローディングして変更が反映されます。

参考

yotsak83
web application engineer, painter. php/javascript/scala
https://twitter.com/yews83
fancs
日本最大規模の広告配信プラットフォームを開発しているアドテクノロジーエンジニアチームです
https://www.fancs.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした