Welcome to
The newline Guide to Modernizing an Enterprise React App
Course Syllabus and Content
Introduction
2 Lessons 37 Minutes
Introduction to Modernizing an Enterprise React App
Get familiar with the sample React application's folder structure and current functionality.
React Hooks
8 Lessons 39 Minutes
Introduction to Module 1: 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.
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.
useEffect is a game-changing hook: originally compared to lifecycle methods in React components, it's close but not truly a direct comparison.
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.
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.
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.
This lesson is a summary of the React Hooks we've covered in Module 1.0
Upgrade the React App
4 Lessons 11 Minutes
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.
Configure Prettier and ESLint
4 Lessons 34 Minutes
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.
Refactor React Classes to React Hooks
7 Lessons1 Hours 16 Minutes
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.
Create Custom Hooks for the App
5 Lessons 48 Minutes
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.
Incorporate the Context API
4 Lessons 35 Minutes
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.
Integration Testing with Jest and React Testing Library
7 Lessons1 Hours 47 Minutes
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.
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.
End-to-End Testing with Cypress
6 Lessons 47 Minutes
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.
Bonus Module: Add a Design System Library
6 Lessons1 Hours 16 Minutes
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.
Summing It All Up
1 Lesson 2 Minutes
Can you believe how far we've come?