Download - React.js or why DOM finally makes sense
React.js or why DOM finally makes sense
JSX ⊙_⊙
/** @jsx React.DOM */ var name = "Foo", commentText = "Bar", avatarUrl="Baz"; var avatar = <img src = {avatarUrl}/>; var comment = <div className="comment"> {avatar} @{name}: {commentText} </div>
JSX is nice! ⊙⌣⊙
!var name = "Foo", commentText = "Bar", avatarUrl="Baz"; var avatar = React.DOM.img( {src: avatarUrl}); var comment = React.DOM.div( {className:"comment"}, avatar, " @",name,": ", commentText )
/** @jsx React.DOM */ var name = "Foo", commentText = "Bar", avatarUrl="Baz"; var avatar = <img src = {avatarUrl}/>; var comment = <div className="comment"> {avatar} @{name}: {commentText} </div>
JSX rocks! ⊙⌣⊙
• tags are functions • you can use closures • scope is straightforward • normalized DOM
the rules!
• do not mix logic and presentation
• do not write inline javascript
FUCK!the rules!
• do not mix logic and presentation
• do not write inline javascript
componentscomponents
components/** @jsx React.DOM */ var User = React.createClass({ render: function() { return (<div> <img src={this.props.avatar}/>: @{this.props.username} </div>); } }); !React.renderComponent( <User username="Eldar" avatar="http://img.src/edjafarov"/>, document.getElementById('example') );
componentscomponents
components/** @jsx React.DOM */ var Avatar = React.createClass({ render: function() { return <img src={this.props.uri}/>; } }); var User = React.createClass({ render: function() { return (<div> <Avatar uri={this.props.avatar}/>: @{this.props.username} </div>); } });
componentscomponents
components
Props & Statevar User = React.createClass({ getInitialState: function(){ return { name:this.props.user.name, uri: this.props.user.uri } }, render: function() { return (<div> <Avatar uri={this.props.avatar}/>: @{this.state.name} </div>); } });
Props & State
routing doesn’t matter
http://visionmedia.github.io/page.js/var User = require('./User'); page('/user/:user', user.load, function(ctx){ React.renderComponent( <User user={ctx.user}/>, document.getElementById('root') ); })
2 way binding/** @jsx React.DOM */ var WithLink = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { return {value: 'Hello!'}; }, render: function() { return <input type="text" valueLink={this.linkState('value')} />; } });
var Hello = React.createClass({ mixins:[ModelMixin, BindMixin], getBackboneModels: function(){ return [this.props.instance] }, render: function() { var model = this.props.instance; return <div> <div>Hello {model.get(‘initial')}</div> <input type="text" valueLink={this.bindTo(model, 'initial')}/> </div> } });
models or
emitters?What if models and collections are not enough?
https://github.com/component/emitter
var Emitter = require('emitter'); var UserModel = new Emitter({} data: {}, update: function(){ //some async update this.data = newData; this.emit('change'); //-‐-‐-‐ } ); UserModel.on('change', /*update component*/); //You can use mixin to do that automatically
be Lazy withfactory
• get bunch of id’s • get empty model’s from factory by these id’s • pass them to component • PROFIT!
Q&A
@edjafarov eldar.djafarov.com
just visit reactjs.com
✌