41
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VScodeでReact開発環境構築

Last updated at Posted at 2020-06-10

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

[nvm + Node.js + npmのインストール]
(https://qiita.com/sansaisoba/items/242a8ba95bf70ba179d3)
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
41
51
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
51

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?