世界で一番簡単なReactNativeの始め方

# 始めに
本記事は、これからReactNativeでiosアプリ,androidアプリを作ろうと思っている方向けの
記事になります。

初学者にわかりやすく書いてますので、ある程度やっている方にとっては
物足りなく感じると思いますが、悪しからず。

# 始めよう
## 環境構築
どんなこともやる前には環境構築が必要になってきます。
ReactNativeも例外ではありません。

ReactNativeの環境構築手順は以下の通りです。

1.Node.jsのインストール
2.Expoの挿入
3.Androidエミュレーターの導入
4.iOSエミュレーターの導入(macのみ）

### 1.Node.jsの導入
Node.jsのインストールについては下記記事を参考に進めてください。
<a href="https://qiita.com/tnatsume00/items/6387e5c78e7aa6e7c3c1#nodejs%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB"target="_brank">Node.jsのインストール</a>

###2.Expoの導入
Expoは以下コマンドでインストールすることができます

```terminal
$npm install -g exp
```

###3.Androidエミュレーターの導入
Androidアプリを作成するにあたり、いきなり実機でのデバッグをする方はいない
と思うので、エミュレーターをインストールします。

下記記事が参考になりますので記事をみて進めてください
https://developer.android.com/studio/install?hl=ja

###4.iOSエミュレーターの導入(macのみ）
こちらについてはXcodeをダウンロードしてれば問題ありません。

###構築終了
以上で、環境構築は終了しましたので、次かプロジェクト作って実際に動かしてみたいと思います。



## プロジェクト作成
プロジェクト作成は、次のコマンドでできます。

```terminal
react-native init [Project Name]
```

必要に応じて[Project Name]の部分は変えてください。
※今回はnewsLocation というプロジェクトを作成しました

コマンドを打って実行すると

```
react-native init newsLocation
warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-maps: https://github.com/react-native-community/react-native-maps#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
                                                          
               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          

                  Welcome to React Native!                
                 Learn Once Write Anywhere                

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Installing CocoaPods dependencies (this may take a few minutes)

  Run instructions for iOS:
    • cd newsLocation && react-native run-ios
    - or -
    • Open newsLocation/ios/newsLocation.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd newsLocation && react-native run-android
```
このような画面が出てきます。

### 実行

最後の部分にiOS、Androidでエミュレータを起動する手順が書かれていますので、
実際に、iOSでデバッグしてみましょう。

```terminal
cd newsLocation && react-native run-ios
```

すると
terminalが新しく開いて、何やら読み込みを行なっています。
読み込みが終わると
<img width="375" alt="Simulator Screen Shot - iPhone X - 2019-09-06 at 11.32.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/f49b3fc6-dcf6-7845-becb-095119b5a57b.png">

このような画像が開いたでしょうか。

# 最後に
ここからご自身で作りたいアプリの構成を考え、実装し、バグが
あればそれの対処を行うというのがアプリ開発の流れになります。
（ストアへの配信もあるが、割愛）