VScodeでReact開発環境構築

はじめに

Macを買い換えたときに、いろいろ忘れていたので備忘録も兼ねて書いていきます。
以下の良記事を参考にしていますので詰まった場合はこちらも読んでみてください。

nvm + Node.js + npmのインストール
create-react-appでyarn startできない(できた)

動作環境
- macOS Catalina 10.15.5
- node.js 12.18.0
- Visual Studio Code 1.45.1

nvmのインストール

はじめにnvmのインストールをします。
nvmとはNode.js のバージョンを切り替えて使うことを可能にするツールのことです。
nvmのGithubはこちら
VScodeのターミナルで以下のコマンドを実行します。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

touch ~/.bash_profile

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Node.js + npmのインストール

次にNode.jsのバージョンを最新のLTSにしておきましょう。
LTSとはLong Term Supportの略で、長期的にメンテナンスするみたいな感じです。

nvm install --lts

nvm use --lts

以下のコマンドを実行して、Node.jsとnpmのバージョンが表示されれば大丈夫です。

node -v
v12.18.0

npm -v
6.14.4

このままだとsshでログアウトして再接続後は有効にならないので、
defaultのバージョンを指定しておきましょう。これでログイン後にすぐ使えます。

nvm alias default lts/*

yarnのインストール

npmでもReactを起動することはできますが、
npmよりもyarnの方がより高速で信頼度の高いものになっているのでyarnを使います。
yarnの詳細はこちら

npm install -g yarn

yarnのバージョンを確認して表示されればOKです。

yarn -v
1.22.4

構築した環境でReactを起動

React開発環境に必要なcreat-react-appをインストールします。

yarn global add create-react-app

次にアプリケーションを作成します。作成する場所はどこでも大丈夫です。

yarn create react-app sample-app

作成したプロジェクト配下に移動し、以下のstartコマンドを実行します。

cd sample-app

yarn start

実行後、ブラウザが起動し、Reactの画面が表示されていればOKです。

yarn startできない

yarn startを実行したが以下のエラーが発生した場合

error Command failed with exit code 1.

以下のコマンドで解決することができました。

npm install npm

yarn add yarn

次に以下のコマンドを実行して何も表示されなければ大丈夫です。

echo $HOST

何か結果が返ってくる場合は以下のコマンドを実行しましょう。

unset HOST

もう一度echo $HOSTを実行してなにも表示されなければ大丈夫です。
これでReactを起動できると思います。

yarn start