The newline Guide to Modernizing an Enterprise React App

Introduction to Module 2: Upgrading 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.

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

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

Introduction to module 3: Code formatting setup

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

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

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.

Introduction to Module 4: Refactoring to hooks

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

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

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

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

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.

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

Introduction to module 5: Custom hooks

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

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

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

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

Introduction to module 6: The useContext Hook

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

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

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

Introduction to module 7: Unit testing

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.

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

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.

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.

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

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.

Introduction to module 8: Cypress e2es

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

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

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.

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

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

Introduction to module 9: Design system libraries

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

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

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

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

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.

Can you believe how far we've come?