• React is a javascript library, or tool
• framework agnostic
• lightweight and recursive
What is React?
Benefits of React
• Very modular .:. reusable
• State-based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Listing Card
Photo Gallery
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
• Forget MVC, think components.
• Component = view/html + controller/js
• JSX (sugar syntax that gets compiled to JS)
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
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
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
Top Related