【ReactNative開発】Expo×React Nativeの最初のプロジェクトを作成する

こんばんは。今日は、Expo + React Nativeで最初のプロジェクトを作成するまでの手順を残しておこうと思います。こちらの記事はMac OSでの開発を前提としていますが、もしReact Nativeの開発環境がまだ準備されていない場合は、こちらをご参照ください。

React Nativeプロジェクトの作成

まずは、React Nativeプロジェクトの作成を行います。Expoを利用すれば、とても簡単にプロジェクトの作成が行えます。

コンソールで、以下コマンドを実行します。

expo init MyFirstProject

すると、テンプレートプロジェクトが作成されます。

これだけで完了です!

(参考)プロジェクトの構成

ちなみに、テンプレートプロジェクトの構成は以下のようになっています。

cd MyFirstProject
ls -ltr

package.json

package-lock.json

React Native プロジェクトの実行

それでは、プロジェクトを実行してみます。プロジェクトディレクトリ内で、以下コマンドを実行します。

cd MyFirstProject
npm start

すると、エミュレータ画面が立ち上がりましたが、エラーが・・・

コンソール画面にも、”Error running ‘xcrun simctl list devices –json’:xxxx”というエラーが出ています。

他のWebページをみると、どうやらXCode側で事前設定が必要だったみたい。

XCodeを起動し、Preference>Locationsで、CLI (Command Line Tools)を指定すればOKです。

再度コンソールでnpm startを実行し、iOSエミュレータを起動するため、”i”を押すと・・

今度は無事XCodeのエミュレータが立ち上がり、テンプレートアプリが立ち上がりました!

以上、React Nativeアプリを作成し、ローカルで立ち上げるまでの手順でした!

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい!という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・!

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。