npmでReact始める

# 前提
WindowsでWSL使用。
目的→npmでReactを始める。
# npmとは
Node Package Managerの略。
**Node.js**で使えるパッケージ管理ツール
## パッケージ管理ツールとは
パッケージ（＝ライブラリや設定ファイル・実行ファイル）をインストールしたりバージョンを管理できる。）
つまり、いろいろなツールをバラバラに公式からダウンロードしたり、バージョンを管理しなくてよい、便利なハッピーセット的なやつ。:ok_woman:
## Node.js？
Javascript→ブラウザ上で動かす言語
Node.js→JavascriptをPC上で動かせるようにするソフトウェア

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

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


# 以下お品書き
1. homebrewをインストール
1. nodebrewをインストール
1. Node.jsをインストール
1. `create react app`


# 1.homebrew
MacOS及びLinuxOSで使える**パッケージ管理ツール**。
今回はすでに入っていたので、インストール方法は省く。
インストールした記憶がないがいつのまにか入れていたらしい。
# 2.nodebrewをインストール
nodebrewとは、
Node.jsのバージョン管理ツール、Node.jsをインストールもできる。
brewコマンドを使ってインストールする。
```terminal
brew install nodebrew
```
# 3.Node.jsをインストール
nodebrewコマンドを使ってインストールしていく。
## インストールするバージョンを確認
```terminal
nodebrew ls-remote
```
上記コマンドでダウンロード可能なバージョンの一覧が表示される。:point_down:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/4996b3b8-b24b-3846-db3d-68f3db73a33a.png)
今回は新しすぎない16.14.2をダウンロードする。
## nodebrewで使うインストール先を作成
```terminal
 mkdir -p ~/.nodebrew/src
```
nodebrewのインストール先のディレクトリを作る。これがないと怒られる。
## Node.jsをインストール
```terminal
nodebrew install-binary v16.14.2
```
バージョンを指定してインストール。成功:thumbsup:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/31e5c56c-71c8-eb2a-0698-03e9226da4a4.png)

ただし、インストールしただけではnodeは使えない・・・。:joy:
一息休憩したほうがいい:tea:
残りの工程は以下。
1. Node.jsを有効化
1. パスを通す
1. npx create-react-app
## Node.jsを有効化
```terminal
nodebrew ls
```
上記コマンドでインストールされているnode.jsのバージョンの一覧が表示される。
本来、`current:`のところに現在有効化されているバージョンが表示される。今は有効化していないので`none`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/051de86e-5513-fee6-566e-f3c17603257e.png)
### `use`コマンドを使って有効化
```terminal
nodebrew use v16.14.2
```

バージョンを指定して有効化すると、`nodebrew ls`コマンドで下記のように変更される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/340330ef-e24b-ca95-5148-61e6e42a9331.png)

## パスを通す
話が変わるが、
本来`ls`コマンドは`which`コマンドを打つと、下記の場所に格納されていることがわかる。
```terminal
which ls
> /usr/bin/ls
```
本来、`ls`コマンドを使うためにはフルパスで`/usr/bin/ls`と打たないとコマンドを実行できない。
`ls`コマンドが使えるのはbashがパスを見て、コマンドを実行してくれているおかげ。
bashには環境変数が設定されていて、一部bash内で使える環境変数が用意されている。

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

今回もNode.jsは新しくダウンロードしてきたので、nodeコマンドを使っても実行できないため、パスを通す作業が必要。
```terminal
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc
```
:feet:パスを設定するコマンドを`.bashrc`ファイルに追記する。
このファイルは、ターミナルを開くたびに実行される。
ターミナルを**一度閉じて、開きなおすと**、nodeコマンドが使えるようになる:tada:
:point_down:nodeコマンドを使うとこのように対話モードになるよ
```terminal
$node
--------------------
Welcome to Node.js v16.14.2.
Type ".help" for more information.
>
```
## Reactを始める
```terminal
npx create-react-app プロジェクト名
```
プロジェクトを作りたいディレクトリに移動して、上記コマンドを打つ。
プロジェクト名は好きな文言で入れてね。
しばらく待つと、成功したっぽいテキストが表示され、末尾に下記のようなメッセージが表示されている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/8519c632-4bff-0698-e05e-03b7d1e10623.png)
記載の通り、ディレクトリを移動して、`yarn start`（もしくは`npm start`）すると、ブラウザが起動してReactの画面が表示される。:tada::tada::tada::tada::tada:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416489/aafc9166-6652-d17e-c5f6-9f9f825d6936.png)

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

https://zenn.dev/ryuu/articles/what-npxcommand

https://qiita.com/sivertigo/items/622550c5d8ec991e59a6