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.

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.

Table of Contents

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:09] This lesson is a summary of what we have covered in module 4. In this lesson, we learned a recipe to convert class components to functional components.

    [00:10 - 00:24] Over time, I've developed a methodical way that I prefer to convert React class components to React functional components using hooks. It's certainly not the only way to do things, but it is a good place to start when you're getting more familiar with using hooks.

    [00:25 - 00:35] We learned how to take existing class components and update them. We worked our way through this apps class components one by one and turned them into functional components with hooks.

    [00:36 - 00:56] Each component got progressively more complex, but each lesson gave us more experience to build upon, more confidence to understand and fix our ES-Lint errors, and more opportunities to see the advantages and simplicity that hooks offer over class components. In our next module, we're going to start adding custom hooks to our app.

    [00:57 - 01:07] So we've gotten a good taste of putting basic React hooks to use as we've ref actored the components in our app. Now it's time to step it up again and start writing some custom hooks for our app.

    [01:08 - 01:13] This should really help solidify our confidence in recognizing when and how to use hooks.