1
Error Handling using Error Boundaries in React 16
6m 1s
2
Render Multiple Elements without a Wrapping Element in a Component in React 16
3m 14s
3
Render Text Only Components in React 16
1m
4
Render Elements Outside the Current React Tree using Portals in React 16
3m 33s
5
Define DOM Attributes in React 16
2m 30s
6
Call setState with null to Avoid Triggering an Update in React 16
1m 18s
7
Render Multiple Elements using React.Fragment and the JSX Fragment Syntax <> in React 16.2
2m 2s
8
Create a DOM reference using createRef in React 16.3
4m 51s
9
Forward a DOM reference to another Component using forwardRef in React 16.3
3m 53s
10
Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3
3m 1s
11
Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3
1m 51s
12
Pass Data through a Component Tree using Context Providers and Consumers in React 16.3
5m 53s

Render Elements Outside the Current React Tree using Portals in React 16

React^16.0.0

Share this video with your friends

By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI elements like overlays or loading bars this can be limiting. React 16 therefor ships with the new portal feature allowing you to attach parts of the Component tree inside a different root element.

This lesson explores the new functionality by building an <Overlay/> component that renders out its children and creates a closeable overlay outside its DOM node.

Render Elements Outside the Current React Tree using Portals in React 16

Share this video with your friends

Course

Leverage New Features of React 16