The Road to React: The One with Hooks

Course Overview

This is a relaunch of my existing course, The Road to Learn React. A lot has changed in React since I first created this course, and so here I am to give you all the information you need to work with modern React. (If you’re looking for content on legacy React, the old course is still ... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Introduction

Who Is This Course For?

Simple React App

2. Fundamentals of React

Hello React

Exploring a React Project Directory Structure

Meet the First React Component

React JSX

Lists in React

Meet Another React Component

React Component Instantiation

React DOM

React Component Definition (Advanced)

Handler Function in JSX

React Props

React State

Callback Handlers in JSX

Lifting State in React

React Controlled Components

Props Handling (Advanced)

React Side-Effects

React Custom Hooks (Advanced)

React Fragments

Reusable React Component

React Component Composition

Imperative React

Inline Handler in JSX

React Asynchronous Data

React Conditional Rendering

React Advanced State

React Impossible States

Data Fetching with React

Data Re-Fetching in React

Memoized Handler in React (Advanced)

Explicit Data Fetching with React

Third-Party Libraries in React

Async/Await in React (Advanced)

Forms in React

3. React Legacy

React Class Components

React Class Components: State

Imperative React

4. Styling in React

CSS in React

CSS Modules in React

SVGs in React

5. React Maintenance

Performance - Avoiding First Render Computation

Performance - Avoiding Heavy Computation

Typescript in React

Unit Testing to Integration Testing

React Project Structure

6. React World (Advanced)

Challenge: Sorting

Solution Review: Sorting

Challenge: Reverse Sort

Solution Review: Reverse Sort

Challenge: Remember Last Searches

Solution Review: Remember Last Searches

Challenge: Avoiding Duplicates

Solution Review: Avoiding Duplicates

Challenge: Paginated Fetch

Solution Review: Paginated Fetch

7. Deploying a React Application

Build Process

Deploy to Firebase

8. Final Words

Outline

9. Appendix

About the Author

FAQ

Setup on a Local Machine