Reactの勉強を兼ねて簡易的なタスク管理ツールを作成したときの資料

1. ReactとBabelで
簡易タスク管理ツール作ってみた
1
Tsuyoshi Maeda

2. 目次
1. はじめに
2. Reactとは
1. Flux基本概念図
3. JSX
4. 参考になるページ
5. 実際に作ったサンプル
6. サンプルをいじってFluxスタイルにしよう
2

3. はじめに
• 自分がReactをちょっと触ってみたいと思ってた
のと、発表まで時間がなく1日くらいで調べなが
ら簡単なタスク管理ツールを作ったものなので
内容はかなり薄いものになっております。
ご了承ください。
• Babelに関しては以前に発表した資料を参考にし
て頂けたらと思います。
http://www.slideshare.net/tsuyoshimaeda56/babeljavascript
3

4. Reactとは
• Facebookが提供するView周りの操作に特化したライブラリ
https://facebook.github.io/react/
• Virtual DOMという概念を取り入れてドキュメントツリーに
変更があった場合、以前の構造との差分だけレンダリングを
行いレンダリングコストを少なくしている。
• Fluxというデータフローのアーキテクチャの概念を取り入れ
て使うのが一般的らしい。(あくまでもReactはViewの生成
周りに特化しているものと考えておいて良いと思う。)
https://facebook.github.io/flux/docs/overview.html
4

5. Flux基本概念図
• 引用元 : https://facebook.github.io/flux/
docs/overview.html
5
データの流れが一方通行。
オブザーバパターンを使ったデータの流れ。

6. JSX
• 要素の構造をHTMLのように書くことが出来る
ツール。
• BabelにはビルトインでJSXの機能が搭載。
6
render() {
return React.createElement(
'a',
{href: 'http://facebook.github.io/react/'},
Hello!'
);
}
↓ JSX(Babel)で以下のように直感的な書き方で書ける。
render() {
return <a href= http://facebook.github.io/react/">Hello!</a>;
}

7. 参考になる(した)ページ
7
• 一人React.js Advent Calendar 2014
これを一通り読めばReactについておおよそ理解できそう。(今
回のサンプルを作るのに7日目まで読み進めました。)
http://qiita.com/advent-calendar/2014/reactjs

8. 実際に作ったサンプル
• https://github.com/duyoji/react_todo
8

9. サンプルをいじって
Fluxスタイルにしよう
9
• サンプルの実装
クリックなどのアクション発生(子コンポネント)
↓
親コンポネントにアクション後処理を委譲
↓
親コンポネント内でデータの更新
↓
更新したデータを子コンポネントに渡し再度レン
ダリング

10. サンプルをいじって
Fluxスタイルにしよう
10
• Fluxスタイル
クリックなどのアクション発生(子コンポネント)
↓
ディスパッチイベントを投げてストアで処理を行う。
↓
ストアでデータの更新をしたらストアを監視している親
コンポネントにデータを渡す。
↓
親コンポネントは渡されたデータを受け取ってデータ
を更新。(再レンダリング)