• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,180
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
24
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. React.js or why DOM finally makes sense
  • 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. 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. JSX rocks! ⊙⌣⊙ • tags are functions • you can use closures • scope is straightforward • normalized DOM
  • 5. the rules! • do not mix logic and presentation • do not write inline javascript
  • 6. FUCK! the rules! • do not mix logic and presentation • do not write inline javascript
  • 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. 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. components
 components components
  • 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. Props & State
  • 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. 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. 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. 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. Q&A @edjafarov eldar.djafarov.com just visit reactjs.com ✌