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.

Learning React - I

4,702 views

Published on

Introduce to React

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Learning React - I

  1. 1. Learning React - I Senior Front-End Manager Mitch Chen
  2. 2. Outline • Showcase • Overview • Tutorial • Where To Go From Here • Q & A
  3. 3. Showcase • Facebook • Instagram • Khan Academy • The New York Times • Mobile Web App
  4. 4. Facebook Lookback Video
  5. 5. Instagram
  6. 6. Khan Academy
  7. 7. NYTimes
  8. 8. Overview • What is React? • Why React Rock? • Components, Not Templates • Re-render • Virtual DOM
  9. 9. What Is React ?
  10. 10. • A Library for creating user interfaces • Not yet another JS framework • Renders your UI and responds to Events • Aka: The V in MVC
  11. 11. Why React Rock?
  12. 12. • Battle-tested on Facebook and Instagram • Building Large Applications with data that changes over time • Components are so Encapsulated, make code Reuse, Testing and Separation of Concerns easy • Browser support back to IE8
  13. 13. Components, Not Templates
  14. 14. • Separation of Concerns: Reduce Coupling, increase Cohesion • Components are the right way to separate concerns • Display Logic and Markup are highly Cohesive: They both show the UI • React component use Expressive power of programming language(JSX) to build UIs • React component: A highly Cohesive building block for UIs Loosely Coupled with other components
  15. 15. • Components are Reusable, Composable and Unit Testable • Build many simple components that does one thing really well • Then compose them into a bigger functional unit • Which allows you to structure the application better with more flexibility
  16. 16. Re-Render
  17. 17. • State has data you own, Props has data you borrow • When the state(data) changes, React Re-renders the Entire Component • No magical data binding • No model dirty checking • No more explicit DOM operations: Everything is declarative
  18. 18. ReactJS v.s. AngularJS
  19. 19. Data flow when a user event results in a DOM update
  20. 20. Virtual DOM
  21. 21. Traditional Web App React Web App
  22. 22. • Makes re-rendering on every change fast • Computes minimal DOM operations • Batched reads and writes for optimal DOM performance • Usually faster than manual DOM operations • 60fps, even in a UIWebView on the iPhone
  23. 23. React V.S. Doom 3 Doom 3 React
  24. 24. On Every Update… • React builds a new virtual DOM subtree • Diff it with the old one • Computes the minimal set of DOM mutations and puts them in a queue • Batch executes all updates
  25. 25. Tutorial • Example: Youtube Most Popular
  26. 26. Where To Go From Here • React JSX • State and Props • Component Specifications and Lifecycle • Communicate Between Components • Flux v.s. MVC • ……
  27. 27. Q & A
  28. 28. Reference http://facebook.github.io/react/ http://www.slideshare.net/floydophone/react-preso-v2 http://www.funnyant.com/reactjs-what-is-it/ http://calendar.perfplanet.com/2013/diff/ http://lincolnloop.com/blog/architecting-your-app-react-part- 1/

×