Downloaded 848 times
Uploaded byJai Santhosh
React js
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.
In this document
Powered by AI
Overview of React by Jai Santhosh, presenting it as a unique library focused on building user interfaces, highlighting its role as the 'V' in MVC.
Emphasis on building components instead of templates, showcasing the importance of re-rendering, the fast Virtual DOM, and transforming data into UI components.
Introduction to JSX, explaining its ability to combine JavaScript and XML, and providing a simple React.DOM example.
Discussion on component state and props, presenting them as immutable, guaranteeing data updates, and illustrating the concept of re-rendering.
Details on the Fast Virtual DOM, explaining how it builds a new subtree, diffs with the old one, and executes minimal DOM mutations for performance.
Links for additional information on React and JavaScript frameworks for deeper understanding and engagement.
Thank you slide marking the end of the presentation.
More Related Content
React js
- 1. React: A SneakPeak Jai Santhosh UI Engineer @ Flipkart @jaisanth
- 2. Meet React. Not yetanother JS framework!
- 3. Meet React. But justa library for creating user interfaces.
- 4. Meet React. Renders yourUI and responds to events.
- 5. Meet React. a.k.a. The“V” in MVC
- 6.
- 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, nottemplates • Combine DOM generation and display logic. 9
- 10. Build components, nottemplates • Combine DOM generation and display logic. • Transform data into interface components. 10
- 11. Build components, nottemplates • Combine DOM generation and display logic. • Transform data into interface components. • Data can come from anywhere. 11
- 12. Build components, nottemplates 12
- 13. Build components, nottemplates 13
- 14. JSX Allows you towrite JS & XML
- 15. JSX Allows you towrite JS & XML Together!
- 16. JSX Don’t need touse 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! Datais guaranteed to update! 21
- 22. Re-render, don’t mutate! Justlike the 90’s Full-page refresh!! 22
- 24. Fast Virtual DOM VirtualDOM Makes re-rendering on every change fast. 24
- 25. Fast Virtual DOM Onevery update… • React builds a new virtual DOM subtree 25
- 26. Fast Virtual DOM Onevery update… • React builds a new virtual DOM subtree • …diffs it with the old one 26
- 27. Fast Virtual DOM Onevery 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 Onevery 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 noneto 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 VirtualDOM is simple and fast 30
- 31. http://reactjs.org/ #reactjs on FreenodeIRC 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.