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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (12)

Similar a Start React with Browserify

Similar a Start React with Browserify (20)

Más de Muyuu Fujita

Más de Muyuu Fujita (14)

Start React with Browserify