Get Started React.js
@koba04 - 2014/09/30
(v0.12.1対応 2014/11/19)

React.js (v0.12.1)
• JUST THE UI
• MVCでいうところのV ( MVC Framework)
• VIRTUAL DOM
• 仮想のDOMを持っていて、差分だけを実際のDOMに反映するので高速
• DATA FLOW
• 2wayデータバインディングでなくて1方向のリアクティブなデータフロー
• JSX
• JavaScript + XML likeな記述 (optional)

Hello React.js

Hello React
/** @jsx React.DOM */
// Componentを作成
var App = React.createClass({
render: function() {
return (
<p>Hello React</p>
);
}
});
// DOMと<h1><App /></h1>というcomponentを紐付ける
React.render(
<h1><App /></h1>,
document.getElementById('app')
);

Hello JSX
• HTMLのdiv要素に見えるけど、divもReactで定義された
Component
• 「class= hoge 」ではなくて「className= hoge 」
render() {
var style = {
backgroundColor: ‘white’,
};
return (
<div>
renderで返すcomponentは1つ
<header className=“page-header”>
<span style={style}>xxx</span>
</header>
</div>
);

Start with JSX
• JSXTransformerを使ってオンラインで変換
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
• react-toolsを使ってcommand lineで変換
% npm install -g react-tools
% jsx --watch src/ build/
# requireするなどしてReactがscopeの中で見える必要がある
var React = require(‘react’);

Start with JSX
• grunt、gulp、browserify transformなど大体あるのでお好みで
• grunt-react
• gulp-react
• reactify
• https://github.com/facebook/react/wiki/Complementary-Tools

Start without JSX
• JavaScriptで書くことは出来るけど、JSXで書いたほうがわかりや
すいのでオススメはしない
// JSX
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
// JavaScript
React.render(
React.DOM.h1(null, 'Hello, world!'),
document.getElementById('example')
);

ES6,7 Support

ES6,7 Support
• harmony optionがあるので有効にして変換することで一部のES6,7
のfeatureを使用することが出来る
'harmony': [
'es6-arrow-functions',
'es6-object-concise-method',
• この辺りがharmony option
'es6-object-short-notation',
'es6-classes',
によって使えるっぽい
'es6-rest-params',
'es6-templates',
'es6-destructuring',
'es7-spread-property'
],
https://github.com/facebook/react/blob/master/vendor/fbtransform/visitors.js#L31-L40
% jsx —harmony src/ build/

ES6 Support
• reactifyでもoptionを指定するだけで使える
"browserify": {
"transform": [
[ "reactify", { "harmony": true } ],
]
}
• その結果、こんな感じで書ける
module.exports = React.createClass({
render() {
var tracks = this.props.tracks.map( (track, index) => {
return (<li className="list-group-item" key={index}>
<a href={track.url} target="_blank">{track.name}</a>
<span className="artist">{track.artist.name}</span>
</li>);
});
return (<ul className="list-group">{tracks}</ul>);
}
});

react-boilerplate
• ここから紹介するコードは下記の構成
• Transformはbrowserify + reactify
• harmony optionを使用
• github.com/koba04/react-boilerplate
http://koba04.github.io/react-boilerplate/

Component

Component
• Viewを構成するパーツで、Componentを組み合わせることでView
を作っていく
• 後述のPropやStateでやりとりしてComponentを作っていく
var React = require(‘React’);
var App = React.createClass({
render: function() {
return (
<p>Hello {this.props.name}</p>
);
}
});
React.render(
<h1><App name=“React” /></h1>,
document.getElementById('app')
);

Prop

Prop
• ComponentがもつImmutableなProperty
• Componentの作成時に指定することが出来て、this.props.xxxで
参照する
• props.childrenでComponent内の要素を取得することが出来る
var Sample = React.createClass({
render() {
return (
<div>
<header>{this.props.header}</header>
<div className=“content”>{this.props.children}</div>
</div>
);
}
});
React.render(<Sample header=“hello”>content</Sample>, el);

PropTypes

PropTypes
• Propの値に対して型や必須などの指定をすることが出来る
• 配列、文字列、数値、オブジェクト以外にも、ReactComponent、
enumやカスタムのValidatorなど柔軟に指定出来る
• http://facebook.github.io/react/docs/reusable-components.html
module.exports = React.createClass({
propTypes: {
onHandleSubmit: React.PropTypes.func.isRequired, // 関数で必須
countries: React.PropTypes.array.isRequired // 配列で必須
},

State

State
• ユーザーによる操作やAPIリクエストにより、状態が変化する値
module.exports = React.createClass({
getInitialState() { // stateの初期化を行う
return { // stateのオブジェクトを返す
artist: 'radiohead'
};
},
handleInput(e) {
this.setState({artist: e.target.value}); // stateの値を更新する
},
render() {
return (
<div>
<div>input: {this.state.artist}</div> // stateの値を参照する
<input type="text" onChange={this.handleInput}
value={this.state.artist} />
</div>
);
}
});

State - LinkedStateMixin
• LinkedStateMixinを使うことにより、2wayなデータバインディン
グも簡単に書ける
var React = require(‘react/addons’); // addonsを使う場合は、react/addonsを使う
module.exports = React.createClass({
mixin: [React.addons.LinkedStateMixin],
getInitialState() {
return {
artist: 'radiohead'
};
},
render() {
return (
<div>
<div>input: {this.state.artist}</div>
<input type="text" valueLink={this.linkState('artist')} />
</div>
);
}
});

Prop & State

Prop & State
• 基本的にはPropで考える
• Stateにした値を子Componentに渡す場合は、Propとして渡す
• Componentのowner-owneeの関係を意識する
• なるべくImmutableなComponentを作ることを意識する

Prop & State
• Parentが更新されるとChildもrerenderされる
Parent
state = {
current: “artist”,
count: 10
}
pass as prop
ChildA
ChildB
<ChildA current={this.prop.current} />
<ChildB count={this.prop.count} />
Prop = {
Prop = {
current: “artist”
count: 10
}
}

Component Lifecycle

Component Lifecycle
• ComponentのLifecycleに応じてメソッドが呼ばれる
DOMツリーに追加される前に一度だけ呼ばれるので初期化処理を行うのに適している
componentWillMount()
この中でsetState呼んでもrender時にまとめて行われる
ServerSide Rendering時にも呼ばれる
DOMツリーに追加された状態で呼ばれるのでDOMに関わる初期化処理をしたいときに適している
componentDidMount()
またはServerSide Rendering時に呼んでほしくない初期処理にも適している
componentWillReceiveProps Propが更新される時に呼ばれる
(nextProps)
this.propsは古い値で新しいPropは引数で渡ってくる
新しい
shouldComponentUpdate
StateかPropを受け取った際にrerenderするかどうかをbooleanで返す。falseにす
(nextProps, nextState)
ると更新しない。performaceの改善したいときにここで調整することが出来る
componentWillUpdate
componentが更新される時に呼ばれる。更新前のPropとStateは引数で取得できる
(nextProps, nextState)
この中でsetStateを呼ぶことは出来ない
componentDidUpdate
componentが更新された後に呼ばれる
(prevProps, prevState)
更新前のPropとStateは引数で取得できる
ComponentがDOMから削除されるときに呼ばれる
componentWillUnmount()
クリーンアップ処理に適している

Component Lifecycle
// tracksはBackbone.Collection
// tracks用のmixin(後述)
module.exports = {
componentWillMount() {
this.tracks = tracks;
tracks.on("all", this.setTracks); // イベントを購読
},
componentWillUnmount() {
tracks.off("all", this.setTracks); // イベントを解除
},
setTracks() {
this.setState({
tracks: tracks.map( (track) => { return track.attributes } )
});
},
};

Fetch initial data

Fetch initial data
• Componentに必要なデータがある場合はcomponentDidMountで
Ajax Requestを行うとよい
• ServerSide Rendering時にも呼びたい場合はWillMountで
• ResponseをsetStateするときは、Componentがまだmountされ
ているかをisMounted()でチェックした方がいい
componentDidMount() {
this.tracks = tracks;
tracks.on("all", this.setTracks);
},
setTracks() {
if (this.isMounted()) {
this.setState({
tracks: tracks.map( (track) => { return track.attributes } )
});
}
},

Parent-child communication

Parent-child communication
• 基本的には子がI/FをPropで公開して親が使う形にする
• propTypesで制約を指定しておくとわかりやすい
var Parent = React.createClass({
search() { console.log(“search”); },
render() {
return <div><Child onHandleClick={this.search} /></div>
}
});
var Child = React.createClass({
propTypes: {
onHandleClick: React.PropTypes.func.isRequired,
},
handleClick() { this.props.onHandleClick() },
render() {
return <div onClick={this.handleClick}>click</div>
}
});

Parent-child communication
• this.handleClick.bind(this, i) のように引数を渡して親Component
内で処理する方法もある
var Sample = React.createClass({
handleClick(i) {
console.log('click' + this.props.items[i]);
},
render() {
var items = this.props.items.map( (item, i) => {
return <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
});
return <div>{items}</div>
);
}
});
<Sample items={[‘Foo’, ‘Bar’, ‘Baz’]} />

Parent-child communication
• refを使って子Componentの参照を取得出来る
• 後述のgetDOMNodeと組み合わせて、Reactが提供しているinput
などのComponentに対する参照を取得することに使うことはある
けど、基本的には避けた方がいい
• PropをI/Fとした方が見通しがいい
• DOMへの参照を取得できる
componentDidMount() {
this.refs.input.getDOMNode().focus();
}
render() {
return (
<input type=“text” value=“{this.state.input}” ref=“input” />
)
}

children

children
• props.childrenは配列だったり文字列だったりするので、操作した
り数を取得するときはReact.ChildrenのUtilを使うといい(そんな
にないと思うけど)
• React.Children.(map¦forEach¦count¦only) がある
// span componentの配列
<div><span>xxx</span><span>xxx</span></div>
// “xxx”という文字列
<div>xxx</div>
• {false}渡すことで空の子要素を表現できる
React.Children.map(this.props.children, (child) => { … });

Transfering Props

Transfering Props
• JSX spread attributesを使うか、Object.assignなどを使う
• 既存のComponentを拡張したいような場合に使うと便利
• ただ、依存しているPropがわかりに
var Avatar = React.createClass({
くくなるので注意が必要
render: function() {
return (
var {userId, ...other} = this.props;
<img {...other} src={“/avatars/“ + userId + ".png"} userId={null} />
);
}
});
// <Avatar userId={17} width={200} height={200} />

React Components http://react-components.com/

DOM & Event

Event

Event
• クロスブラウザ対応したネイティブAPIと同じI/Fをもつ独自イベン
トを持っている(SyntheticEvent)
• 内部ではrootの要素にだけEventListenerを登録して、Component
とイベントに対するマッピングを持って処理している
• イベントハンドラーのcontextはcomponentのインスタンスになる
// <form className="form-horizontal" role="form" onSubmit={this.handleSubmit} >
handleSubmit(e) { // eはSyntheticEvent
• touch

イベントを有効にしたい場合は、↓のように有効にする必要
e.preventDefault();
var artist = this.state.inputArtist;
がある
if (artist) {
this.props.onHandleSubmit(artist);
}
},

Event
• touchイベントを有効にしたい場合は、↓のように有効にする必要
がある
React.initializeTouchEvents(true);
• Reactが提供してないDOMのイベントを購読したい場合は
componentDidMountでaddEventListenerして、
componentWillUnmountでremoveEventListenerする
componentDidMount() {
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
},

getDOMNode

getDOMNode
• Componentが管理しているDOMへの参照を取得することが出来る
• refと組み合わせて使うことが多い
componentDidMount() {
this.refs.input.getDOMNode().focus();
}
render() {
return (
<input type=“text” value=“{this.state.input}” ref=“input” />
)
}

Form

Form - Controlled Components
• value属性を指定すると、valueの値と表示上の値が同期されるの
で、固定値を指定した場合は値が変更できない
<input type="text" value="never change" />
• stateにしてsetStateすることで値と表示上の値が更新される
<input type="text" value={this.state.value} onChange={this.onHandleChange}/>
:
onHandleChange(e) {
this.setState({value: e.target.value});
}
• http://jsfiddle.net/koba04/xhf7pg24/1/

Form - UnControlled Components
• value属性を指定しない場合は、入力した値がそのまま反映される。
defaultValueを指定することで初期値の設定が可能
<input type="text" defaultValue=“initial value” onChange={this.onHandleChange} />
:
onHandleChange: function(e) {
this.setState({value: e.target.value});
}
• http://jsfiddle.net/koba04/rxj8zqrv/1/
• 参考: DOMのvalueとgetAttribute( value )で取得できる値の違い
• http://jsfiddle.net/koba04/k5qu5g1d/

Form - TextArea and SelectBox
• textarea
• valueに値を指定する。<textarea>xx</textarea>の指定をする
とdefaultValueとして扱われる
<textarea value={this.state.value} />
• select
• valueに値を指定する。multipleとして配列を指定出来る
<select multiple={true} value={this.state.values}>
<option value=“A”>A</option>
<option value=“B”>B</option>
</select>

Mixin & addons

Mixin

Mixin
• Componentの共通の振る舞いをMixinとして共通化することが出来
る
// tracks-mixin.jsx
module.exports = {
getInitialState() {
return {
tracks: []
};
},
componentWillMount() {
this.tracks = tracks;
tracks.on("all", this.setTracks);
},
componentWillUnmount() {
tracks.off("all", this.setTracks);
},
setTracks() {
this.setState({
tracks: tracks.map( (track) => { return track.attributes } )
});
},
};

Mixin
• 使う時はmixinsに指定するだけ
• getInitialStateで同じkeyを指定するとエラーになる
var TracksMixin = require(‘../tracks-mixin.jsx');
module.exports = React.createClass({
mixins: [TracksMixin],
fetchArtist(artist) {
this.tracks.fetchByArtist(artist);
},
getInitialState() {
return {
foo: “bar”,
// tracks: [] 指定するとエラーになる
};
}
});

addons

CSS Class Manipulation

CSS Class Manipulation
• よくあるCSSのclassを操作するもの
render() {
var classes = React.addons.classSet({
‘is-active’: this.props.item.isActive,
‘is-important’: this.props.item.isImportant
});
return (
<div className={classes}>{this.props.item.name</div>
):
}

Animation

Animation
• Angular.jsのng-animateにインスパイアされているらしい
• アニメーションさせたい要素をCSSTransitionGroupで囲んでアニ
メーションのCSSを書く
// ページ遷移時にアニメーションさせる(with react-router)
var App = React.createClass({
propTypes: {
activeRouteHandler: React.PropTypes.func.isRequired
},
render() {
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
return (
<CSSTransitionGroup transitionName=“route”> // アニメーションの名前も指定する
{this.props.activeRouteHandler()}
</CSSTransitionGroup>
);
}
});

Animation
/* transitionNameがroute (stylus) */
.route-enter
-webkit-animation: fadein 0.5s
-webkit-animation-delay: 0.2s
animation: fadein 0.5s
animation-delay: 0.2s
opacity: 0
.route-enter-active
…
.route-leave
-webkit-animation: fadeout 0.2s
animation: fadeout 0.2s
.route-leave-active
…
@keyframes fadein
0%
transform: scale(0.5)
-webkit-transform: scale(0.5)
opacity: 0
…

Animation
• アニメーション開始時にReactCSSTransitionGroupはマウントさ
れている必要がある
• アニメーション対象の要素にはkey属性をつける必要がある
<CSSTransitionGroup transitionName="example">
<div key={item}>{item}</div>
</CSSTransitionGroup>
• transition(Enter¦Leave)によってenter, leaveのどちらかのみアニ
メーションさせることも出来る
<CSSTransitionGroup transitionName=“example" transitionLeave={false}>
• 細かい制御をしたい場合は、ReactTransitionGroupを使う

Test

Test
• React.addons.TestUtilsとしてUtil系がサポートされている
• Simulatorが便利そう
var node = this.refs.input.getDOMNode();
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node);
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
• http://facebook.github.io/react/docs/test-utils.html
• 実際、試してないけど…

Performance

Performance
• Virtual DOMのdiffを計算してその部分だけを実際のDOMに反映し
てくれるのでパフォーマンスに優れている
• コードを書くときにDOM関連のパフォーマンスをあまり意識したく
ない人にとってもReact.jsに任せておくことが出来るのでよさそう
• シビアにパフォーマンスが求められるような場合は、
shouldComponentUpdateでrender周りのチューニングをすること
も出来る
• PureRenderMixinを使える場合は使うことでパフォーマンスがあが
ることも
• Performance Toolsもaddonで公式に提供されている

Performance
• childにkeyを指定することでDOMを再利用してくれることもある
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
renderA: <div><span key="first">first</span></div>
renderB: <div><span key="second">second</span><span key="first">first</span></
div>
=> [insertNode <span>second</span>]
• Styleは文字列でなくて、オブジェクトで指定する
renderA: <div style={{color: 'red'}} />
renderB: <div style={{fontWeight: 'bold'}} />
=> [removeStyle color], [addStyle font-weight 'bold']

Architecture

Flux

Flux
• Facebookが提唱しているアーキテクチャ
• アクションという単位でイベントを
Dispatcher経由でやりとりして、1方向な処
理の流れを作る
• Reactを使って大規模アプリを作ろうとする
とこういう設計になるのもわかる気がする
• 詳細は別途で…
• http://facebook.github.io/flux/
https://speakerdeck.com/fisherwebdev/fluxchat#11

Backbone

Backbone
• ReactはMVCでいうVなので、ある程度の規模になるとModelとし
てBackboneを使う方法も
componentWillMount() {
tracks.on("all", this.setTracks);
},
componentWillUnmount() {
tracks.off("all", this.setTracks);
},
• backbone-react-componentなんていうのもある
• https://github.com/magalhas/backbone-react-component

Router

Router
• Backbone.Routerでもdirectorでも好きなものを使う
• react-routerやreact-router-componentというComponentで
ルーティングを定義するようなものもある
var Router = require(‘react-router-component’);
var Locations = Router.Locations,
Location = Router.Location
;
var route = {
<Locations path={this.props.path}>
<Location path="/" handler={Top} />
<Location path="/artist" handler={Artist} />
<Location path="/country" handler={Country} />
</Locations>
};

ServerSide Rendering

ServerSide Rendering
• サーバー側でComponentをHTML化して返すことが出来る
• PhantomJS使っての力技なことはしなくていい
• react-railsやexpress-react-viewsというのも公式でサポートして
いるので導入のコストは高くない
• https://github.com/reactjs/
• react-router-componentはServerSideでのRenderingもサポート
しているので組み合わせるといい
• https://github.com/andreypopp/react-router-component

ServerSide Rendering
• renderToStringとrenderToStaticMarkupのどちらかを使って
HTMLを生成する
• renderToString
• フロント側でもReact.jsを使って動的にしたい場合に使う
• renderToStaticMarkup
• 静的なHTML(フロント側でReact.jsを使わない)を生成したいと
きに使う

renderToString
• サーバー側でHTMLを生成して、クライアント側ではrenderでイベ
ントがattachされるだけ
• サーバー側で生成されるDOM構造とクライアント側で生成される
DOM構造が同じにする必要がある
• PropなどComponentの生成に必要なデータをサーバー、クラ
イアントで共有する必要がある
• componentWillMountはServerSide Rendering時にも呼ばれるの
でサーバーでも動作するコードである必要がある

renderComponentToString
• 生成されるHTMLにはdata-reactidとdata-react-checksumが設
定される

renderToStaticMarkup
• 静的なHTML(data-reactidなどがない)が生成される
• フロント側でReact.jsを使ってrenderComponentすると、サーバー
側で生成したHTMLを使わずに新しくDOMを作って描画される
• express-react-viewsはこのメソッドを使っている
• 生成されるHTML

Sample Code - ServerSide
• with express
require('node-jsx').install({ harmony: true });
// JSXをparse出来るように
var React = require(‘react’);
var App = require('./src/index.jsx');
// Componentを読み込む
var handler = function(name) {
return function(req, res) {
// Prop渡してComponentをHTML化
var html = React.renderToString(
React.createElement(App, {
path: "/" + name
})
);
res.send(html);
};
};
app.get('/', handler(''));
app.get('/artist', handler('artist'));
app.get('/country', handler('country'));

Sample Code - Component (1)
var App = React.createClass({
render() {
var title = `Artist Top Tracks (${ this.props.path })`;
return (
<html lang="ja">
<head>
// <title>xxx - {title}</title>とやると<span>{title}</span>になるので注意
<title>{title}</title>
:
</head>
<body>
<div id="app" className="container">
<Locations path={this.props.path}>
<Location path="/" handler={Top} />
</Locations>
</div>
</body>
<script src="bundle.js"></script>
</html>
);
}
});

Sample Code - Component (2)
• サーバー側とクライアント側で処理を分ける
var App = React.createClass({
render() {…}
});
if (typeof window !== "undefined") {
React.render(<App path={window.location.pathname} />, document);
} else {
module.exports = App;
}
• 実際はJSONをHTMLに埋め込むなどでPropを共有する
• http://benalpert.com/2012/08/03/preventing-xss-json.html

Sample Code
• https://github.com/koba04/react-boilerplate/
• http://react-serverside-rendering.herokuapp.com (DEMO)

Conclusion

Conclusion
• ちょっとしたアプリ書くならVue.jsとか2wayデータバインディン
グのライブラリ使って書くのが楽だけど、がっつり作る時のViewと
してReact.js使うのはアリな気がする
• SEOが必要な場面でServerSide Renderingしたいから使うという
選択もありそう
• JSXとかあって学習コスト高そうな印象あったけどAPIもシンプル
で公式読めば十分理解出来る
• http://facebook.github.io/react/docs/

speakerdeck.com/koba04
github.com/koba04/react-boilerplate