最近話題のReactNativeですが、ハッカソンを控えている関係もあって、どんなものか試してみました。
記事は随時更新されていく予定です。
※この記事の内容は、公式ドキュメントのまとめになります。
- 必要なもののインストール [WIP]
- The Basics
必要なもののインストール [WIP]
（TODO: 公式ドキュメントでは趣旨からそれるため割愛されている部分をそのうちメモっておかなければならない）
brew install node brew install watchman
The Basics
Getting Started
create-react-native-appのインストール
ReactNativeのプロジェクトを作成するには、create-react-native-appというnpmパッケージを利用すると非常に楽です。
※ちなみに、既存のネイティブアプリにReactNativeを導入したい場合は、Getting Startedの「Building Projects with Native Code」をご覧ください。
以下コマンドを実行してインストールします。
npm install -g create-react-native-app
プロジェクトの作成
ReactNativeプロジェクトを作成するには、以下コマンドを実行します。
この場合は、現在いるディレクトリに「HelloWorld」という名前でプロジェクトフォルダが作成されます。
create-react-native-app HelloWorld
インストールが正常に完了すると、以下のような説明がでてきます。
Success! Created HelloWorld at /Users/Hoge/fuga/HelloWorld
Inside that directory, you can run several commands:
yarn start
Starts the development server so you can open your app in the Expo
app on your phone.
yarn run ios
(Mac only, requires Xcode)
Starts the development server and loads your app in an iOS simulator.
yarn run android
(Requires Android build tools)
Starts the development server and loads your app on a connected Android
device or emulator.
yarn test
Starts the test runner.
yarn 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 HelloWorld
yarn start
Happy hacking!
上記ログにはyarnを使うような説明になってますが、npmでも同様に実行できます。
実行
プロジェクトを作成したら、試しに実行してみましょう。
実機ブラウザ上で実行する場合
以下コマンドを実行すると、サーバーが起動しアクセスを受け付けるようになります。
cd HelloWorld npm start
コマンドのログと一緒にQRコードが表示されます（すごい）。
これをPCと同じLAN上にいるスマホで読み取り、ブラウザで開きます。
シミュレーター上で実行する場合
実行にはmacOS環境が必要です
cd HelloWorld npm run ios
cd HelloWorld npm run android
Learn the Basics
React NativeはReactのようですが、Webコンポーネントの代わりにネイティブコンポーネントを使用しています。React Native appについて理解するには、Reactの基本的な概念（JSXやコンポーネント、
state、propsなど）について知っておく必要があります。すでにReactについて知っていたとしても、ネイティヴコンポーネントなど、React Native特有のものについても知っておく必要があります。このチュートリアルは、Reactの経験の有無に関係ないすべての人向けです。
Hello World
まずはおなじみのHelloWorldから。
import React, { Component } from 'react;
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
※公式サイトにはWebシミュレーターがあるので、直接動作が確認できます。
What's going on here?
[WIP]
Components
[WIP]
このアプリ、あんまイケてないよね
「いいセンスだ。コンポーネントにもっと面白いことをさせるには、
Propsについて学ぶといい。」
Props
[WIP]
State
[WIP]
Style
[WIP]
Height and Width
[WIP]
Layout with Flexbox
[WIP]
Handling Text Input
[WIP]
Handling Touches
[WIP]
Using a ScrollView
[WIP]
Using List Views
[WIP]
Networking
[WIP]
More Resources
[WIP]
