React js101
0 likes289 views
React is a JavaScript library created by Facebook for building user interfaces. It renders the entire application on every change by using a virtual DOM that represents the real DOM as a JavaScript object. When state changes, React compares the virtual DOM to the previous one and only updates what changed in the real DOM for better performance than traditional frameworks that update pieces of the DOM individually.
React js101
- 1. a J a v a S c r i p t l i b r a r y f o r b u i l d i n g U I REACT JS created by Facebook / Instagram Song YANG
- 2. KEY CONCEPTS ▫︎Just the UI ▫︎Re-render everything on every change ▫︎Virtual DOM ▫︎Synthetic Events ▫︎Component-centric view layer 2
- 3. REACT JS is not a MVC framework JUST UI 3
- 4. ONLY CARES ABOUT THE UI ▫︎Routers ▫︎Models ▫︎Bindings ▫︎Observers ▫︎Templates 4
- 5. BINDINGS / OBSERVERS ▫︎Must mutate Model to propagate changes to View ▫︎Each mutation can trigger other observers (Run Loop / Digest Loop) ▫︎Can't use immutable data structures as your model ▫︎Two-way bindings open Pandora’s box ▫︎No easy way of knowing how far-reaching a change in the reverse direction is going to be 5
- 6. 6
- 7. RE-RENDER THE ENTIRE APP ON EVERY CHANGE 7
- 8. 8 ▫︎No observers ▫︎No magical data binding ▫︎No model dirty checking ▫︎No $apply() or $digest() Makes things simple to reason about Re-render
- 10. VIRTUAL DOM 10 ▫︎in-memory data structure (fast) ▫︎JavaScript representation of DOM nodes, totally separate from the browser’s slow JavaScript/C++ DOM API ▫︎Makes server-side rendering possible ▫︎Most important…
- 12. 12 ▫︎Build new Virtual DOM tree ▫︎Diff with old one ▫︎Compute minimal set of changes ▫︎Put them in a queue ▫︎Batch render all changes to browser Treat the DOM like a GPU! ON EVERY UPDATE
- 13. 13 Render from Data to Virtual DOM is fast No string concatenation
- 15. 15 ▫︎React implements it's own event system ▫︎a cross-browser wrapper around the browser's native event ▫︎same interface as the browser's native event Treat the DOM like a GPU! Synthetic Events
- 16. 16 Talk is Cheap, show you the code
- 17. 17 JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React. JSX
- 18. 18
- 20. 20 1 Rendering
- 21. 21 2 Components
- 22. 22
- 23. 23 3 Props
- 24. 24
- 25. 25 4 State
- 26. 26
- 27. 27 5 Composition
- 28. 28
- 29. 29 Thanks