68
66

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React Nativeを触ってみた

Last updated at Posted at 2015-03-26

朝起きたらこんなページを見つけたので15分だけ触ってみた。
基本的な導入は以下にあるが、ここでは最低限動くまでメモ。

1. 準備

React Nativeを動かすには、最低限nodereact-native-cliが必要になる。
上記をインストール後、react-native initでプロジェクトを作成する。

$ brew install node
$ npm install -g react-native-cli
$ react-native init AwesomeProject

作成されるディレクトリの概要は以下のとおり。

$ cd AwesomeProject
$ tree -L 2
.
├── AwesomeProject.xcodeproj
│   ├── project.pbxproj
│   ├── project.xcworkspace
│   ├── xcshareddata
│   └── xcuserdata
├── iOS
│   ├── AppDelegate.h
│   ├── AppDelegate.m
│   ├── Base.lproj
│   ├── Images.xcassets
│   ├── Info.plist
│   └── main.m
├── index.ios.js
├── node_modules
│   └── react-native
└── package.json

9 directories, 7 files

2. 実行

  1. AwesomeProject.xcodeprojをXcodeを開く
  2. cmd+RでRunする

すると、以下のようにシミュレータが立ち上がる。

react-native.png

3. 編集

  1. index.ios.jsを編集する
  2. Xcode上でcmd+RでRunする

4. 所感

15分どころか、ものの3分もあれば実行まで確認できた。
次はチュートリアルを見ながらなにかつくってみる。

68
66
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
68
66

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?