reactjs intro

Transcript

1. View Slide

2. REACTJS
   

   View Slide

3. COMMENT
   SIMPLIFIER LA
   CONCEPTION DE L'UI ?
   

   View Slide

4. RAPPELLE TOI
   AVANT XHR
   

   View Slide

5. Client
   Serveur
   

   View Slide

6. Client
   Serveur
   

   View Slide

7. Client
   Serveur
   

   View Slide

8. Client
   Serveur
   

   View Slide

9. DATA RENDER
   

   View Slide

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

    View Slide

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

    View Slide

12. RE-RENDER
    ALL THE THINGS
    

    View Slide

13. render()  {  
       return  (  
           hello  {this.props.name}  
       )  
    }
    

    View Slide

14. render()  {  
       return  (  
           hello  {this.props.name}  
       )  
    }
    

    View Slide

15. DÉCRIRE LE COMPOSANT
    À TOUT MOMENT
    

    View Slide

16. TOUT EST
    UN COMPOSANT
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. JSX
    JAVASCRIPT XML
    

    View Slide

21. View Slide

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

    View Slide

23. BONUS
    ES6
    FLOW
    

    View Slide

24. API
    

    View Slide

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

    View Slide

26. WTF
    

    View Slide

27. TOUTES LES FEATURES
    DE JAVASCRIPT
    DANS LE TEMPLATE
    

    View Slide

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

    View Slide

29. LELNOPE
    

    View Slide

30. EXPLICITE >>> *
    

    View Slide

31. 1
    31
    React.render(,  node)  
       
    React.renderToString(,  node)  
       
    React.renderToStaticMarkup(,  node)
    

    View Slide

32. LIFECYCLE
    32
    componentWillMount  
    componentDidMount  
    componentWillUnmount
    

    View Slide

33. LIFECYCLE
    33
    shouldComponentUpdate  
    componentWillUpdate  
    componentDidUpdate  
    componentWillReceiveProps
    

    View Slide

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

    View Slide

35. DEFAULTS
    35
    getDefaultProps()  {}
    

    View Slide

36. COMPOSITION
    36
    mixins  :  [  
       {  
           componentDidMount()  {  
               console.log("foo")  
           }  
       }  
    ]
    

    View Slide

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  (  
                 
                   {this.props.comments.map((item)  =>  )}  
                 
           )  
       }  
    })  
       
    module.exports  =  CommentList
    

    View Slide

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

    View Slide

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

    View Slide

40. 1
    40
    var  React  
    var  Comment  
       
    var  CommentList  
       propTypes  
           comments  
       },  
       render()  {  
           
               
                   {
               
           )  
       }  
    })  
       
    module
                   {this.props.comments.map((item)  =>  )}  
    

    View Slide

41. 1
    41
    var  React  
    var  Comment  
       
    var  CommentList  
       propTypes  
           comments  
       },  
       render()  {  
           
               
                   {
               
           )  
       }  
    })  
       
    module
                   {this.props.comments.map((item)  =>  )}  
    var  Comment  =  require("components/comment")  
    

    View Slide

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  (  
                 
                     
                                         className="Comment-­‐message"  
                         dangerouslySetInnerHTML={{__html  :  this.props.message}}/>  
                 
           )  
       }  
    })  
       
    module.exports  =  Comment
    

    View Slide

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  
           })  
       },
    

    View Slide

44. 1
    44
    var  React  
    var  Author  
       
    var  Comment  
       propTypes  
           item  
               id  
               message  
               author  
           })  
       },  
       render()  {  
           
               
                   
                   
                         className
                         
               
           )  
       }  
    })  
       
    module
                     
    

    View Slide

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

    View Slide

46. DOM EVENTS
    

    View Slide

47. View Slide

48. 1
    48
     
    
    AUTOBINDING!
    

    View Slide

49. PERFORMANCE
    

    View Slide

50. VIRTUAL DOM
    

    View Slide

51. 
    
    
    

    View Slide

52. 
    
    
    

    View Slide

53. 
    
    
    

    View Slide

54. 
    
    
    

    View Slide

55. OBJECT POOLING
    

    View Slide

56. IMMUTABILITY
    

    View Slide

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

    View Slide

58. FRAMEWORK?
    BIBLIOTHÈQUE
    

    View Slide

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

    View Slide

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

    View Slide

61. RÉCAP
    

    View Slide

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

    View Slide

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

    View Slide