Introduce to React

1. Learning React - I
Senior Front-End Manager
Mitch Chen

2. Outline
• Showcase
• Overview
• Tutorial
• Where To Go From Here
• Q & A

3. Showcase
• Facebook
• Instagram
• Khan Academy
• The New York Times
• Mobile Web App

4. Facebook Lookback Video

5. Instagram

6. Khan Academy

7. NYTimes

10. Overview
• What is React?
• Why React Rock?
• Components, Not Templates
• Re-render
• Virtual DOM

11. What Is React ?

12. • A Library for creating user interfaces
• Not yet another JS framework
• Renders your UI and responds to Events
• Aka: The V in MVC

13. Why React Rock?

14. • 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

15. Components, Not Templates

16. • 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

17. • 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

20. Re-Render

21. • 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

22. ReactJS v.s. AngularJS

23. Data flow when a user event results in a DOM update

24. Virtual DOM

25. Traditional
Web App
React
Web App

26. • 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

28. React V.S. Doom 3
Doom 3
React

29. 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

30. Tutorial
• Example: Youtube Most Popular

32. Where To Go From Here
• React JSX
• State and Props
• Component Specifications and Lifecycle
• Communicate Between Components
• Flux v.s. MVC
• ……

33. Q & A

34. 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/