React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React 16 comes with some powerful new features, in this course we'll be exploring each of them. Each lesson is going to go over every individual new feature, one at a time.
From the new error boundaries that will save us many a headache to handling whether to update our state *within* our `setState` 

We won't just be learning the technical capabilities of the new features however, we'll *also* be going into best practices. 

Once you watch this course you'll be more than ready to leverage everything React 16 has to offer! 

A JavaScript error in the UI shouldn’t break the whole application. To solve this problem React 16 introduced the new concept of an **error boundary**. 

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree. 

In this lesson we'll create an error boundary. We can use the new lifecycle hook `componentDidCatch` to handle any errors that the components we wrap throw at us, without unmounting our entire app!

Error Handling using Error Boundaries in React 16

Until React 16 it was required that a `render` method returns a single React element. With React 16 it is possible now to return an Array of elements. 

In addition creating self-eradicating component only rendering the children allow for a comfortable syntax. All in all this opens up new opportunities in component design and how they are nested which is demonstrated in this lesson.

Render Multiple Elements without a Wrapping Element in a Component in React 16

In this session we create a comment component to explore how to create components that only render text.

In previous versions of we had to wrap our text in needless `<span>` or `<div>`, we will see how React 16 removes the unneeded structure.

Render Text Only Components in React 16

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

React 16 came with a couple changes to attributes of DOM components e.g. `<div>`. 

In this lesson we are going to walk through when DOM attributes are filtered out and when they are rendered. We'll also go over what you can validly pass into your custom attributes. 

Define DOM Attributes in React 16

Sometimes it’s desired to decide within an updater function if an update to re-render should be triggered. Calling `.setState` with `null` no longer triggers an update in React 16. This means we can decided if the state gets updated within our `.setState` method itself! 

In this lesson we'll explore how this works by refactoring a city map app that updates even if you choose the same map twice.

Call setState with null to Avoid Triggering an Update in React 16

With React 16 it is possible now to return an Array of elements.

In React 16.2 support for fragments was added. It's a convenient way to return multiple children from a component’s render method.

Render Multiple Elements using React.Fragment and the JSX Fragment Syntax <> in React 16.2

Refs allow you to imperatively modify a child outside of the typical React dataflow. With React 16.3 a new ref API was introduce that should provide the convenience of string refs with the safety of callback refs.

Create a DOM reference using createRef in React 16.3

The function `forwardRef` allows us to extract a ref and pass it to its descendants. This is a powerful tool, but should be used with caution to avoid unexpected ref behaviour. The technique of forwarding refs really starts to shine in combination with higher order components (HOCs).

Forward a DOM reference to another Component using forwardRef in React 16.3

`getDerivedStateFromProps` is lifecycle hook introduced with React 16.3 and intended as a replacement for `componentWillReceiveProps`. It is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

`getSnapshotBeforeUpdate` is a lifecycle hook that was introduced with React 16.3. It is invoked right before the most recently rendered output is committed and the value returned by it will be passed as a third parameter to `componentDidUpdate`. It enables your component to capture current values for example a scroll position before they are potentially changed.

Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3

With React 16.3 a new Context API was introduced. It provides a way to share values like that are considered global between components without having to explicitly pass a prop through every level of the tree.

When creating a context we get a Provider to pass values into the tree, as well as Consumer in order get them out.


Leverage New Features of React 16

Nik Graf

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use