JavaScript
reactjs

React Nativeを触ってみた

More than 3 years have passed since last update.

朝起きたらこんなページを見つけたので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分もあれば実行まで確認できた。

次はチュートリアルを見ながらなにかつくってみる。