Understanding Facebook's React.js
37
React A web tool developed and open-sourced by Facebook
-
Upload
federico-torre -
Category
Internet
-
view
89 -
download
0
Transcript of Understanding Facebook's React.js
ReactA web tool developed and open-sourced by Facebook
• React is a javascript library, or tool
• framework agnostic
• lightweight and recursive
What is React?
What is React?
components
that
re-render
Benefits of React
• Very modular .:. reusable
• State-based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Listing Card
Photo Gallery
React Virtual DOMthe ability to re-render on every change!
• Manipulating the DOM is slow.
• Javascript is fast.
React Virtual DOM
Browser
React Virtual DOM
User’s View Real DOM
Background Javascript Process Virtual DOM
Browser
React Virtual DOM
User’s View Real DOM
null
Background Javascript Process Virtual DOM
<html> <button> Add text</button>
<p></p> </html>
First Render
Browser
React Virtual DOM
User’s View Real DOM
<html> <button> Add text</button>
<p></p> </html>
Background Javascript Process Virtual DOM
Real DOM populated, vDOM cleared
Browser
React Virtual DOM
User’s View Real DOM
<html> <button> Add text</button>
<p></p> </html>
Background Javascript Process Virtual DOM
<html> <button> Add text</button>
<p>New text!</p> </html>
User clicks ‘Add text’!
Browser
React Virtual DOM
User’s View Real DOM
<html> <button> Add text</button>
<p>New text!</p> </html>
Background Javascript Process Virtual DOM
<html> <button> Add text</button>
<p>New text!</p> </html>
User clicks ‘Add text’!
• What we get is a seamless, fluid ui
• Only things that actually change, do change
React Virtual DOM
• No need to implement the vDOM
• But it’s important to know the foundation of the tools you choose!
React Virtual DOM
JSX is a sugar-syntax for JS
React JSX
React JSX
=
JSX
JS
React JSXJSX can be escaped from JSX-land to JS-land with {}
JSX
JS
React JSXThat goes for comments too!
JSX
JS
React JSXIt’s javascript! Use expressions.
JSX
JS
React JSX
Hmm….
Why not just write javascript… ?
React JS
React JS
React JSX
component = view + controller
React Components
• Forget MVC, think components.
• Component = view/html + controller/js
• JSX (sugar syntax that gets compiled to JS)
React Components
React Components
AppTemplate
UserDashboardPage
Listing Card
Photo Gallery
Listing Card
Photo Gallery
Listing Card
Photo Gallery
Listing Card
Photo Gallery
Listing Card
Photo Gallery
Listing Card
Photo Gallery
HeaderNav
React Components
• Based on state (props and state)
• Uni-directional (re-renders every change*)
• Composable (components in components)
• Reusable (thanks to props)
React Components
React Components
Component Lifecycle• componentWillMount()
• componentDidMount() *client only
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• componentDidUpdate()
• componentWillUnmount()
• React allows you to build react classes of components
• From those classes, you build component instances, or elements
• Factories create functions that return elements for a given class
React.createClass()
React.createElement()
React.createFactory()
React Components
Performance Components
• High-performance, thanks to virtual DOM
• Automatically applies best practices
• UI handlers, batch manipulations
Summarizing Components
• Very modular .:. reusable
• State based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Listing Card
Photo Gallery
in React Components
State vs Props
React Components
Component Data
• State — contained within a component; used to track changes within a component
• Props — passed in from parent; think of these as arguments, or inputs to a component; do not change
Component State
• Things that change within the component
• Think of an input form, when the user types stuff —> Keep track of those changes in state
• … or the currentPhotoIndex the user is on as he swipes through the PhotoGallery —> Keep track of those changes in state
Photo Gallery1 of 12
Component Props
• Things that get passed into the component
• Think of props as configurations to your component <PhotoGallery photoCount=“false” /> <PhotoGallery photoCount=“true” />
• The parent component passes down data into the child component via props.
Photo Gallery1 of 12
Photo Gallery
