React js
Download as PPT, PDF42 likes26,628 views
This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.
React js
- 1. React: A Sneak Peak Jai Santhosh UI Engineer @ Flipkart @jaisanth
- 2. Meet React. Not yet another JS framework!
- 3. Meet React. But just a library for creating user interfaces.
- 4. Meet React. Renders your UI and responds to events.
- 5. Meet React. a.k.a. The “V” in MVC
- 7. Build components, not templates Re-render, don’t mutate
- 8. Build components, not templates Re-render, don’t mutate Fast Virtual DOM
- 9. Build components, not templates • Combine DOM generation and display logic. 9
- 10. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. 10
- 11. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. • Data can come from anywhere. 11
- 12. Build components, not templates 12
- 13. Build components, not templates 13
- 14. JSX Allows you to write JS & XML
- 15. JSX Allows you to write JS & XML Together!
- 16. JSX Don’t need to use it as such
- 17. JSX React.DOM.div({}, 'Hello ' + this.props.name)
- 18. Re-render, don’t mutate! • Every component has “state” and “props”. 18
- 19. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. 19
- 20. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. • Re-render the whole app once the state changes. 20
- 21. Re-render, don’t mutate! Data is guaranteed to update! 21
- 22. Re-render, don’t mutate! Just like the 90’s Full-page refresh!! 22
- 24. Fast Virtual DOM Virtual DOM Makes re-rendering on every change fast. 24
- 25. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree 25
- 26. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one 26
- 27. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue 27
- 28. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one • …computes the minimal set of DOM mutations and puts them in a queue • …and batch exexutes all updates 28
- 29. Fast Virtual DOM none to first • Create Node: <div className="first"><span>A Span</span></div> first to second • Replace attribute: className=“second" className=“first" by • Replace node: Span</span> by <p>A Paragraph</p> <span>A second to none • Remove Node: <div className="second"><p>A Paragraph</p></div> 29
- 30. Fast Virtual DOM Virtual DOM is simple and fast 30
- 31. http://reactjs.org/ #reactjs on Freenode IRC reactjs on Google Groups
- 32. Other helpful links: • http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ • https://news.ycombinator.com/item?id=6936975 • https://news.ycombinator.com/item?id=6937921 • http://calendar.perfplanet.com/2013/diff/
- 33. Thank You!!