reactjs intro

Transcript

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