npmでReact始める

前提

WindowsでWSL使用。
目的→npmでReactを始める。

npmとは

Node Package Managerの略。
Node.jsで使えるパッケージ管理ツール

パッケージ管理ツールとは

パッケージ（＝ライブラリや設定ファイル・実行ファイル）をインストールしたりバージョンを管理できる。）
つまり、いろいろなツールをバラバラに公式からダウンロードしたり、バージョンを管理しなくてよい、便利なハッピーセット的なやつ。

Node.js？

Javascript→ブラウザ上で動かす言語
Node.js→JavascriptをPC上で動かせるようにするソフトウェア

Node.jsはPCで動かすための機能があり、
Node.jsを使うと、Javascriptをサーバーサイドの言語として使えるようになる。

ともかく、npmを使うためには、Node.jsがインストールされていることが必要

以下お品書き

1. homebrewをインストール
2. nodebrewをインストール
3. Node.jsをインストール
4. create react app

1.homebrew

MacOS及びLinuxOSで使えるパッケージ管理ツール。
今回はすでに入っていたので、インストール方法は省く。
インストールした記憶がないがいつのまにか入れていたらしい。

2.nodebrewをインストール

nodebrewとは、
Node.jsのバージョン管理ツール、Node.jsをインストールもできる。
brewコマンドを使ってインストールする。

brew install nodebrew

3.Node.jsをインストール

nodebrewコマンドを使ってインストールしていく。

インストールするバージョンを確認

nodebrew ls-remote

上記コマンドでダウンロード可能なバージョンの一覧が表示される。

今回は新しすぎない16.14.2をダウンロードする。

nodebrewで使うインストール先を作成

 mkdir -p ~/.nodebrew/src

nodebrewのインストール先のディレクトリを作る。これがないと怒られる。

Node.jsをインストール

nodebrew install-binary v16.14.2

バージョンを指定してインストール。成功

ただし、インストールしただけではnodeは使えない・・・。
一息休憩したほうがいい
残りの工程は以下。

1. Node.jsを有効化
2. パスを通す
3. npx create-react-app

Node.jsを有効化

nodebrew ls

上記コマンドでインストールされているnode.jsのバージョンの一覧が表示される。
本来、current:のところに現在有効化されているバージョンが表示される。今は有効化していないのでnone

useコマンドを使って有効化

nodebrew use v16.14.2

バージョンを指定して有効化すると、nodebrew lsコマンドで下記のように変更される。

パスを通す

話が変わるが、
本来lsコマンドはwhichコマンドを打つと、下記の場所に格納されていることがわかる。

which ls
> /usr/bin/ls

本来、lsコマンドを使うためにはフルパスで/usr/bin/lsと打たないとコマンドを実行できない。
lsコマンドが使えるのはbashがパスを見て、コマンドを実行してくれているおかげ。
bashには環境変数が設定されていて、一部bash内で使える環境変数が用意されている。

新しい実行ファイルをダウンロードした場合は、bashに保存先のファイルを教えてあげないと怒られる。

今回もNode.jsは新しくダウンロードしてきたので、nodeコマンドを使っても実行できないため、パスを通す作業が必要。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc

パスを設定するコマンドを.bashrcファイルに追記する。
このファイルは、ターミナルを開くたびに実行される。
ターミナルを一度閉じて、開きなおすと、nodeコマンドが使えるようになる
nodeコマンドを使うとこのように対話モードになるよ

$node
--------------------
Welcome to Node.js v16.14.2.
Type ".help" for more information.
>

Reactを始める

npx create-react-app プロジェクト名

プロジェクトを作りたいディレクトリに移動して、上記コマンドを打つ。
プロジェクト名は好きな文言で入れてね。
しばらく待つと、成功したっぽいテキストが表示され、末尾に下記のようなメッセージが表示されている。

記載の通り、ディレクトリを移動して、yarn start（もしくはnpm start）すると、ブラウザが起動してReactの画面が表示される。

ちなみにnpxとは

npmの話をしていたのにnpxって何？
npmと一緒にインストールされる。
npxを使うと、パッケージをインストール、実行、除去してくれる。
何回も実行するわけではないコマンド実行の時にはよい。

参考