Embed Size (px)
DESCRIPTION
Introduce to React
Citation preview
Learning React - ISenior Front-End Manager
Mitch Chen
Outline• Showcase
• Overview
• Tutorial
• Where To Go From Here
• Q & A
Showcase• Facebook
• Khan Academy
• The New York Times
• Mobile Web App
Overview• What is React?
• Why React Rock?
• Components, Not Templates
• Re-render
• Virtual DOM
What Is React ?
• A Library for creating user interfaces
• Not yet another JS framework
• Renders your UI and responds to Events
• Aka: The V in MVC
Why React Rock?
• 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
Components, Not Templates
• 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
• 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
Re-Render
• 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
ReactJS AngularJSv.s.
Data flow when a user event results in a DOM update
Virtual DOM
Traditional Web App
React Web App
• 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
React V.S. Doom 3
Doom 3
React
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
Where To Go From Here• React JSX
• State and Props
• Component Specifications and Lifecycle
• Communicate Between Components
• Flux v.s. MVC
• ……
Q & A
Referencehttp://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/
