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

reactjs intro

37500337ba5d2aebc962959ed83928e5?s=47 Matthias Le Brun
December 09, 2014
380

reactjs intro

37500337ba5d2aebc962959ed83928e5?s=128

Matthias Le Brun

December 09, 2014
Tweet

Transcript

  1. None
  2. REACTJS

  3. COMMENT SIMPLIFIER LA CONCEPTION DE L'UI ?

  4. RAPPELLE TOI AVANT XHR

  5. Client Serveur

  6. Client Serveur

  7. Client Serveur

  8. Client Serveur

  9. DATA RENDER

  10. DATA RENDER DOM STATE DATA-BINDING ENLEVER LES VUES NON-ACTIVES RAJOUTER

    LES VUES
  11. DATA RENDER DOM STATE DATA-BINDING ENLEVER LES VUES NON-ACTIVES RAJOUTER

    LES VUES
  12. RE-RENDER ALL THE THINGS

  13. render()  {      return  (        

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

     <h1>hello  {this.props.name}</h1>      )   }
  15. DÉCRIRE LE COMPOSANT À TOUT MOMENT

  16. TOUT EST UN COMPOSANT

  17. 1 17

  18. 1 18 <CommentList  />

  19. 1 19 <CommentList  /> <Comment  />

  20. JSX JAVASCRIPT XML

  21. 1 21 <div  className="wtf"></div>

  22. 1 22 React.createElement("div",  {className:"wtf"})

  23. BONUS ES6 FLOW

  24. API

  25. ng-repeat="friend in friends | filter:searchText"

  26. WTF

  27. TOUTES LES FEATURES DE JAVASCRIPT DANS LE TEMPLATE

  28. GETTERS : .css(propertyName) .css(propertyNames) SETTERS : .css(propertyName, value) .css(propertyName, func)

    .css(properties)
  29. LELNOPE

  30. EXPLICITE >>> *

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

     node)       React.renderToStaticMarkup(<Component  />,  node)
  32. LIFECYCLE 32 componentWillMount   componentDidMount   componentWillUnmount

  33. LIFECYCLE 33 shouldComponentUpdate   componentWillUpdate   componentDidUpdate   componentWillReceiveProps

  34. STATE 34 getInitialState()  {}   setState({})   replaceState({})

  35. DEFAULTS 35 getDefaultProps()  {}

  36. COMPOSITION 36 mixins  :  [      {    

         componentDidMount()  {              console.log("foo")          }      }   ]
  37. 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
  38. 1 38 var  React   var  Comment      

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

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

    var  CommentList      propTypes          comments      },      render()  {                                      {                    )      }   })       module                {this.props.comments.map((item)  =>  <Comment  item={item}  key={item.id}/>)}  
  41. 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")  
  42. 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
  43. 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          })      },
  44. 1 44 var  React   var  Author      

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

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

  47. 1 47 <div  onClick={this.methodName}  />   <div  onClickCapture={this.methodName}  />

  48. 1 48 <div  onClick={this.methodName}  />   <div  onClickCapture={this.methodName}  /> AUTOBINDING!

  49. PERFORMANCE

  50. VIRTUAL DOM

  51. <CommentList  /> <Comment  /> <Comment  /> <Author  /> <Author  />

  52. <CommentList  /> <Comment  /> <Comment  /> <Author  /> <Author  />

  53. <CommentList  /> <Comment  /> <Comment  /> <Author  /> <Author  />

  54. <CommentList  /> <Comment  /> <Author  />

  55. OBJECT POOLING

  56. IMMUTABILITY

  57. 1 57 shouldComponentUpdate(nextProps,  nextState)  {      return  this.props.id  !==

     nextProps.id   }
  58. FRAMEWORK? BIBLIOTHÈQUE

  59. 0 225 450 675 900 ANGULAR COURBE D'APPRENTISSAGE

  60. 0 25 50 75 100 REACTJS COURBE D'APPRENTISSAGE

  61. RÉCAP

  62. RE-RENDER ALL THE THINGS COMPONENTS EVERYWHERE API EXPLICITE >>>> *

  63. MERCI Matthias Le Brun lead front-end mlebrun@altima.fr