Modernizing an Enterprise React App

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.

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.

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.