ReactNativeのGetting Startedをやってみた(翻訳付き)

React Native

なにやらiOS, Androidでコードが共有できるとかどうとか。
以前から気になっていたものの、手が出せなかったのですがGWに入りようやく少し手が空き始めたのと、最近ゆる〜くモバイル関連の案件が入ったので、(ひねくれ者なので)普通にやるのも面白くないと思いまずはReactNativeの調査から始めることにしました。

Getting Startedページの冒頭にはこう書いてあります。

This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the Tutorial.

このページは、はじめてのReact Native appをインストール&ビルドする手伝いをします。もしすでにReact Nativeがインストール済みなら、チュートリアルに進んでね。

はじめてなのでQuickStartやります

Quick Start

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see Caveats).

Create React Native Appは新しいReact Nativeアプリケーションをビルドする最も簡単な方法です。何かしらのツールの設定やネイティブコードをビルドもしなくていい - XcodeとかAndroid Studioとかいらない。(参考 Caveats)

Assuming that you have Node installed, you can use npm to install the create-react-native-app command line utility:

あなたがNodeをインストール済みだとしたら、npm使えると思うからcreate-react-native-appコマンドラインユーティリティいれてね

>>もはや翻訳が横文字<<

npm install -g create-react-native-app

これ、僕はグローバルインストールしたくない派なので、いろんなプロジェクト置いてるディレクトリ projects/みたいなところでnpm initしてnpm install --save-dev create-react-native-appしました。

イラネってなったらnode_modulesディレクトリ削除するだけで済むので…まぁこの辺はどっちでもよさそうですが。

あと大事なことなんですが、nodeがインストール済みという前提がしれっとあるように、書かれていないですがwatchmanが必要なのでbrew install watchmanしてください。

Then run the following commands to create a new React Native project called "AwesomeProject":

そしたら"AwesomeProject(すばらしいプロジェクト)"という新しいReact Nativeプロジェクトを作るために次のコマンド打ってね

create-react-native-app AwesomeProject

cd AwesomeProject
npm start

create-react-native-appはグローバルインストールしなかったので、package.jsonにエイリアス作るかnode_modulesにある実行可能ファイルを直接実行しよう

This will start a development server for you, and print a QR code in your terminal.

こうすると開発サーバーが起動して、QRコードをターミナルに表示するよ。

Running your React Native application

Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.

手持ちのiOSかAndroidにExpoアプリをインストールして、PCと同じワイヤレスネットワークに接続してね。Expoを使って、ターミナルに表示されているQRコードを読み取ってプロジェクトを開こう。

Modifying your app

Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

アプリが正常に動いているだろうから、いじってみよう。App.jsをテキストエディタで開いて、いくつか行を編集してみて。変更を保存したら、アプリケーションが自動で再読み込み仕直すよ。

That's it!

Congratulations! You've successfully run and modified your first React Native app.

おめでとう!React Nativeのアプリを起動して変更することができたね!

といったところか…ぐう簡単

ただ、後の説明や注意(Caveats)を読んでいると、Expoが対応してないネイティブコードを使おうと思ったりした時は、別の手順(Building Projects with Native Code)をやっていかないといけないようなので、そのうち必要となる場合そっちでやったほうがいいようなことが書いてあるのでそういう場合そっちの手順でやったほうがよいということ。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.