Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React.js
or why DOM finally makes sense
JSX ⊙_⊙
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  name	
  =	
  "Foo",	
  commentText	
  =	
  "Bar",	
  avatarUrl="Baz";	
 ...
JSX is nice!
⊙⌣⊙
!
var	
  name	
  =	
  "Foo",	
  commentText	
  =	
  "Bar",	
  avatarUrl="Baz";	
  
	
  	
  
var	
  avatar...
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
components

components
components
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  User	
  =	
  React.createClass({	
  
	
  	
  r...
components

components
components
/**	
  @jsx	
  React.DOM	
  */	
  
var	
  Avatar	
  =	
  React.createClass({	
  
	
  	
 ...
components

components
components
Props & State
var	
  User	
  =	
  React.createClass({	
  
	
  	
  getInitialState:	
  function(){	
  
	
   	
  	
  return	...
Props & State
routing
doesn’t matter
http://visionmedia.github.io/page.js/
var	
  User	
  =	
  require('./User');	
  
	
  	
  
page('/us...
2 way binding/**	
  @jsx	
  React.DOM	
  */	
  
var	
  WithLink	
  =	
  React.createClass({	
  
	
  	
  mixins:	
  [React....
models
or
emitters?
What if models and collections are not enough?
https://github.com/component/emitter
var	
  Emitter	
  ...
be Lazy with
factory
• 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
✌
Upcoming SlideShare
Loading in …5
×

React.js or why DOM finally makes sense

2,971 views

Published on

React.js

Published in: Technology
  • Be the first to comment

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 ✌

×