React開発環境の構築（yarn + live-server + Babel ）

エディタ：Visual Studio Code (VSC) https://code.visualstudio.com/download

NodeJs ダウンロード＆インストール https://nodejs.org/ja/

node -v →　　v8.4.0

npm -v 　 →　　v5.3.0

Yarnをインストールする

Yarn はnpmみたいなもの

npm install -g yarn

yarn -v →　　v1.1.0

yarn global add live-server

live-server -v →　　live-server 1.2.0

live-server 1.2.0がインストールされたことを確認する。

ちなみに、npm install -g live-server としてもlive-serverをインストールすることができる。

mkdir public

live-serverを使ってサーバーを起動する。

live-server public

publicというフォルダを指定するとその中にあるファイルが読み込まれる。自動的にChrome（デフォルトブラウザに設定していれば）が立ち上がる（IPアドレスは127.0.0.1:8080が設定されている。）。public内のファイルを変更すると自動的に再読み込みされる。

Babelのセッティング

Babelは主にJSX（ JavaScript XML）のコンパイルするために使う

yarn global add babel-cli@6.24.1

babel --help

babelが動くか確認する。

yarn でローカルに環境を作る。

yarn init

→　　package.json が作成される

yarn add babel-preset-react@6.24.1 babel-preset-env@1.5.2

package.json にdependenciesが追加される

node_modules　と　yarn.lock が作成される

例えば、作業フォルダ内に２つのフォルダを用意する。

/src/に作成したJSXファイルがコンパイルされて/public/scriptsに入る。

babel src/app.js  --out-file=public/scripts/app.js --presets=env,react

presetsのつづりに注意。間違えても特にエラーがでない。

babel src/app.js  --out-file=public/scripts/app.js --presets=env,react --watch

--watch

をつけることによってsrc/app.jsを変更した時に自動的にコンパイルしてくれるようになる。便利！

live-serverでサーバー環境を簡易的に構築

live-serverはworkspace/public内を見に行く　→　127.0.0.1:8080でindex.htmlにアクセスできる。

JSXファイルはbabelでコンパイルしてES5に変換する。

src/app.js →　public/scripts/app.js

babelはJSX形式のファイルをES5 javascriptに書き下してくれる。これで、ほとんどのブラウザーが読み込める（多くのブラウザーはJSX形式が読み込めない）。

この解説はオンライン学習サイトUdemy（ユーデミー）のThe Complete React Web Developer Course (2nd)で学んだことをまとめています。