react.js or why dom finally makes sense

16
React.js or why DOM finally makes sense

Upload: eldar-djafarov

Post on 11-May-2015

1.728 views

Category:

Technology


1 download

DESCRIPTION

React.js

TRANSCRIPT

Page 1: React.js or why DOM finally makes sense

React.js or why DOM finally makes sense

Page 2: 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>

Page 3: React.js or why DOM finally makes sense

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

JSX rocks! ⊙⌣⊙

• tags are functions • you can use closures • scope is straightforward • normalized DOM

Page 5: React.js or why DOM finally makes sense

the rules!

• do not mix logic and presentation

• do not write inline javascript

Page 6: React.js or why DOM finally makes sense

FUCK!the rules!

• do not mix logic and presentation

• do not write inline javascript

Page 7: React.js or why DOM finally makes sense

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

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

componentscomponents

components

Page 10: React.js or why DOM finally makes sense

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

Props & State

Page 12: React.js or why DOM finally makes sense

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

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

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

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

Q&A

@edjafarov eldar.djafarov.com

just visit reactjs.com