React Native入門 プロジェクト作成まで
はじめに
React Nativeの環境構築の手順や、基礎知識について、メモ代わりに書いていきます。
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」というアプリをインストールしておきます。
こちらのアプリは、開発を進めていくうえで、自分のスマホなどで、実際に画面を表示しながら進めることができます。
(ホットリロード)
以下のページからインストールできます。
React Nativeプロジェクト作成
以下のコマンドでプロジェクトを作成します。
npx create-expo-app SampleProject
プロジェクトを起動するには以下のコマンドになります。
cd SampleProject
npx expo start
起動すると、ターミナルに以下のような表示がされます。
表示されたQRコードを読み込むと、Expo Goが起動し、開発中の画面がスマホ上で見られるようになります。
☟
この画面はApp.jsファイルのコードが反映されています。
コードを変更してみると、ホットリロードで画面の表示が変更されます。
ドキュメント一覧
以下が参考にしたドキュメント類になります。
Discussion