,

[React] React.js & Redux で ToDo アプリを作る

公開日: 2016/11/15
更新日: 2018/10/09

こちらを写経。

いまから始めるWebフロントエンド開発
いまから始めるWebフロントエンド開発

posted with amazlet at 16.11.14
(2016-08-25)
売り上げランキング: 8,879
Amazon.co.jpで詳細を見る

ソースコードはこちらで公開されている。

Contents

知識

Express

Express は Node.js 向けの Webアプリケーションフレームワークの中でディファクトスタンダード。

node app.js で動作を確認できる。

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 アーキテクチャの考え方をベースにして派生したフレームワーク。

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

  • View
  • Action Creator
  • Store
  • Reducer

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

React.js ライブラリ

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

環境構築

DriftwoodJP/sandbox-es6 に追加する。
必要なパッケージをインストールする。

% npm install --save-dev redux react react-dom babel-preset-react react-redux

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

{
  "presets": [
    "es2015",
    "react"
  ],

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

ファイルレイアウト

  • Action Creator を /actions 配下に作成。
  • Reducer を /reducers 配下に作成。
  • React.js の View は /components 配下に作成。
  • React.js と Redux のつなぎこみを行う部分は、 /containers 配下に作成。
% cd src
% mkdir actions reducers components containers

コード

補遺