React.js or why DOM finally makes sense
-
Upload
eldar-djafarov -
Category
Technology
-
view
1.731 -
download
1
description
Transcript of React.js or why DOM finally makes sense
![Page 1: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/1.jpg)
React.js or why DOM finally makes sense
![Page 2: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/2.jpg)
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>
![Page 3: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/3.jpg)
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>
![Page 4: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/4.jpg)
JSX rocks! ⊙⌣⊙
• tags are functions • you can use closures • scope is straightforward • normalized DOM
![Page 5: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/5.jpg)
the rules!
• do not mix logic and presentation
• do not write inline javascript
![Page 6: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/6.jpg)
FUCK!the rules!
• do not mix logic and presentation
• do not write inline javascript
![Page 7: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/7.jpg)
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') );
![Page 8: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/8.jpg)
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>); } });
![Page 9: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/9.jpg)
componentscomponents
components
![Page 10: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/10.jpg)
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>); } });
![Page 11: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/11.jpg)
Props & State
![Page 12: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/12.jpg)
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') ); })
![Page 13: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/13.jpg)
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> } });
![Page 14: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/14.jpg)
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
![Page 15: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/15.jpg)
be Lazy withfactory
• get bunch of id’s • get empty model’s from factory by these id’s • pass them to component • PROFIT!
![Page 16: React.js or why DOM finally makes sense](https://reader034.fdocuments.us/reader034/viewer/2022042614/554f96e7b4c905435d8b53dd/html5/thumbnails/16.jpg)
Q&A
@edjafarov eldar.djafarov.com
just visit reactjs.com
✌