## はじめに
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プロジェクト作成

以下のコマンドでプロジェクトを作成します。
![img](/mosaic-code.jpg)

プロジェクトを起動するには以下のコマンドになります。
![img](/mosaic-code.jpg)

起動すると、ターミナルに以下のような表示がされます。
![スクリーンショット 2023-09-23 11.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/57fe6f84-98a9-2f41-b85c-04ebd06f664f.png)



表示されたQRコードを読み込むと、Expo Goが起動し、開発中の画面がスマホ上で見られるようになります。
☟
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8be7569b-6094-16cc-eef4-d659ff9ed24b.png)

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

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

https://reactnative.dev/docs/environment-setup

https://docs.expo.dev/get-started/installation/

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

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

## はじめに
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
```

起動すると、ターミナルに以下のような表示がされます。
![スクリーンショット 2023-09-23 11.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/57fe6f84-98a9-2f41-b85c-04ebd06f664f.png)



表示されたQRコードを読み込むと、Expo Goが起動し、開発中の画面がスマホ上で見られるようになります。
☟
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/8be7569b-6094-16cc-eef4-d659ff9ed24b.png)

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

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

https://reactnative.dev/docs/environment-setup

https://docs.expo.dev/get-started/installation/

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

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11


はじめに

React Nativeとは

続きを読むには単価診断を受けてください（30秒）