Reactの環境構築(MacOS)

Coding

Windowsはこちら

1. homebrewとnodebrewのインストール

homebrewをインストールする(入っていればやらなくていい)

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
% brew -v

nodebrewをインストール

% brew install nodebrew

以下のコマンドでバージョンが表示されればOK

% nodebrew -v
nodebrew 1.1.0

2. node.jsのインストール

インストール可能なバージョンの表示

% nodebrew ls-remote

今回は試しに以下のバージョンをインストール

% nodebrew install 12.16.1
% nodebrew use v12.16.1
% nodebrew ls

currentがv12.16.1となっていればOK

※Node.jsのインストール時に以下のようなエラーが出た場合

Fetching: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/whoami/.nodebrew/src/v7.10.0/node-v7.10.0-darwin-x64.ta
Warning: r.gz: No such file or directory

curl: (23) Failed writing body (0 != 941)
download failed: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz

フォルダがないので、以下のコマンドを実行してフォルダを作成する

% mkdir -p ~/.nodebrew/src
Node.jsのインストールに失敗する時の解決策(No such file or directory) - Qiita
nodebrewを使ってNode.jsのインストールに失敗した時の解決策です。#Node.jsのインストールに失敗HomebrewでNode.jsをインストールする場合、バージョン管理のできるn…

3. PATHを通す

shellの種類を確認する

% echo $SHELL
  • zshの場合(/bin/zsh)
    ホームディレクトリのシェルのプロファイルを確認
% ls -la | grep .zsh

.zsh_profileか.zshrcか.zprofileがあるのであるやつの一番下に以下コマンドで追記する

% echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.zshrc
% source ~/.zshrc

以下のコマンドで.nodebrew/current/binを含むディレクトリがあればおk

echo $PATH

  • bashの場合(/bin/bash)
    コマンドはほとんど同じだが.zshrcとなっているところが.bash_profileまたは.bashrcとなる
    パスが通ってるかの最終確認のため、コマンド打ってみる
% node -v

バージョンが表示されること

% which node

先程追加したパスが表示されること(nodeコマンドが置いてある場所を指している)

4. create-react-appする

試しにサンプルプロジェクトを作成してみる。以下はVSCode というフォルダの下にreact-sampleというプロジェクトを作成する例

プロジェクトを生成するディレクトリに移動する

% cd ~/VSCode
% npx create-react-app react-sample

5. IDEから開いてbuildする

IDEでターミナルを開いて以下のコマンドを入力

% npm run build
% npm start

ブラウザが開いて初期画面が表示される

done!

この記事を書いた人

渋谷で働くよわよわエンジニア。TypeScript(Next.js/Node.js)/Golang/AWS/Flutterなど
LINE API Expert(2023/1~)

tokkuをフォローする
オススメ記事
在宅ワークが多くなって、デスクの配線周りに困っている方は、拡張デスクの導入がおすすめです。Windows/MacOS/Linuxの複数の機器をスッキリとデスク周りに収める事ができました!リモートからサーバーメンテを行うインフラエンジニアは必見です!
Coding
tokkuをフォローする
インフラエンジニアがもがくブログ

コメント

タイトルとURLをコピーしました