【ReactNative入門 】開発環境を作って始める

今回はReactNative入門として開発環境を作って初めてのアプリを作成するところまでを解説します。

ReactNativeでモバイルアプリを開発していくに当たって常に行っていくことなのでぜひ手を動かして実行してみてくださいね。

ReactNativeについて知りたい方はこちらを読んでみてください。

ReactNativeとは何かを解説
バージョン
  • macOS: 10.15.5

環境構築

ReactNativeを動かすための環境を作りましょう。

ローカル環境作成

まずはTerminalを開き、JavaScriptを動かすためのnodeとデバッグに必要なwatchmanをインストールしましょう。

$ brew install node

$ brew install watchman

次に、react-nativeコマンドを使えるようにするために、npmモジュールをインストールします。

$ npm install -g react-native-cli

XcodeとAndroidStudioをインストール

最後に、Xcodeと、AndroidStudioのインストールを行います。

参考 XcodeAppStore 参考 AndroidStudioAndroid Developers

これで準備完了です。

はじめてのアプリ作成(ビルド)

それでは初めてのアプリを作ってみましょう!

適当なディレクトリにターミナルで移動してください。

$ cd ~(ホームディレクトリに戻ります)

$ mkdir react-native-projects(ディレクトリを作成。名前は任意です!)

$ cd react-native-projects(先ほど作ったディレクトリに移動。)

$ react-native init FirstApp(FirstAppの箇所はアプリ名なのでお好きなものを!)

プロジェクトのディレクトリに移動しておきましょう。

$ cd FirstApp(FirstAppの箇所は作成したアプリ名)

iOS

$ react-native run-ios

このようにシュミレーターが立ち上がれば完了です。

Android

$ react-native run-android

こちらも同様に立ち上げればオッケーです!

最後に

ReactNativeの開発環境構築から、はじめてのアプリ作成までを行いました。

エラー等でつまったりした場合は、コメントにてご質問ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です