Start React with Browserify

About me
me = {
name: "muyuu",
Twitter: "@anticyborg",
belongs: "freelance",
job: "Web Front-End Engineer"
};

Agenda
• React
• browserify
• gulp

About React
• Facebook製Viewフレームワーク
• コンポーネント指向
• VirtualDOM

About React
var Hello = React.createClass({
render: function(){
return (
<div className="hello">
Hello World!
</div>
);
}
});
React.render( <Hello />, document.getElementById('helloBox') );

何が良いのか
• DOM操作を単純化
• コンポーネント単位での設計
• 可読性が高い
• メンテしやすい
• 壊れにくい

DOM操作を単純化
jQueryは「今ある要素に対して処理をする」方式
<ul>
<li class="list" data-item="1">list1</li>
</ul>
// js
$('.list').on("click", function(){
$(this).toggleClass('delete');
});

• DOM変更に弱い
• 現状の状態がDOMにしかない
• 拡張しずらい

Reactは「今のデータを元にDOMをレンダリングする」方式
var dataList = React.createClass({
render: function(){
var items = this.props.items.map(
function(item){ return <li>{item}</li>; }
);
return(
<ul>{items}</ul>
);
}
});

コンポーネント単位での設計
• 構成要素をコンポーネントに分ける
• 各コンポーネントの実装とDOMを1箇所に記述
• htmlライクな記述をJSファイル内に記述(JSX)

JSX?
JavaScript内にxmlライクなシンタックスで記述できる
var name = React.createClass({
render: function(){
return(
<div className="Wrap">
<div className="first">{this.props.first}</div>
<div className="last">{this.props.last}</div>
</div>
);
}
});

Points
• React.createClass() でコンポーネントを作成
• renderメソッドにコンポーネントのDOMを記述
• propはコンポーネントに渡されるデータ
• stateはアプリケーションの状態を持つデータ
• stateに変更があった際には再描画される
• コンポーネント間で値を受け渡す

Components
• 1つのコンポーネントは機能もviewも1箇所に記述
• like Web components

Components
これからはアプリケーション設計の際には
• コンポーネント単位での設計
• 各コンポーネントの組み合わせ
これらをより重視して作らなければならない

JSはモジュールの仕組みがない
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="something.js"></script>
<script src="more.js"></script>
<script src="inquisitive.js"></script>
<script src="app.js"></script>
</body>
</html>

Browserify
// moduleA.js
module.exports = {
log: function(){
console.log('it is moduleA');
}
};
// moduleB.js
module.exports = {
log: function(){
console.log('this is moduleB');
}
};

Browserify
// main.js
var moduleA = require('moduleA');
var moduleB = require('moduleB');
moduleA.log();
moduleB.log();
// it is moduleA
// this is moduleB

Browserify
• jQueryを使う場合
// main.js
var $ = require('jquery');
$('.ele').on("click", anything);

Browserify
npm install -g browserify
npm install --save jquery
browserify main.js -o bundle.js
// make bundle.js

React Components with Browserify
var React = require('react');
var Child = require('./child'); // React component
var main = React.createClass({
render(){
return (
<div className="main">
<Child data={this.state.data}/>
</div>
);
}
});

Watchify
• ファイルを監視してBrowserifyのビルドを自動化
• 通常はrequireしたファイル全てを結合する
• 速度が遅い（Reactは130KB,jQueryは84KB）
• watchifyなら差分ビルドが可能

Browserify on Gulp
• jsだけではなくcss等のビルドもやってる
• gulp watch?
• gulp watchでは差分ビルドできない
• 遅い
• 1コマンドでwatchもwatchifyも動かしたい

https://github.com/muyuu/
searchKindle

JSの必須スキルは
増える一方

フロントエンドは進化の
速度が早すぎる

人はいつ死ぬかって？
自らを成長させることを
辞めたときさ
— おれ

走って走って走って
なお走り続けてこそ
良い未来に進める

Start React with Browserify

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Start React with Browserify (20)

More from Muyuu Fujita (14)

Recently uploaded (8)

Start React with Browserify