【M1 Mac】React開発環境の構築

【M1 Mac】React開発環境の構築





React開発環境の構築方法をまとめます。



実行環境

  • 以下の通りM1 MacでHomebrewをインストール済であることを前提としています。
・ M1 Macbookpro
・ Homebrewはインストール済

大まかな流れ

nodebrewのインストール

  • まずはHomebrewを使用してnodebrewをインストールします。
terminal
1
brew install nodebrew
  • インストールが完了したらnodebrewのバージョンを確認しましょう。
terinal
1
nodebrew -v
  • 以下のような出力が確認できたらOKです。
terminal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
nodebrew 1.0.1

Usage:
nodebrew help Show this message
nodebrew install <version> Download and install <version> (from binary)
nodebrew compile <version> Download and install <version> (from source)
nodebrew install-binary <version> Alias of `install` (For backword compatibility)
nodebrew uninstall <version> Uninstall <version>
nodebrew use <version> Use <version>
nodebrew list List installed versions
nodebrew ls Alias for `list`
nodebrew ls-remote List remote versions
nodebrew ls-all List remote and installed versions
nodebrew alias <key> <value> Set alias
nodebrew unalias <key> Remove alias
nodebrew clean <version> | all Remove source file
nodebrew selfupdate Update nodebrew
nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version
nodebrew exec <version> -- <command> Execute <command> using specified <version>

Example:
# install
nodebrew install v8.9.4

# use a specific version number
nodebrew use v8.9.4

node.jsのインストールと有効化

  • node.jsをインストールする際は、LTSの推奨版(安定版)をインストールします。
terminal
1
nodebrew install-binary stable
  • インストールされたnode.jsのバージョンを確認しましょう
terminal
1
nodebrew ls
  • 以下のようにcurrent: noneとなっている場合は、使用するバージョンを有効化します。
出力結果
1
2
3
v14.15.4

current: none
  • 指定したバージョンのnode.jsを有効化する際は以下のコマンドで有効化が可能です。ここでは、2021年1月時点で最新の安定バージョンであるv14.15.4を有効化します。
terminal
1
nodebrew use v14.15.4
  • 有効化が完了しているか確認をします。
terminal
1
2
3
4
nodebrew ls
v14.15.4

current: v14.15.4
  • これで完了です。

環境パスの設定

  • M1 Macのデフォルトターミナルであるzshでnodeコマンドが使えるように環境パスを設定します。
terminal
1
vim ~/.zprofile
  • zprofileには以下を追記します。
~/.zprofile
1
export PATH=$HOME/.nodebrew/current/bin:$PATH
  • 完了したら以下のコマンドを実行して環境パスを読み込みます
terminal
1
source ~/.zprofile
  • nodeが使用できるか確認しましょう。
terminal
1
node -v
出力結果
1
v14.15.4
  • 上記のようにv14.15.4と表示されればOKです。

react開発環境の作成

  • まずは任意の場所にフォルダを作成します。ここではUserの配下にreact-pjというフォルダを作成します。その後、作成したreact-pdフォルダに移動します。
terminal
1
2
mkdir react-pj
cd react-pj
  • react-pfフォルダに移動したら、以下のコマンドを実行し、react開発環境を実行します。react-appの箇所は任意の名前でOKです。
terminal
1
npx create-react-app react-app
  • すると、react-appというフォルダが作成されます。このフォルダに移動し、npm startコマンドを実行します。
terminal
1
2
cd react-app
npm start
  • すると以下の出力が現れます。
terminal
1
2
3
4
5
6
7
You can now view react-basic in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.158.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
  • 場合によっては、chromeにアクセスしてもよいかのポップアップが現れるので、OKを選択しましょう。

  • chromeなどのブラウザで、localhost:3000にアクセスすると、reactの最初の画面が現れるかと思います。

reactの起動画面

現場レベルのReactを学びたい方へ

RaiseTechのReactコースは、一度購入すれば永遠に現場で稼げる最新のフロントエンド技術が学べます。


ReactとDjango REST Framework APIを学ぶ

バックエンドエンジニアとしてフロントエンドの知識を学びつつ、Django REST Framework APIを学びたい方は、Udemyの[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発で学ぶのがおすすめです。

こちらの記事もあわせて読みましょう

コメント