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

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

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

2021年4月27日 ReactNativeとは何かをわかりやすく解説

環境構築

リファレンス: 公式ドキュメント

ReactNativeを動かすための環境を作っていきます。

ローカル環境作成

JavaScriptを動かすためのNode.jsとデバッグに必要なWatchmanをインストールしていきます。

ターミナルでコマンドを入力していきます。

Node.jsをインストール

$ brew install node

watchmanをインストール

$ brew install watchman

XcodeとAndroidStudioをインストール

続いて、Xcodeと、AndroidStudioのインストールを行います。

それぞれ公式のドキュメントを参考に、インストールしてください！

Xcodeインストール

参考 XcodeAppStore

AndroidStudioインストール

参考 AndroidStudioAndroid Developers

最後にcocoapodsというiOSのライブラリ管理ツールをインストールします。

cocoapodsインストール

$ sudo gem install cocoapods

これでローカル環境の準備は完了です！

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

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

ターミナルを開き、適当なディレクトリを作成していきましょう。

ホームディレクトリに戻り、ディレクトリを作成(名前は任意です)

$ cd ~ && mkdir react-native-projects && cd react-native-projects

アプリ作成

アプリを作成(名前は任意です)

$ npx react-native init FirstApp

ReactNativeのバージョンを指定して作成

基本的に最新版を使うと思いますが、バージョンを指定して作成する方法も紹介します。

バージョンを指定して作成

$ npx react-native init FirstApp --version X.XX.X

TypeScriptで作成

TypeScriptを最初から使いたい場合も紹介します。

TypeScriptで作成

$ npx react-native init FirstApp --template react-native-template-typescript

Metroを起動(iOS/Android共通)

アプリが作成できたので、アプリを立ち上げていきます。

まずは、作成したアプリのディレクトリに移動しておきます。

プロジェクトのディレクトリに移動

$ cd FirstApp

次にMetroというJavaScriptバンドラーを起動します。

JavaScriptのファイルを1つのファイルにし、アプリを実行できるようにするものです。

Metroを起動

$ npx react-native start

iOSでビルド

iOSでビルド

$ npx react-native run-ios

Androidでビルド

続いて、Androidでもビルドしてみましょう！

Androidでビルド

$ npx react-native run-android

まとめ

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