Download as PDF, PPTX
Uploaded byMitch Chen
Learning React - I
This document provides an overview and introduction to React, a JavaScript library for building user interfaces. It first showcases popular sites that use React like Facebook and Instagram. It then defines React as a library for creating user interfaces that renders UI and responds to events. The key benefits of React are that it is battle-tested, supports large applications with changing data over time, and uses encapsulated components to make code reuse, testing and separation of concerns easy. Components are the fundamental building blocks of React, and are reusable, composable units. When state changes, React re-renders the entire component efficiently by maintaining a virtual DOM to compute minimal DOM updates. The document concludes by pointing to additional React topics and a sample tutorial.
More Related Content
Similar to Learning React - I
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=640&height=640&fit=bounds)
Learning React - I
- 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.
- 5.
- 6.
- 7.
- 10. Overview • Whatis React? • Why React Rock? • Components, Not Templates • Re-render • Virtual DOM
- 11.
- 12. • A Libraryfor creating user interfaces • Not yet another JS framework • Renders your UI and responds to Events • Aka: The V in MVC
- 13.
- 14. • Battle-tested onFacebook 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.
- 16. • Separation ofConcerns: 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 areReusable, 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.
- 21. • State hasdata 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.
- 23. Data flow whena user event results in a DOM update
- 24.
- 25. Traditional Web App React Web App
- 26. • Makes re-renderingon 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. Doom3 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 GoFrom Here • React JSX • State and Props • Component Specifications and Lifecycle • Communicate Between Components • Flux v.s. MVC • ……
- 33.
- 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/