React Components Course

Components are the core building blocks of a React application. This course will level-up your React skills by providing a better understanding of class vs. functional components, state and lifecycle methods, and how to split your UI into reusable and composable components.

Build Modular Interfaces with Components

Learn how to quickly set up a React application with Create React App and separate your React components into modules.

Chevron 6 steps

• Understanding React Components

  1:42

• Setting up with Create React App

  3:21

• instruction

  Using Create React App

• Separating Function Components Into Modules

  5:09

• Separating Class Components Into Modules

  2:30

• Modules Review

  6 questions

Managing State and Data Flow

It’s important to think carefully about where state resides in your application. In this stage, you will restructure state and data flow to be more unidirectional.

Chevron 9 steps

• Unidirectional Data Flow

  1:47

• Lifting State Up

  3:44

• Communicating Between Components

  5:37

• Update State Based on a Player's Index

  2:54

• Building the Statistics Component

  6:35

• Controlled Components

  7:04

• Adding Items to State

  7:33

• Update the Players State Based on Previous State

  3:01

• Managing State Review

  6 questions

Stateful Components and Lifecycle Methods

This stage covers working with React component lifecycle methods. You will also learn to use conditional rendering to update your UI based on the current state.

Chevron 6 steps

• Designing the Stopwatch

  3:41

• Stopwatch State

  3:06

• Update the Stopwatch State with componentDidMount()

  8:49

• Resetting the Stopwatch

  2:45

• Prevent Memory Leaks with componentWillUnmount()

  3:39

• Stateful Components and Lifecycle Methods Review

  6 questions

React Component Patterns

Learn useful design patterns to use in your React components. These patterns will not only help prevent you from writing messy and over-complicated code, but also help you create flexible, more performant components that are easier to understand and maintain.

Chevron 8 steps

• Optimize Performance with PureComponent

  4:06

• Destructuring Props

  3:30

• Refs and the DOM

  5:13

• Validate Props with PropTypes

  6:15

• Static PropTypes and Default Props

  3:44

• The React Challenge

  2:47

• instruction

  The React Challenge: Solution

• React Component Patterns Review

  6 questions