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

reactjs intro

Matthias Le Brun
December 09, 2014
450

reactjs intro

Matthias Le Brun

December 09, 2014
Tweet

Transcript

  1. COMMENT
    SIMPLIFIER LA
    CONCEPTION DE L'UI ?

    View full-size slide

  2. RAPPELLE TOI
    AVANT XHR

    View full-size slide

  3. Client
    Serveur

    View full-size slide

  4. Client
    Serveur

    View full-size slide

  5. Client
    Serveur

    View full-size slide

  6. Client
    Serveur

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. RE-RENDER
    ALL THE THINGS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. DÉCRIRE LE COMPOSANT
    À TOUT MOMENT

    View full-size slide

  13. TOUT EST
    UN COMPOSANT

    View full-size slide

  14. JSX
    JAVASCRIPT XML

    View full-size slide

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

    View full-size slide

  16. BONUS
    ES6
    FLOW

    View full-size slide

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

    View full-size slide

  18. TOUTES LES FEATURES
    DE JAVASCRIPT
    DANS LE TEMPLATE

    View full-size slide

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

    View full-size slide

  20. EXPLICITE >>> *

    View full-size slide

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

    View full-size slide

  22. LIFECYCLE
    32
    componentWillMount  
    componentDidMount  
    componentWillUnmount

    View full-size slide

  23. LIFECYCLE
    33
    shouldComponentUpdate  
    componentWillUpdate  
    componentDidUpdate  
    componentWillReceiveProps

    View full-size slide

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

    View full-size slide

  25. DEFAULTS
    35
    getDefaultProps()  {}

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 1
    48
     

    AUTOBINDING!

    View full-size slide

  37. OBJECT POOLING

    View full-size slide

  38. IMMUTABILITY

    View full-size slide

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

    View full-size slide

  40. FRAMEWORK?
    BIBLIOTHÈQUE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. MERCI
    Matthias Le Brun
    lead front-end
    [email protected]

    View full-size slide