Introduction to ReactJS
•
4 likes•5,308 views
This document introduces ReactJS, a JavaScript library for building user interfaces. It discusses key React concepts like the virtual DOM, which is a JavaScript representation of real DOM elements that allows React to efficiently update the real DOM by comparing it to a new virtual DOM. It also covers one-way data binding in React, where data flows from parent to child components through props, while events flow in the opposite direction. Finally, it emphasizes that in React, everything is a component, and components manage their own state and receive immutable props from parent components.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to ReactJS
Similar to Introduction to ReactJS (20)
Recently uploaded
Recently uploaded (20)
Introduction to ReactJS
- 1. Introduction to ReactJS Dinh Hoang Long @dinhhoanglong91
- 2. ReactJS A Javascript library for building user interfaces 2
- 3. JUST THE UI V in MVC 3
- 4. VIRTUAL DOM Simpler programming model Better performance 4
- 5. HTML DOM ● Document Object Model ● Constructed by browser when page is loaded ● JavaScript gets all the power to create dynamic HTML 5
- 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. Virtual DOM ● Pure JavaScript (JavaScript Object) ● render() to create real DOM ● Modify real DOM when something changes 7
- 8. 8
- 9. 9 JSX = JS + XML
- 12. 90's webpage 12 Full-page refresh Virtual DOM Re-render Do not mutate
- 13. 90's webpage 13 Full-page refresh Virtual DOM Re-render Do not mutate Data is guaranteed to be updated
- 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 What make Virtual DOM fast?
- 16. What make Virtual DOM fast? React: “Version control” of DOM 16
- 17. When we were “children” 17 With Version Control What we’ve done --- with a project named “BreakOut” BreakOutVer1 BreakOutVer2 BreakOutVer3 BreakOutFinal BreakOutFinal2
- 18. DIFF ALGORITHM Generate a list of DOM mutation O(n) http://facebook.github.io/react/docs/reconciliation.html 18
- 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 OLD NEW
- 21. 21 OLD NEW
- 22. 22 OLD NEW
- 23. 23 OLD NEW
- 24. 24 OLD NEW
- 25. 25 OLD NEW
- 27. ONE-WAY DATA BINDING Keep complexity under control 27
- 28. Traditional data flow Any component can communicate with other component 28
- 29. React thinking No controllers No models No directives No global event listeners ... Everything is component 29
- 30. Everything is component 30 https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
- 32. Component 32 state created within component mutable props passed in from parent immutable
- 36. Does data flow one way? 36
- 37. Does data flow one way? 37 Events flow up Data flows down
- 38. Does data flow one way? 38 Events flow up Data flows down
- 39. Events - Data Flow 39 send props request check
- 40. Batch update 40
- 41. Batch update 41 request check event callback
- 42. Batch update 42 request check event callback set state
- 43. Batch update 43 request check event callback set state
- 44. Summary V in MVC Virtual DOM One-way data binding 44