Welcome to Modernizing an Enterprise React App#

Many courses and tutorials begin building React applications from scratch using the latest and greatest features the framework has to offer from the beginning.

They also tend to gloss over things like:

• Structuring an app's source code so it can grow and be maintained in an organized fashion over time,

• How to organize and write automated unit tests,

• How to organize and write end-to-end tests,

• How to set up code standards in a project so the whole team adheres to linting and code formatting best practices,

• How to leverage component libraries to speed up development cycles.

And most importantly:

• How to upgrade an existing application to take advantage of the latest advances the framework has to offer!

This is not that course, because that is not real life for many developers.#

Many developers join development teams and are introduced to an existing React application.

• The application may have been worked on by many other developers at the point they inherit it (and none of those original developers may still be with the project),

• It may be out of date by a few versions,

• It may lack consistent structure or coding standards because it was built without an architectural design discussion early on,

• It may lack what are now considered industry standards, like automated testing.

But that's OK. That's all OK because we're here to help arm you with knowledge of all of the above to improve this app and leave it better than when you found it.

Course prerequisites#

To get the most out of this course, you'll probably want to have:

• An intermediate understanding of HTML, CSS, and modern (ES6+) JavaScript.

• Basic knowledge of the React framework (at least up until hooks were introduced).

• Some familiarity with JavaScript automated testing frameworks (unit tests, end-to-end tests).

Module overview - What you'll learn#

Module 1: Introduction to React Hooks#

Although developers who take this course should already be fairly comfortable with React pre-Hooks, you may not have a great understanding of how hooks operate - especially the hooks that don't line up one-to-one with React class-based components' setup like useEffect or useState.

In this module we'll:

• Learn about why React Hooks were introduced.

• Walk through examples of various hooks:

  • useState Hooks

  • useEffect Hooks

  • useRef Hooks

  • useContext Hooks

  • Custom Hooks

Module 2: Upgrade the sample React app to the newest version of CRA & lock in project dependencies#

We'll start modernizing our existing React application by updating it to use the latest stable version of React.

During this module, we'll:

• Upgrade the version of React and React Scripts the application runs on (including troubleshooting any initial upgrade issues).

• Lock in Node and Yarn versions with Volta and Node engines so that whenever any developer downloads and runs the app, they'll have the same development experience.

Module 3: Configure Prettier & ESLint#

Nothing changed my development experience for the better like adding Prettier and ESLint to my normal development setup. I'm not sure how I got along for as long as I did before these two things existed, but I do know I never want to go back.

In this module, I'll show you how to:

• Create a .prettierrc file that will be included in the project with any personal formatting preferences you like, and configure VSCode to automatically format code on save or when switching focus.

• Set up an .eslintrc.json file using the industry-standard ESLint configurations developed by Airbnb for both React and React Hooks, and discuss how to modify the ESLint rules to suit your team's preferences.

Module 4: Refactor class components to use hooks#

A big part of modernizing an existing React app hinges on being able to take a traditional, class-based component, maintain its current functionality, and convert it to use hooks under the hood, taking advantage of all that the upgraded dependencies have to offer.

This module will consist of:

• Going file by file through the class-based components and upgrading them to use hooks.

Module 5: Create custom hooks for the app#

Custom hooks are a key change that comes with the React upgrade; it's time to make a few that will support the application.

For this module, we'll:

• Identify where we could add custom hooks to our application, and implement them.

Module 6: Use the context API and useContext Hook to make state access within the app easier#

Although this app lacks the need for a separate global state management library like Redux or Recoil, there are still definite benefits to be gained from React's built-in state passing mechanism: Context.