【React】Reactの環境構築、Viteを使用したプロジェクトの作成、起動方法

#### はじめに
Reactアプリの環境構築、Viteを使用したプロジェクトの作成、起動方法についてまとめました。

「npx create-react-app」を使用する方法は現在推奨されてないらしく、Viteを使った方法で記載してます。（下記の公式サイトにも載ってない。）
[初心者向けの React のチュートリアル | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/react-beginners-tutorial?source=recommendations)
[はじめに | Vite](https://ja.vite.dev/guide/)


## Node.jsのインストール

#### 参考資料
[Windows 10へNode.jsをインストールする #Windows10 - Qiita](https://qiita.com/echolimitless/items/83f8658cf855de04b9ce)

#### Node.jsのインストールを行う。

+ https://nodejs.org/en
  からLTS版のWindows用のInstallerをダウンロードする。

+ Node.jsインストーラーをクリックすると、インストーラーが開くので、インストールを進める。
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/cf4b62fd-5655-dd3d-535f-17965b3d4eb0.png" width="100">

+ インストール先はデフォルトのままで良いので、そのまま進める。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/5cfb06bd-6769-7e64-0330-68817c1c49be.png)

+ 完了後、コマンドプロンプトから「node --version」「npm --version」を実行して、Node.jsとnpmがインストールされていることを確認できればＯＫ。
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/71ab0dfb-7fab-a6fe-f8c6-d817816f4253.png" width="150">

## VSCode(Visual Studio Code)のインストール

本記事ではエディタはVSCodeを使用する。
公式サイトからWindows版をダウンロードし、インストールする。
https://code.visualstudio.com/Download 
  
## Viteを使ってReactのプロジェクトを作成

#### 参考資料
[初心者向けの React のチュートリアル | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/react-beginners-tutorial?source=recommendations)
[はじめに | Vite](https://ja.vite.dev/guide/)

[ViteでReactプロジェクトを作成する方法](https://www.zenryoku-kun.com/new-post/vite)

#### Reactアプリのプロジェクトを作成する。
①VSCodeからターミナルを開く。ターミナルから、cdコマンドでプロジェクトを作成したい場所（任意のパス）に移動する。
```js
cd {任意の場所}
```

➁　①で指定した場所の配下にReactアプリのプロジェクトを作成する。
+ 以下のコマンドを入力する。
```js
npm create vite@latest
```
※latestは最新版をインストールするという意味。

+ 「Need to install the following packages: create-react-app Ok to proceed? (y)」が表示されるので「y」を入力する。　
+ プロジェクト名に任意の名前を入力する。
この例では「sample-reactproject」と入力。
+ 「Select a framework」が表示されるので、ここでは「React」を選択してEnterを押下する。
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/1f99c76c-6fd7-b5a3-3ecb-4b701d44ec34.png" width="300">

+ 「Select a variant」が表示されるので、ここでは「JavaScript」を選択してEnterを押下する。
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/f49f6ec8-e77a-e6a8-f2a5-5398ba97786e.png" width="300">

+ 以下のような指示が表示される。
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/6e6c0526-667c-37fd-fff1-b3041318582c.png" width="300">

③作成したプロジェクトフォルダに移動する。
Viteの環境で使用するモジュールをインストールする。
+ 以下のコマンドを入力する。
```js
cd {プロジェクトフォルダ名} 
npm install
```
+ 以下の通り、開発に必要なファイルが作成される。
＜フォルダ構成＞
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/6c3e54d8-2926-fa95-8f50-adaa27ad3a63.png" width="200">

#### 開発サーバーを起動する
+ 以下のコマンドを入力する。
```js
npm run dev
```
+ 以下が表示される。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/7aa72ead-685d-7490-8a0b-836c2841b1d2.png" width="250">

+ http\://localhost:5173にブラウザからアクセスすると初期画面が表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/5f92622c-8809-08ef-c0a1-4fdce68bdcb9.png)

+ サーバを停止するときは、「ctrl + c」を押下する。
「Terminate batch job (Y/N)?」と表示されるので「y」を押下する。