Module 4 Introduction

Introduction to Module 4: Refactoring to hooks

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to Modernizing an Enterprise React App course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Modernizing an Enterprise React App, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Modernizing an Enterprise React App
  • [00:00 - 00:08] It's finally time to begin upgrading our app hardware handler. We've played with some small samples of hooks in previous modules.

    [00:09 - 00:18] We've upgraded our own app to work with hooks, and we've added project configurations and tooling and linting and code formatting. It's time to modernize these class components.

    [00:19 - 00:27] In this module, we'll learn the recipe that I use to refactor class components. It's strategic, it's easy to follow, it's pretty simple.

    [00:28 - 00:44] And then we will go through each of our class based components and we'll turn them into functional components. While ensuring that their original functionality remains the same, we'll also fix any ES lint errors we come across to make our code quality better.

    [00:45 - 01:03] Finally, we'll build up our confidence with hooks by converting our simpler class components first and working our way up to our more complex components that will need a good bit of rewriting to utilize hooks. By the end, I hope you'll feel much more prepared to take on react components in whatever form you encounter them in the wild.