Upgrade to Pro — share decks privately, control downloads, hide ads and more …

reactjs intro

Matthias Le Brun
December 09, 2014
490

reactjs intro

Matthias Le Brun

December 09, 2014
Tweet

Transcript

  1. render()  {      return  (        

     <h1>hello  {this.props.name}</h1>      )   }
  2. render()  {      return  (        

     <h1>hello  {this.props.name}</h1>      )   }
  3. API

  4. WTF

  5. 1 31 React.render(<Component  />,  node)       React.renderToString(<Component  />,

     node)       React.renderToStaticMarkup(<Component  />,  node)
  6. COMPOSITION 36 mixins  :  [      {    

         componentDidMount()  {              console.log("foo")          }      }   ]
  7. 1 37 var  React  =  require("react/addons")   var  Comment  =

     require("components/comment")       var  CommentList  =  React.createClass({      propTypes  :  {          comments  :  React.PropTypes.arrayOf(React.PropTypes.object).isRequired      },      render()  {          return  (              <div  className="CommentList">                  {this.props.comments.map((item)  =>  <Comment  item={item}  key={item.id}/>)}              </div>          )      }   })       module.exports  =  CommentList
  8. 1 38 var  React   var  Comment      

    var  CommentList      propTypes          comments      },      render()  {                                      {                    )      }   })       module React.createClass
  9. 1 39 var  React   var  Comment      

    var  CommentList      propTypes          comments      },      render()  {                                      {                    )      }   })       module    propTypes  :  {          comments  :  React.PropTypes.arrayOf(React.PropTypes.object).isRequired      },
  10. 1 40 var  React   var  Comment      

    var  CommentList      propTypes          comments      },      render()  {                                      {                    )      }   })       module                {this.props.comments.map((item)  =>  <Comment  item={item}  key={item.id}/>)}  
  11. 1 41 var  React   var  Comment      

    var  CommentList      propTypes          comments      },      render()  {                                      {                    )      }   })       module                {this.props.comments.map((item)  =>  <Comment  item={item}  key={item.id}/>)}   var  Comment  =  require("components/comment")  
  12. 1 42 var  React  =  require("react/addons")   var  Author  =

     require("components/author")       var  Comment  =  React.createClass({      propTypes  :  {          item  :  React.PropTypes.shape({              id  :  React.PropTypes.string.isRequired,              message  :  React.PropTypes.string,              author  :  React.PropTypes.object          })      },      render()  {          return  (              <div  className="CommentList-­‐item  Comment">                  <Author  author={this.props.author}  />                  <div                          className="Comment-­‐message"                        dangerouslySetInnerHTML={{__html  :  this.props.message}}/>              </div>          )      }   })       module.exports  =  Comment
  13. 1 43 var  React   var  Author      

    var  Comment      propTypes          item              id              message              author          })      },      render()  {                                                                            className                                          )      }   })       module    propTypes  :  {          item  :  React.PropTypes.shape({              id  :  React.PropTypes.string.isRequired,              message  :  React.PropTypes.string,              author  :  React.PropTypes.object          })      },
  14. 1 44 var  React   var  Author      

    var  Comment      propTypes          item              id              message              author          })      },      render()  {                                                                            className                                          )      }   })       module                <Author  author={this.props.author}  />  
  15. 1 45 var  React   var  Author      

    var  Comment      propTypes          item              id              message              author          })      },      render()  {                                                                            className                                          )      }   })       module dangerouslySetInnerHTML={{__html  :  this.props.message}}