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

reactjs intro

Matthias Le Brun
December 09, 2014
390

reactjs intro

Matthias Le Brun

December 09, 2014
Tweet

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. 1
    17

    View Slide

  18. 1
    18

    View Slide

  19. 1
    19


    View Slide

  20. JSX
    JAVASCRIPT XML

    View Slide

  21. 1
    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. 1
    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
    [email protected]

    View Slide