Welcome to

The newline Guide to Modernizing an Enterprise React App

Example Code Download

You can download the complete example code by clicking here

beta You can also browse through the code examples in Codesandbox.

Introduction

2 lessons 37m total

React Hooks

8 lessons1h 21m total

Module 1 Introduction

INTRODUCTION

1:15 minutes

Introducing React Hooks

LESSON

10:37 minutes

useState Hook

LESSON

15:25 minutes

useEffect Hook

LESSON

15:54 minutes

useRef Hook

LESSON

10:47 minutes

useContext Hook

LESSON

13:31 minutes

Custom Hooks

LESSON

10:26 minutes

Module 1 Summary

LESSON

3:31 minutes

Upgrade the React App

4 lessons 24m total

Module 2 Introduction

INTRODUCTION

0:51 minutes

Upgrade the React App Version

LESSON

12:47 minutes

Lock Down the Node and Yarn Versions

LESSON

8:03 minutes

Module 2 Summary

LESSON

2:29 minutes

Configure Prettier and ESLint

4 lessons 46m total

Module 3 Introduction

INTRODUCTION

1:25 minutes

Set Up Prettier

LESSON

11:59 minutes

Set Up ESLint

LESSON

29:48 minutes

Module 3 Summary

LESSON

2:47 minutes

Refactor React Classes to React Hooks

7 lessons1h 16m total

Module 4 Introduction

INTRODUCTION

1:05 minutes

Refactor Home.js

LESSON

5:52 minutes

Refactor App.js

LESSON

13:45 minutes

Refactor Checkout.js

LESSON

16:06 minutes

Refactor ProductForm.js

LESSON

18:31 minutes

Refactor ProductList.js

LESSON

20:17 minutes

Module 4 Summary

LESSON

1:16 minutes

Create Custom Hooks for the App

5 lessons 48m total

Incorporate the Context API

4 lessons 35m total

Integration Testing with Jest and React Testing Library

7 lessons2h 12m total

Module 7 Introduction

INTRODUCTION

2:16 minutes

Introducing React Testing Library

LESSON

7:46 minutes

Set Up Integration Testing in Our App

LESSON

18:53 minutes

Test the Container Components

LESSON

52:33 minutes

Test our Custom Hooks

LESSON

25:00 minutes

Test our API Service Calls

LESSON

23:05 minutes

Module 7 Summary

LESSON

2:55 minutes

End-to-End Testing with Cypress

6 lessons1h 13m total

Module 8 Introduction

INTRODUCTION

1:36 minutes

Introducing Cypress.io

LESSON

11:03 minutes

Set up End-to-End Tests

LESSON

13:31 minutes

Write End-to-End Test Flows

LESSON

28:45 minutes

Try out Cypress Studio

LESSON

14:13 minutes

Module 8 Summary

LESSON

4:03 minutes

Bonus Module: Add a Design System Library

6 lessons1h 16m total

Module 9 Introduction

INTRODUCTION

1:44 minutes

Why use a Design System?

LESSON

6:03 minutes

Add Ant Design to our App

LESSON

14:44 minutes

Swap out Some Simple Components

LESSON

22:19 minutes

Sub in More Complex Components

LESSON

29:10 minutes

Module 9 Summary

LESSON

2:52 minutes

Summing It All Up

1 lesson 2m total