8. 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
9. 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
10. 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’!
11. 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’!
12. • What we get is a seamless, fluid ui
• Only things that actually change, do change
React Virtual DOM
13. • No need to implement the vDOM
• But it’s important to know the foundation of the tools
you choose!
React Virtual DOM
27. • Based on state (props and state)
• Uni-directional (re-renders every change*)
• Composable (components in components)
• Reusable (thanks to props)
React Components
30. • 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
35. 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
36. 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 Gallery
1 of 12
37. 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 Gallery
1 of 12
Photo Gallery