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!が表示されれば、立ち上げが成功している。

Hello World !

次に、

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

<Text>Hello World!</Text>

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

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

次に読むおすすめ記事

React NativeでStackNavigatorを使用し一覧から詳細への遷移を実装する

react native でアプリを作る環境構築をやってみるよ⚡

React NativeにTypeScriptを導入する

React NativeでBottom Tabs Navigatorを使用しタブナビゲーションを実装する

React NativeでTailwind CSSを使用したいので、nativewindを導入した

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です