“`javascript:app.js
var express = require(‘express’);
var app = express();
app.get(‘/’, (req, res) => {
res.send(‘Hello, World!’);
});
app.listen(3001, () => {
console.log(‘Example app listening on port 3001’);
});
“`

__今回のチュートリアルに必須ではない。__

### Redux フレームワーク

Flux アーキテクチャの考え方をベースにして派生したフレームワーク。

> * [Read Me · Redux](http://redux.js.org/)

引用「いまから始めるWebフロントエンド開発」（図解あり）

– View
– Action Creator
– Store
– Reducer

> Redux では各コンポーネントが完全に独立した構成で、アプリケーションを作成していくことができます。これによって、デザイナーとの分業や、機能追加や削除があった場合でも一部のコンポーネントのみを先に実装するなど、開発時にさまざまなメリットを享受できるでしょう。

### React.js ライブラリ

React.js は、View を構築していくためのライブラリの1つ。

> * [A JavaScript library for building user interfaces – React](https://facebook.github.io/react/)

## 環境構築

[DriftwoodJP/sandbox-es6](https://github.com/DriftwoodJP/sandbox-es6) に追加する。
必要なパッケージをインストールする。

“`prettyprinted
% npm install –save-dev redux react react-dom babel-preset-react react-redux
“`

.babelrc に、以下を追記する。

“`prettyprinted
{
“presets”: [
“es2015”,
“react”
],
“`

必要であれば ESLint を設定する。

> * [React のコードを ESLint する設定 | deadwood](https://www.d-wood.com/blog/2016/11/12_8541.html)

### ファイルレイアウト

– __Action Creator__ を __/actions__ 配下に作成。
– __Reducer__ を __/reducers__ 配下に作成。
– React.js の __View__ は __/components__ 配下に作成。
– React.js と Redux のつなぎこみを行う部分は、 __/containers__ 配下に作成。

“`prettyprinted
% cd src
% mkdir actions reducers components containers
“`

## コード

> * [DriftwoodJP/training-react at feature/todo](https://github.com/DriftwoodJP/training-react/tree/feature/todo)

## 補遺

> * [eslint-plugin-react/prop-types.md at master · yannickcr/eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md)
[/markdown]