React NativeでHello World（環境構築～サンプルアプリ立ち上げまで）

過去にReact Nativeの環境構築はしたことがあるが(react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。

Expo Goの利用

モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。

React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。また初めてであれば環境構築に1時間を要することになる。

ということで、迷うことなくExpo Goを採用した。

開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。

npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

ただ今回はリポジトリ作成済みでディレクトリが存在していたので、

npx create-expo-app $(pwd)

上記コマンドで現ディレクトリにAppを展開した。

そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、

npx expo start

上記コマンドで開発サーバーを立ち上げた。

エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。

次に、

<Text>Open up App.js to start working on your app!</Text>

を

<Text>Hello World!</Text>

に変更すれば、当然、Hello World!が表示される。

これでReact Nativeでスマホを開発するスタート地点に立った。