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
• 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 v.s. AngularJS
Data flow when a user event results in a DOM update
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