ゼロからのReact Native環境構築 

#はじめに
今回はExpo cliを使ってReact Nativeの環境構築を行っていきます。
環境構築のゴールはシミュレーターに"Open up App.js to start working on your app!"と出ることです。

#目次
1.Node.jsをインストール 
2.シュミレーターをインストール 
3.Expoでプロジェクト作成
4.プロジェクトを起動
#1. Node.jsをインストール 
Node.jsのパッケージ管理システムであるnpmでExpo cliをインストールするので、ローカル環境にNode.jsが入っていない人はインストールしてください。
[Node.js公式](https://nodejs.org/ja/)
#2. シュミレーターをインストール 
スマホアプリを作るにはシュミレーターもインストールする必要があります。
IOSアプリ開発の場合は、「**Xcode**」（Macユーザーのみ）
Androidアプリ開発の場合は、「[Android Studio](https://developer.android.com/studio/install)」

###Xcodeの設定
MacユーザーはApp StoreでXcodeをダウンロードし、**Xcode**->**Preference**からCommand Line Toolsを選択してください。
![スクリーンショット 2020-07-09 17.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/510cfad0-2d15-1751-9344-ca39ed2f5933.png)
そして、Componentsから一番最新のSimulatorをインストールしてください。
ここでXcodeの設定は完了です。
![スクリーンショット 2020-07-09 17.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/78347507-17f2-720b-fea6-c877f570eb24.png)
###Android Studioの設定
Android Studioを起動し、⚙ConfigureからSDK Managerを選択し、以下の写真のようにパッケージが選択してあれば大丈夫です。
![スクリーンショット 2020-07-09 18.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/6c0e3451-5ace-1997-add6-baabf093a89b.png)
![スクリーンショット 2020-07-09 18.05.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/7f158243-f33c-c506-c1d4-b881437332be.png)
Windowsユーザーはここで設定完了です。以下からは**Macユーザー**だけの追加設定をしていきます。
####pathの設定（Macのみ）
ターミナルを開いて、以下のコマンド入力します。

```
cd ~/.bash_profile
```
次に、Android StudioのSDK ManagerのAndroid SDK Locationに書かれているpathを以下のようにコマンドする。

```terminal:.bash_profile
export ANDROID_SDK=/Users/kajigaya/Library/Android/sdk
export PATH=/Users/kajigaya/Library/Android/sdk/platform-tools:$PATH
```
最後に、.bash_profileに追加したpathを.zshrcを開いて、コピペする。

 [Macユーザーのpath設定](https://docs.expo.io/workflow/android-studio-emulator/)
####AVD Managerの設定
Android studioの⚙ConfigureからAVD Managerを選択し、+Create Virtual Deviceを選択します。![スクリーンショット 2020-07-10 10.19.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/35ed7758-68db-3f6c-e7d1-166129b2ddaa.png)
使用したいハードウェアを選択し、**Q Download**でダウンロードを開始し、完了です。
(使用するときは、使いたいハードウェアの▶️ボタンを押します)
![スクリーンショット 2020-07-10 10.21.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/178f8492-3757-05a8-0275-7e94f032b285.png)

#3. expoでプロジェクト作成
今回は、ディスクトップにプロジェクトを作成したいので、ディスクトップに移動し、npmでexpoをインストールします。

```
cd ~/Desktop
```

```terminal:Desktop
npm install -g expo-cli
```

expoをインストール完了したら、expoでプロジェクトを作成します。

```terminal:Desktop
expo init プロジェクト名
```
インストール中、いろいろと選択する必要がありますが、基本的にEnterで構いません。
#4.プロジェクトを起動
まず、作成したプロジェクトに移動します。そこでプロジェクトを立ち上げます。

```terminal:プロジェクト名
cd ~/Desktop/プロジェクト名
npm start
```
ブラウザが立ち上がり、Run on iOS simulatorを選択します。
![スクリーンショット 2020-07-10 12.41.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/f7f2ba2c-fd5f-5e50-9327-2e5d7688a3b1.png)
このような画面が立ち上がれば環境構築完了です。![スクリーンショット 2020-07-10 18.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669290/245ad890-016e-ccc3-b459-8ba77e115111.png)
お疲れ様でした。


#参考資料
[React Native公式](https://reactnative.dev/)
[Expo公式 MacユーザーのためAndroid Studioの設定](https://docs.expo.io/workflow/android-studio-emulator/)
[Android Studio公式　Android Studioのインストール方法](https://developer.android.com/studio/install)