Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Refactor Home.js

We dip our toes into converting a class component to a functional one with Hardware Handler's home page.

This page is a preview of The newline Guide to Modernizing an Enterprise React App

Previous Introduction:

Module 4 Introduction

Next Lesson:

Refactor App.js

New
-:--4

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Modernizing an Enterprise React App

Module 1: Introduction

Introduction:

Start Here

Introduction: (21:20)

Video Course Overview - Modernizing an Enterprise React App

Lesson 1:

Welcome to Hardware Handler — A product management application

Module 2: React Hooks

Introduction: (1:15)

Module 1 Introduction

Lesson 1: (10:37)

React Hooks - Understanding The Basic Rules and Benefits

Lesson 2: (15:25)

React's useState Hook - Track Functional Component States

Lesson 3: (15:54)

How Does React's useEffect Hook Work?

Lesson 4: (10:47)

Learning About The React useRef Hook And Mutable Values

Lesson 5: (13:31)

A Step-by-Step Guide to Using React's useContext Hook

Lesson 6: (10:26)

An Introduction To Custom Hooks In React

Lesson 7: (3:31)

Module 1 Summary

Module 3: Upgrade the React App

Introduction: (0:51)

Module 2 Introduction

Lesson 1:

Upgrade the React app version

Lesson 2: (8:03)

Dev Teams, Lock Down Environment Versions With Volta

Lesson 3: (2:29)

Module 2 Summary

Module 4: Configure Prettier and ESLint

Introduction: (1:25)

Module 3 Introduction

Lesson 1: (11:59)

Code Formatting - An Overview Of Prettier And How To Set It Up

Lesson 2: (29:48)

How To Set Up ESLint For Modernizing A React App

Lesson 3: (2:47)

Module 3 Summary

Module 5: Refactor React Classes to React Hooks

Introduction: (1:05)

Module 4 Introduction

Lesson 1: (5:52)

Refactor Home.js

Lesson 2: (13:45)

Refactor App.js

Lesson 3: (16:06)

Refactor Checkout.js

Lesson 4: (18:31)

Refactor ProductForm.js

Lesson 5: (20:17)

Refactor ProductList.js

Lesson 6: (1:16)

Module 4 Summary

Module 6: Create Custom Hooks for the App

Introduction: (0:55)

Module 5 Introduction

Lesson 1: (12:49)

Our First Custom Hook: useDepartments

Lesson 2: (11:41)

Simplify Complex Components with the useProducts Hook

Lesson 3: (20:54)

The useCheckout Hook will do Double Duty in our App

Lesson 4: (2:18)

Module 5 Summary

Module 7: Incorporate the Context API

Introduction: (0:57)

Module 6 Introduction

Lesson 1: (18:23)

Simplify React Prop Management With A Context Hook