Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to ReactJS

4,357 views

Published on

Introduction to ReactJS

Published in: Software
  • Sex in your area is here: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to ReactJS

  1. 1. Introduction to ReactJS Dinh Hoang Long @dinhhoanglong91
  2. 2. ReactJS A Javascript library for building user interfaces 2
  3. 3. JUST THE UI V in MVC 3
  4. 4. VIRTUAL DOM Simpler programming model Better performance 4
  5. 5. HTML DOM ● Document Object Model ● Constructed by browser when page is loaded ● JavaScript gets all the power to create dynamic HTML 5
  6. 6. HTML DOM ● Document Object Model ● Constructed by browser when page is loaded ● JavaScript gets all the power to create dynamic HTML 6 http://www.w3schools.com/js/js_htmldom.asp
  7. 7. Virtual DOM ● Pure JavaScript (JavaScript Object) ● render() to create real DOM ● Modify real DOM when something changes 7
  8. 8. 8
  9. 9. 9 JSX = JS + XML
  10. 10. Why Virtual DOM? 10
  11. 11. 90's webpage 11 Full-page refresh
  12. 12. 90's webpage 12 Full-page refresh Virtual DOM Re-render Do not mutate
  13. 13. 90's webpage 13 Full-page refresh Virtual DOM Re-render Do not mutate Data is guaranteed to be updated
  14. 14. 90's webpage 14 Full-page refresh Virtual DOM Re-render Do not mutate SLOW FAST Data is guaranteed to be updated
  15. 15. 15 What make Virtual DOM fast?
  16. 16. What make Virtual DOM fast? React: “Version control” of DOM 16
  17. 17. When we were “children” 17 With Version Control What we’ve done --- with a project named “BreakOut” BreakOutVer1 BreakOutVer2 BreakOutVer3 BreakOutFinal BreakOutFinal2
  18. 18. DIFF ALGORITHM Generate a list of DOM mutation O(n) http://facebook.github.io/react/docs/reconciliation.html 18
  19. 19. Re-rendering process 1. Build new virtual DOM subtree 2. Diff with the old one 3. Compute the minimal set of DOM mutations 4. Batch execute all update 19
  20. 20. 20 OLD NEW
  21. 21. 21 OLD NEW
  22. 22. 22 OLD NEW
  23. 23. 23 OLD NEW
  24. 24. 24 OLD NEW
  25. 25. 25 OLD NEW
  26. 26. 26 OLD NEW Immutate Unnecessary
  27. 27. ONE-WAY DATA BINDING Keep complexity under control 27
  28. 28. Traditional data flow Any component can communicate with other component 28
  29. 29. React thinking No controllers No models No directives No global event listeners ... Everything is component 29
  30. 30. Everything is component 30 https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
  31. 31. Everything is component 31 FilterableProductTable SearchBar ProductTable ProductCategoryRow ProductRow https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
  32. 32. Component 32 state created within component mutable props passed in from parent immutable
  33. 33. State 33 changes state itself
  34. 34. Props 34 send props
  35. 35. Props 35 send props
  36. 36. Does data flow one way? 36
  37. 37. Does data flow one way? 37 Events flow up Data flows down
  38. 38. Does data flow one way? 38 Events flow up Data flows down
  39. 39. Events - Data Flow 39 send props request check
  40. 40. Batch update 40
  41. 41. Batch update 41 request check event callback
  42. 42. Batch update 42 request check event callback set state
  43. 43. Batch update 43 request check event callback set state
  44. 44. Summary V in MVC Virtual DOM One-way data binding 44
  45. 45. DEMO 45 https://github.com/dinhhoanglong91/reactjs/tree/master/counter

×