🌏

nodebrewを使ってReact環境構築

2022/11/30に公開

React

初めに

nodebrewを使ってReactの環境構築をしてみます。
この記事はHomebrewがインストールされてある前提で進めるのでまだの方は、別に記事にまとめてるので
下記からから進めてください。

1)Homebrewがインストールされているか確認

brew -v

バージョン確認できたらOK

2)nodebrewのインストール

brew install nodebrew

3)nodebrewがインストールされたら確認

nodebrew -v

バージョン確認できたらOK

4)インストールできるNode.jsのバージョンを確認

nodebrew ls-remote

たくさん出てきます。

5)Node.jsをインストール今回は18.12.1をインストールします

nodebrew install 18.12.1　　　⇦ インストール

nodebrew use 18.12.1　　⇦ 使用するバージョンを指定

nodebrew ls　⇦ 指定できてる確認
↓の画像の通りcurrentに指定したバージョンが指定されてればOK。
複数のバージョンがインストールされているときに ’ nodebrew use バージョン　’ で切り替えれます。

mkdir -p ~/.nodebrew/src

ご自身のホームディレクトリの中に.nodebrewが作成されその中にsrcフォルダが作成されます。
srcにインストールしたバージョンがあります。
.nodebrewフォルダに使用するバージョンのシンボリックが貼られることで使用できるようです。

srcフォルダの中

.nodebrewの中

6)nodeのパスを通す

シェルの確認
echo $SHELL

同期のみんなはzshのはず、もしかしたらbashの人もいるかも、bashでも問題なし。

echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.zshrc
※.zshrcファイルにパスが記載されます。.zshrcファイルなんて知らんて人は、HOMEディクレトリに勝手
に作成されるので大丈夫です。

source ~/.zshrc
※.zshrcに書かれた内容を反映します。

7)パスが通ったが確認

node -v

ご自身で指定したバージョンが出ればOK

8)Reactプロジェクト作成

作業用ディレクトリに移動し、下記を実行。

npx create-react-app react-sample_app

※react-sample_appの部分はご自身のプロジェクト名

プロジェクトディレクトリに移動し、下記を実行

npm run build

npm start

9)ブラウザが立ち上がりReactの画面が表示されれば完了です。

以上でReactの環境構築は完了です。
今回はnodebrewを使いましたが、他にも構築方法はあるので一つの方法としてやってみてください。

ちなみにReactは書けません！