Help us understand the problem. What is going on with this article?

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

始めに

本記事は、これから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が新しく開いて、何やら読み込みを行なっています。
読み込みが終わると
Simulator Screen Shot - iPhone X - 2019-09-06 at 11.32.39.png

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

最後に

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした