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.

React js

18,689 views

Published on

Published in: Technology

React js

  1. 1. React: A Sneak Peak Jai Santhosh UI Engineer @ Flipkart @jaisanth
  2. 2. Meet React. Not yet another JS framework!
  3. 3. Meet React. But just a library for creating user interfaces.
  4. 4. Meet React. Renders your UI and responds to events.
  5. 5. Meet React. a.k.a. The “V” in MVC
  6. 6. Build components, not templates
  7. 7. Build components, not templates Re-render, don’t mutate
  8. 8. Build components, not templates Re-render, don’t mutate Fast Virtual DOM
  9. 9. Build components, not templates • Combine DOM generation and display logic. 9
  10. 10. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. 10
  11. 11. Build components, not templates • Combine DOM generation and display logic. • Transform data into interface components. • Data can come from anywhere. 11
  12. 12. Build components, not templates 12
  13. 13. Build components, not templates 13
  14. 14. JSX Allows you to write JS & XML
  15. 15. JSX Allows you to write JS & XML Together!
  16. 16. JSX Don’t need to use it as such
  17. 17. JSX React.DOM.div({}, 'Hello ' + this.props.name)
  18. 18. Re-render, don’t mutate! • Every component has “state” and “props”. 18
  19. 19. Re-render, don’t mutate! • Every component has “state” and “props”. • Acts as an “Immutable DOM”. 19
  20. 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. 21. Re-render, don’t mutate! Data is guaranteed to update! 21
  22. 22. Re-render, don’t mutate! Just like the 90’s Full-page refresh!! 22
  23. 23. Fast Virtual DOM Virtual DOM Makes re-rendering on every change fast. 24
  24. 24. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree 25
  25. 25. Fast Virtual DOM On every update… • React builds a new virtual DOM subtree • …diffs it with the old one 26
  26. 26. 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
  27. 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 • …and batch exexutes all updates 28
  28. 28. 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
  29. 29. Fast Virtual DOM Virtual DOM is simple and fast 30
  30. 30. http://reactjs.org/ #reactjs on Freenode IRC reactjs on Google Groups
  31. 31. 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/
  32. 32. Thank You!!

×