React.js or why DOM finally makes sense

2,496 views
2,319 views

Published on

React.js

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,496
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

React.js or why DOM finally makes sense

  1. 1. React.js or why DOM finally makes sense
  2. 2. 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>
  3. 3. 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>
  4. 4. JSX rocks! ⊙⌣⊙ • tags are functions • you can use closures • scope is straightforward • normalized DOM
  5. 5. the rules! • do not mix logic and presentation • do not write inline javascript
  6. 6. FUCK! the rules! • do not mix logic and presentation • do not write inline javascript
  7. 7. components
 components 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')   );
  8. 8. components
 components 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>);      }   });
  9. 9. components
 components components
  10. 10. Props & State var  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>);      }   });
  11. 11. Props & State
  12. 12. 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')      );   })
  13. 13. 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>      }   });
  14. 14. 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
  15. 15. be Lazy with factory • get bunch of id’s • get empty model’s from factory by these id’s • pass them to component • PROFIT!
  16. 16. Q&A @edjafarov eldar.djafarov.com just visit reactjs.com ✌

×