始めに

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

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

始めよう

環境構築

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

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

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

1.Node.jsの導入

Node.jsのインストールについては下記記事を参考に進めてください。
Node.jsのインストール

2.Expoの導入

Expoは以下コマンドでインストールすることができます

$npm install -g exp

3.Androidエミュレーターの導入

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

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

4.iOSエミュレーターの導入(macのみ）

こちらについてはXcodeをダウンロードしてれば問題ありません。

構築終了

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

プロジェクト作成

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

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でデバッグしてみましょう。

cd newsLocation && react-native run-ios

すると
terminalが新しく開いて、何やら読み込みを行なっています。
読み込みが終わると

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

最後に

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

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

始めに