※自分のアウトプット用(メモ)です
結論だけ知りたい人用
1行のコマンドでReact
の環境構築を完了する。
[条件]
1.Node.js 8.10以上
2.npm 5.6以上
$ npx create-react-app プロジェクト名
順番通り説明していきます。
必要なパッケージのインストール方法
1. brew
をインストール
Macのパッケージ管理システムであるbrewをインストール。
brew公式サイト
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
2. nodebrew
をbrew
でインストール
nodeのバージョン管理ができるnodebrewをインストール。
(brewでインストールするので先にbrewをインストールした)。
$ brew install nodebrew
3. Node.js
をnodebrew
を使ってインストール
Node.jsはnodebrewで管理した方が使いやすいと思います。他のバージョンに移るの簡単ですし、普通にインストールすると削除するのに手間なんですよね...
ほとんどの場合、安定版をインストールしておけば問題ないと思います。
// リモートにあるインストールできるNode.jsの一覧表示
$ nodebrew ls-remote
// 安定版をローカル(自分のMac)にインストール
$ nodebrew install stable
// ローカルにインストールされている`Node.js`のバージョンを一覧表示
$ nodebrew ls
// インストールしたバージョンの`Node.js`を選択する
$ nodebrew use 使用したいバージョン番号
4. Node.js
のパスを通す
// "~/.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)もインストールされているので、うまくいっていればこの時点で使用可能になっているはずです。
// Node.js
$ node -v
// npm
$ npm -v
これで準備は整いました。
create-react-app
でReact
の環境構築
任意の場所で以下のコマンドを叩いてください。
npx
コマンドを簡潔に説明すると、パッケージをローカルにインストールすることなく実行できるコマンドです。
環境を汚染しないので手軽に実行して見たいときに便利です。
詳細はこちら。
$npx create-react-app プロジェクト名
これでカレントディレクトリにreactのプロジェクトが作成されました。
以下のコマンドでブラウザ表示します。
$ npm start
お疲れ様でした。