いろんなやり方があるらしい。
create-react-appを使うのが一番楽とのこと。
とりあえずやってみる。
事前知識
create-react-appってなに？
・Facebookが提供しているCLIツール
・Reactの開発環境を簡単に構築できる
・これがないとwebpackの設定とかめんどくさい
node.jsってなに？
・サーバーサイドのJavaScript
・非同期 (I/Oの処理結果を待たず処理を進める)
・イベントドリブン
・シングルスレッド
・フレームワークにExpress、Backbone.js、Sails、Meteor等
・コールバック関数(非同期の処理が終わったら呼ばれる関数)
・npm (node package manager)
nodebrewってなに？
nodebrewとは、nodeのバージョンを管理・切替するツールのこと
homebrowってなに？
homebrowとは、macOS用のパッケージマネージャーのこと
インストール
まずはnode.jsがインストールされているか確認する。
ターミナルより以下のコマンドを実行
$ node -v
バージョン情報が表示される場合は既にインストールされているので最後のcreate-react-appのインストールへ進む。
node.jsがインストールされていない場合、以下のコマンドでhomebrowをインストールする。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
以下のコマンドでhomebrewのバージョン確認ができればインストール成功。
$ brew -v
続いて以下のコマンドでnodebrewをインストール。
$ brew install nodebrew
以下のコマンドでバージョン確認できればインストール成功。
$ nodebrew -v
いよいよnode.jsのインストール。
以下のコマンドで最新版をインストールする。
$ nodebrew install-binary latest
この際、エラーメッセージ「No such file or directory」が表示された場合は以下のコマンドでディレクトリを作成する。
$ mkdir -p ~/.nodebrew/src
インストールされたnode.jsのバージョン確認。
$ nodebrew list
以下のコマンドでnodeコマンドの実行パスを通す。
注:xxxxxはUserのHomeDir名
$ echo 'export PATH=$PATH:/Users/xxxxx/.nodebrew/current/bin' >> ~/.bash_profile
一度ターミナルを再起動し、以下のコマンドでnode.jsのバージョンを確認。
以下のコマンドで設定を反映させる。
$ source ~/.bash_profile
node.jsのバージョンを確認。
$ node -v
バージョン情報が表示される場合は正常。
「-bash: node: command not found」のようなメッセージが出る場合は失敗している。対処法は割愛。
以下コマンドでnpmコマンドが使えることを確認する。
$ npm -v
バージョン情報が表示されればOK。
最後はcreate-react-appコマンドのインストール。
グローバルで使うので-gフラグを付ける。
$ npm install -g create-react-app
HelloWorldプログラムは次回の記事で書く予定。
以下、参考にしたサイト様
ありがとうございました。
Node.js を5分で大雑把に理解する
Macにnode.jsをインストールする手順。
【React入門（1）】開発環境をMacに構築してみる
node.js の環境管理ツール nodebrew - Block Rockin’ Codes
