React Components Course (How To)

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

What you'll learn

• Data Flow
• Lifting State Up
• useEffect Hook
• React.memo
• useRef Hook
• Validating Props

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 4 steps

• Build Modular Interfaces with Components Roadmap

  2:35

• Setting up with Create React App

  2:33

• Separating Function Components Into Modules

  7:35

• Modules Review

  6 questions

Data Flow

It's important to think carefully about where state resides in your application. Stateful components are powerful, but could also bring a lot of complexity to your app. In this stage, you will restructure state and dataflow to be more unidirectional.

Chevron 5 steps

• Data Flow Roadmap

  3:48

• Lifting State up

  3:32

• Communicating between Components

  6:22

• Update State Based on a Player's Id

  5:01

• Data Flow Review

  6 questions

Managing State

With the state lifted up to the top of the application, we can pass it down to any component. In this stage, you will pass state to multiple components, add items to the state and update the state based on previous state

Chevron 5 steps

• Managing State Roadmap

  2:33

• Building the Statistics Component

  7:06

• Controlled Components

  9:14

• Adding Items to State

  10:35

• Managing State Review

  6 questions

Stateful Components and the Effect Hook

This stage covers working with React's Effect Hook. You will also learn to use conditional rendering to update your UI based on the current state.

Chevron 5 steps

• Stateful Components and the Effect Hook Roadmap

  4:11

• Designing the Stopwatch

  3:13

• Stopwatch State

  3:45

• Updating the Stopwatch State Using the Effect Hook

  12:26

• Stateful Components and the Effect Hook 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 9 steps

• React Component Patterns Roadmap

  3:01

• Improve Performance with React.memo

  5:04

• Destructuring Props

  3:08

• Refs and the DOM

  7:23

• Validate Props with PropTypes

  7:16

• Required and Default Props

  2:32

• The React Challenge

  3:21

• The React Challenge: Solution

  7:18

• React Component Patterns Review

  6 questions