React Native入門 プロジェクト作成まで

はじめに

React Nativeの環境構築の手順や、基礎知識について、メモ代わりに書いていきます。

React Nativeとは

以下の記事から抜粋しました。
https://vitalify.jp/app-lab/app-development/react-native/

React Nativeとは、Facebook社が開発したアプリケーションフレームワークでクロスプラットフォームのひとつです。React Nativeを用いることでiOS、Android、Windows、macOSなど、異なるプラットフォームのアプリを同時開発することができます。なお、React Nativeの開発言語にはJavaScriptが用いられています。

Reactは、UIを構築するためのJavaScriptライブラリで、2012年にFacebookのソフトウェア・エンジニアが開発したものになります。社内で開発された後には、Facebook.comやInstagram.com等にも導入されています。

つまり、React NativeはスマホアプリをReactの記法で開発できる、クロスプラットフォームというわけです。

Expoについて

Expoは、モバイルアプリケーションの開発を簡素化し、高速化するためのフリーかつオープンソースのツールキットです。Expoを使用することで、React Nativeをベースにしたモバイルアプリケーションの開発プロセスをより容易にし、開発者がアプリケーションのコードに集中できるようになります。

Expo Goをインストール

プロジェクトを作成する前に、「Expo Go」というアプリをインストールしておきます。
こちらのアプリは、開発を進めていくうえで、自分のスマホなどで、実際に画面を表示しながら進めることができます。
(ホットリロード)

以下のページからインストールできます。
https://expo.dev/client?utm_source=google&utm_medium=cpc&utm_content=performancemax&gclid=Cj0KCQjw06-oBhC6ARIsAGuzdw3Z7Sy9AxlswqgliozgKLzDlTTQ0e1rfsd26eYV_g-9bVdJjwWIUu8aAnCKEALw_wcB

React Nativeプロジェクト作成

以下のコマンドでプロジェクトを作成します。

npx create-expo-app SampleProject

プロジェクトを起動するには以下のコマンドになります。

cd SampleProject
npx expo start

起動すると、ターミナルに以下のような表示がされます。

表示されたQRコードを読み込むと、Expo Goが起動し、開発中の画面がスマホ上で見られるようになります。
☟

この画面はApp.jsファイルのコードが反映されています。
コードを変更してみると、ホットリロードで画面の表示が変更されます。

ドキュメント一覧

以下が参考にしたドキュメント類になります。

最後に

他にも記事を書いているので、ぜひ読んでいってください。