The newline Guide to Modernizing an Enterprise React App

In this course, you'll learn all the pieces that go into modernizing an existing React application so it can take advantage of the latest framework features and run well for years to come.

 
5.0 (4 ratings)143 students

10h 35m54 Video Lessons

Published  | Updated

Technologies Covered

What You Will Learn

How to modernize an existing React application according to today's standards

How React Hooks work compared to class components

How config tools Volta and Node engines simplify development

How to set up ESLint and Prettier to improve code quality

How to upgrade an existing React app and refactor the app as you go

How to write integration tests with React Testing Library to ensure app functionality

How end-to-end tests with Cypress can test mission critical user flows

How to incorporate a component library to speed up design and development time

In this course we'll dive into all the ways to modernize an existing React application - from tooling and linting, to testing and Hooks. React is a powerful, extremely popular JavaScript framework, but keeping applications up to date with all that it has to offer is tough - especially when dealing with the larger, enterprise-level business applications many developers are responsible for.

Why this course

The newline Guide to Modernizing an Enterprise React application will cover everything you need to know to confidently work on a React application of any size, in any state, and leave it better than when you found it.

While many React tutorials start with the latest version of React, or gloss over all the other things required to make sure apps vital to a company's success keep running, this course does not. In 54 lessons spanning 10 modules, it tackles head-on, the many things that must be considered when building and maintaining large, complex React apps.

Course modules

As you progress through this course, you'll gain a deeper understanding for how and why React Hooks came to be, the importance of various types of automated testing and project configuration, and how to leverage design systems to improve your application. You will gain a detailed understanding of how to modernize a React app in a real-world scenario, bringing it in line with today's development standards.

Home page of the Hardware Handler sample React application

Part one: tooling and setup

The first part of this course will consist of getting familiar with our example application, and doing the behind-the-scenes work to set it up for success.

We'll learn about why React Hooks came about and how to use them, how to upgrade an outdated React app successfully, and how to use tools like Volta, ESLint and Prettier to improve the app's code and development experience.

  • Module 0: Meet Hardware Handler - our outdated, but promising React application.
  • Module 1: React Hooks - why they were created, the issues they solve and how the most common ones work.
  • Module 2: Upgrading a React app - our app needs an upgrade to use Hooks, and we'll streamline development with Volta.
  • Module 3: Project configuration - adding Prettier and ESLint to our app will dramatically improve code quality.

Part two: refactoring the code

With our app configured for success, we'll get down to the business of refactoring Hardware Handler.

I'll show you my strategy for converting class components to functional ones, and we'll go file-by-file keeping the app's functionality intact while upgrading it to use hooks - including custom hooks, and the Context API.

  • Module 4: Classes to functions - we'll take every class component and turn it into a functional component.
  • Module 5: Custom hooks - we'll identify where custom hooks can simplify our functional components further.
  • Module 6: Context API - a few strategically placed React contexts will round out our code improvements.

Part three: testing

An updated application is only half the battle for enterprise-level apps; development teams must also be confident in their continued success as the apps expand in size and scope.

We'll add automated testing to our app using the widely accepted testing frameworks React Testing Library and Cypress.

  • Module 7: Integration testing - the popular combination of Jest and React Testing Library will be used to unit test smaller pieces of our app.
  • Module 8: End-to-end testing - the ease of writing e2es with Cypress Studio will blow you away.

Bonus: design systems

Finally, I've included a special bonus module about how to incorporate design systems into an already existing application, and switch out components in a systematic way. Design systems and component libraries are quickly gaining ground - especially in big orgs with lots of apps and development teams.

Being able to effectively use one is an important skill to learn.

  • Module 9: Ant Design - we'll swap in the robust design system's components to handle our app's more complex interactions for us.

Product page of the Hardware Handler sample React application

Bottom Line

In 10 modules, we'll go step-by-step taking an app from outdated in every way to up to today's high standards, giving you ample practice and hands-on examples along the way.

If you've been wanting to get more confident in your React skills and see what it takes to build enterprise apps in today's world, this is the course for you.

Checkout page of the Hardware Handler sample React application

Course Content

10 modules54 lessons10h 35m total

Introduction

2 lessons 37m total

Guide to Modernizing an Enterprise React App Welcome

Introduction to Modernizing an Enterprise React App

INTRODUCTION

21:20 minutes

Hardware Handler Overview

Get familiar with the sample React application's folder structure and current functionality.

INTRODUCTION

15:57 minutes

React Hooks

8 lessons1h 21m total

Module 1 Introduction

Introduction to Module 1: React Hooks

INTRODUCTION

1:15 minutes

Introducing React Hooks

Learn about the motivation behind React Hooks, the benefits it can bring, and the rules that apply to all Hooks in a React application.

LESSON

10:37 minutes

useState Hook

The useState Hook is the most similar to traditional state in React class-based components, and we'll look at examples of how it works to keep track of state in functional components.

LESSON

15:25 minutes

useEffect Hook

useEffect is a game-changing hook: originally compared to lifecycle methods in React components, it's close but not truly a direct comparison.

LESSON

15:54 minutes

useRef Hook

While less often discussed, the useRef Hook deserves covering because a time will come when it's the right solution to reach for; here, we'll talk about how useRef's "mutable" value property can be useful.

LESSON

10:47 minutes

useContext Hook

Context is a powerful API to pass state within React applications, and with the introduction of the useContext Hook, accessing state in any component (class or functional) is possible.

LESSON

13:31 minutes

Custom Hooks

Custom hooks are arguably the most important addition of all the hooks released with React 16.8.0. Explore how custom hooks can dramatically simplify sharing code between components.

LESSON

10:26 minutes

Module 1 Summary

This lesson is a summary of the React Hooks we've covered in Module 1.0

LESSON

3:31 minutes

Upgrade the React App

4 lessons 24m total

Module 2 Introduction

Introduction to Module 2: Upgrading React App Version

INTRODUCTION

0:51 minutes

Upgrade the React App Version

Before we can do anything else, we must upgrade our sample app's React version to start taking advantage of the advances.

LESSON

12:47 minutes

Lock Down the Node and Yarn Versions

Avoid one of the most common developer woes: different devs coding with different environment versions with the help of Volta and Node Engines.

LESSON

8:03 minutes

Module 2 Summary

This lesson is a summary of module 2.0, where we upgraded our React version and locked in our project configuration.

LESSON

2:29 minutes

Configure Prettier and ESLint

4 lessons 46m total

Module 3 Introduction

Introduction to module 3: Code formatting setup

INTRODUCTION

1:25 minutes

Set Up Prettier

Code formatting, especially when it's set up, so you don't even have to think about it, is the best.

LESSON

11:59 minutes

Set Up ESLint

Make JavaScript code quality better and avoid bugs with the help of a linter and a strict set of rules.

LESSON

29:48 minutes

Module 3 Summary

This lesson is a summary of the automated code formatting and linting we set up with the help Prettier and ESLint in Module 3.0.

LESSON

2:47 minutes

Refactor React Classes to React Hooks

7 lessons1h 16m total

Module 4 Introduction

Introduction to Module 4: Refactoring to hooks

INTRODUCTION

1:05 minutes

Refactor Home.js

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

LESSON

5:52 minutes

Refactor App.js

We get our first real taste of adding hooks while refactoring the App component.

LESSON

13:45 minutes

Refactor Checkout.js

The checkout page uses multiple API calls to correctly display the items a product manager wants to ship to stores.

LESSON

16:06 minutes

Refactor ProductForm.js

Ah forms, a painful Achilles heel of most web applications (React apps included) since the beginning of time.

LESSON

18:31 minutes

Refactor ProductList.js

We saved the best (i.e. the most complicated) component for last. The product list, with its filters and products, is no match for our newly honed skills though.

LESSON

20:17 minutes

Module 4 Summary

This lesson is a summary of Module 4.0, where we systematically refactored our app's outdated class components to now use React Hooks.

LESSON

1:16 minutes

Create Custom Hooks for the App

5 lessons 48m total

Module 5 Introduction

Introduction to module 5: Custom hooks

INTRODUCTION

0:55 minutes

Our First Custom Hook: useDepartments

We'll write our first custom hook to fetch department info for our application in one centralized place.

LESSON

12:49 minutes

Simplify Complex Components with the useProducts Hook

Custom hooks are good for more than just drying up duplicated code; they also help simplify our components.

LESSON

11:41 minutes

The useCheckout Hook will do Double Duty in our App

Some custom hooks can help simplify code beyond the original components they touch.

LESSON

20:54 minutes

Module 5 Summary

This lesson is a summary of module 5.0's custom hooks we added to Hardware Handler.

LESSON

2:18 minutes

Incorporate the Context API

4 lessons 35m total

Module 6 Introduction

Introduction to module 6: The useContext Hook

INTRODUCTION

0:57 minutes

Create a Context Hook to Handle CheckoutItems

Bring the Context API into Hardware Handler to decrease our reliance on props.

LESSON

18:23 minutes

Contexts can be Used to Share Functions within an App Too

Context doesn't necessarily need to live at the top level of a component to be useful.

LESSON

14:14 minutes

Module 6 Summary

This lesson summarizes our addition of the Context API and useContext Hooks in Module 6.0.

LESSON

2:07 minutes

Integration Testing with Jest and React Testing Library

7 lessons2h 12m total

Module 7 Introduction

Introduction to module 7: Unit testing

INTRODUCTION

2:16 minutes

Introducing React Testing Library

This library took aim at a few fundamental flaws in the traditional way of integration testing JavaScript applications and really changed the game when it comes to automated testing.

LESSON

7:46 minutes

Set Up Integration Testing in Our App

We've got a little setup work to do before we get to the actual business of writing our tests.

LESSON

18:53 minutes

Test the Container Components

React Testing Library's approach to integration testing like a user would interact with the DOM works very well with React's function-based components.

LESSON

52:33 minutes

Test our Custom Hooks

Testing a custom hook might sound intimidating at first, but there are actually some repeatable steps that take a lot of the guesswork and mystery out of it.

LESSON

25:00 minutes

Test our API Service Calls

Not all of our testing for our React app relies so heavily on RTL — some files Jest can handle on its own.

LESSON

23:05 minutes

Module 7 Summary

This lesson is a summary of module 7.0, where we started adding unit and integration tests to our app to increase our confidence our app works as expected.

LESSON

2:55 minutes

End-to-End Testing with Cypress

6 lessons1h 13m total

Module 8 Introduction

Introduction to module 8: Cypress e2es

INTRODUCTION

1:36 minutes

Introducing Cypress.io

End-to-end testing has never been the easiest thing to do, but Cypress challenges that statement in a big way.

LESSON

11:03 minutes

Set up End-to-End Tests

Cypress gives us a big helping hand organizing and getting started with our own e2es.

LESSON

13:31 minutes

Write End-to-End Test Flows

Cypress makes the process of writing e2es relatively simple with lots of built-in methods and documentation to show you the way to use it effectively.

LESSON

28:45 minutes

Try out Cypress Studio

The Studio feature makes e2e test writing faster and easier than it's ever been before.

LESSON

14:13 minutes

Module 8 Summary

This lesson is a summary of module 8.0, where we integrated Cypress into a React app and wrote automated end-to-end tests.

LESSON

4:03 minutes

Bonus Module: Add a Design System Library

6 lessons1h 16m total

Module 9 Introduction

Introduction to module 9: Design system libraries

INTRODUCTION

1:44 minutes

Why use a Design System?

Design systems provide more than just a bunch of prebuilt components for developers.

LESSON

6:03 minutes

Add Ant Design to our App

Setting Ant Design up takes a little doing because it's so customizable.

LESSON

14:44 minutes

Swap out Some Simple Components

Ant Design's thorough documentation makes the process of replacing custom components less difficult than it might otherwise be.

LESSON

22:19 minutes

Sub in More Complex Components

While these components require a little more effort to get working, the improvements they provide are worth the time.

LESSON

29:10 minutes

Module 9 Summary

This lesson summarizes module 9.0, where we learned about the benefits of a design system and incorporated the popular Ant Design into our own app.

LESSON

2:52 minutes

Summing It All Up

1 lesson 2m total

Recapping Modernizing an Enterprise React App

Can you believe how far we've come?

CONCLUSION

2:20 minutes

Your Instructors

Profile image for paigen11

Paige Niedringhaus

Fullstack developer with a focus on frontend. In my day job as a staff software engineer for the IoT startup Blues Wireless, I use React and Hugo to build fun, beautiful, interactive applications.

In my spare time, I'm learning IoT programming with sensors, microcontrollers and Raspberry Pis.

👋 Hi! I'm Paige (@paigen11 on Discord). I'm a Staff Software Engineer for IoT startup Blues Wireless, a host of the podcast React Round Up, and a regular writer and speaker about frontend web development. I really enjoy building beautiful, functional UIs with JavaScript, React, and other cutting-edge tech.

Since changing careers from marketing to coding, I spent 5 years at The Home Depot learning about modern software development in large orgs, and believe me, there's a lot to know.

Now, I'm sharing what I learned building websites and applications with frontend frameworks like React in this course in hopes of helping other developers succeed in their own careers.

Frequently Asked Questions

Who is this course for?

Intermediate to advanced developers already comfortable with React and somewhat familiar with the React framework but not necessarily well-versed with the newest syntax like React Hooks. Also, for anyone who wants to learn the kinds of things that go into large, long-lived enterprise-sized React apps: the tooling and configuration, testing, design systems and strategies for updating existing apps to keep them fresh and relevant

I already know how to use Hooks, will I still get something out of this course?

You sure will. This course goes way beyond React Hooks because the React apps supporting big companies encompass way more than that. We cover integration and end-to-end testing, project tooling and configuration like Volta, Prettier and ESLint, design system library integration and more. You may know React, but there's a lot more to it than just Hooks

What if I need help?

You can ask us questions anytime through the community Discord channel #modernizing-an-enterprise-react-app or by sending us a message.

 

newline Pro Subscription

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

$20/MO

Charged monthly. Free to cancel anytime.

Or

One-Time Purchase

Get lifetime access to this course.

$39$49$10 off

The newline Guide to Modernizing an Enterprise React App

$39

$49