1. yukiyohure0923

    Posted

    yukiyohure0923
Changes in title
+[1行で完了]最速でReact環境構築
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,87 @@
+※自分のアウトプット用(メモ)です
+## 結論だけ知りたい人用
+1行のコマンドで`React`の環境構築を完了する。
+[条件]
+1.Node.js 8.10以上
+2.npm 5.6以上
+
+```bash
+$ npx create-react-app プロジェクト名
+```
+順番通り説明していきます。
+## 必要なパッケージのインストール方法
+### 1. `brew`をインストール
+Macのパッケージ管理システムであるbrewをインストール。
+[brew公式サイト](https://brew.sh/)
+
+```bash
+$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
+```
+
+### 2. `nodebrew`を`brew`でインストール
+nodeのバージョン管理ができるnodebrewをインストール。
+(brewでインストールするので先にbrewをインストールした)。
+
+```bash
+$ brew install nodebrew
+```
+
+### 3. `Node.js`を`nodebrew`を使ってインストール
+Node.jsはnodebrewで管理した方が使いやすいと思います。他のバージョンに移るの簡単ですし、普通にインストールすると削除するのに手間なんですよね...
+ほとんどの場合、安定版をインストールしておけば問題ないと思います。
+
+```bash
+// リモートにあるインストールできるNode.jsの一覧表示
+$ nodebrew ls-remote
+
+// 安定版をローカル(自分のMac)にインストール
+$ nodebrew install stable
+
+// ローカルにインストールされている`Node.js`のバージョンを一覧表示
+$ nodebrew ls
+
+// インストールしたバージョンの`Node.js`を選択する
+$ nodebrew use 使用したいバージョン番号
+```
+
+### 4. `Node.js`のパスを通す
+
+```bash
+// "~/.bash_profile"にパスを追記する(bashの場合)
+$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
+
+// ターミナルを再起動して反映
+// または以下を実行して反映
+$ source ~/.bash_profile
+```
+
+### 5. `node`と`npm`が使用可能か確認
+Node.jsをインストールした時点でnpm(node package manager)もインストールされているので、うまくいっていればこの時点で使用可能になっているはずです。
+
+```bash
+// Node.js
+$ node -v
+
+// npm
+$ npm -v
+```
+これで準備は整いました。
+
+## `create-react-app`で`React`の環境構築
+任意の場所で以下のコマンドを叩いてください。
+`npx`コマンドを簡潔に説明すると、パッケージをローカルにインストールすることなく実行できるコマンドです。
+環境を汚染しないので手軽に実行して見たいときに便利です。
+詳細は[こちら](https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d#:~:text=npm%E3%81%A8%E3%81%AFNode.js,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)。
+
+```bash
+$npx create-react-app プロジェクト名
+```
+これでカレントディレクトリにreactのプロジェクトが作成されました。
+以下のコマンドでブラウザ表示します。
+
+```bash
+$ npm start
+```
+![スクリーンショット 2020-06-25 15.21.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250675/c90ce74a-292e-0efc-f261-bbe5adca7c9d.png)
+
+お疲れ様でした。