Reactの環境構築

はじめに

プロジェクトでReactを触るため環境構築自分で行い、理解を深める目的で書きます。

今回の構築方法は以下の流れです。

1. nvmをインストール
2. nodeをインストール
3. yarnをインストール

nvmを使ってnodeのバージョンを管理。
nodeに付帯するnpmを使ってyarnを導入。
yarnでパッケージの管理をする。
さらに、yarnでReactのプロジェクトひな形を作成。

環境構築

前提条件

• WSL2でUbuntuを使用
  WSL2にUbuntuを使用する方法はご自身で調べてください。
  (メモ：WSLを使う理由→　一般的に開発端末はWindows＆実際にデプロイする環境はLinux)

以下の作業はすべてWSL2のUbuntu下で行います。

$ cd ~ //念のため
$ sudo apt update
$ sudo apt upgrade
$ sudo apt-get install curl

// 以下のサイトに接続し、nvmの最新バージョンを確認する(次のコマンドで使用する)
//https://github.com/nvm-sh/nvm
// 0.39.2の箇所を確認した最新バージョンに置き換えてください
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.39.4/install.sh | bash
//Ubuntuを再起動
$ nvm -v 
$ nvm install v14.20.1 
$ node -v 
$ npm -v 
$ npm install -g yarn
$ npx create-react-app first-project
$ cd first-project
$ yarn start

Nodeのバージョンはページの右側に以下のように記載されています
（2023年7月現在だと v0.39.4）

ブラウザで　http://localhost:3000
に接続し、画面が表示されたら成功
「Ctrl」+「c」 で終了する

nvmのTIPS

$ nvm ls-remote          // インストールできるnodeの一覧を表示
$ nvm install v14.20.1   //  指定したnodeのバージョンをインストールする
$ nvm install stable     //
$ nvm ls                 //インストールされているnodeのバージョン一覧を表示
$ nvm use 14            //使いたいnodeのバージョンに変更する
$ nvm alias default v18  // nodeのデフォルトバージョンを指定