GraphCMS, react, reduxを使用してBlogを構築する
yarnをインストール
迅速で信頼性の高い安心な管理：操作を並列化してリソース使用率を最大化するので、インストール時間がこれまで以上に短縮
yarn Installation
brew install yarn
package.jsonを作成
yarn init
reactをインストール
ユーザーインターフェイスを構築するためのJavaScriptライブラリ
React Installation
yarn add react react-dom
babelをインストール
JavaScriptコンパイラ
Using Babel
yarn add -D babel-loader babel-core
CLI（Command Line Interface/コマンドライン/command line）とは、ユーザに対する情報の表示を文字によって行い、すべての操作をキーボードを用いて行うユーザインターフェースのこと。 Babelには、コマンドラインからファイルをコンパイルするために使用できる組み込みのCLIが付属しています。
マシンにBabel CLIをグローバルにインストールすることはできますが、プロジェクトごとにプロジェクトをローカルにインストールする方がはるかに優れています。 これには主に2つの理由があります。
- 同じマシン上の異なるプロジェクトは、異なるバージョンのBabelに依存して、一度に1つずつ更新することができます。
- これは、作業中の環境に暗黙の依存関係がないことを意味します。プロジェクトの移植性が向上し、設定が容易になります。
Babel CLIをローカルにインストールするには、次のコマンドを実行します。
yarn add -D babel-cli
Babel本体のみでは、何も仕事をしない。.babelrcという設定ファイルを用意し、そこにBabelでさせたい処理をプリセットやプラグインとして登録しておく必要がある。
BabelにES2015のコンパイルの処理を行わせる場合はbabel-preset-es2015というプリセットを使用。
Babel CLI（babelコマンド）の使い方
yarn add -D babel-preset-es2015
フロータイプを取り除き、JSXをcreateElement呼び出しに変換します。
yarn add -D babel-preset-react
envオプションを使用すると、特定の環境で特定のオプションを設定できます。
{
"presets": ["es2015", "react"]
}
※ babel6系からパッケージの分離が行われた為、bebel5系と異なりbabel-preset-es2015やbabel-preset-reactなど機能 ＝ プリセット単位で別途インストールする必要がある。
webpackをインストール
JavaScriptモジュールバンドラ webpack.js.org
yarn add -D webpack
webpack-dev-serverをインストール
live reloadingを提供する開発サーバー
webpack/webpack-dev-server
yarn add -D webpack-dev-server