Module 2 Summary

This lesson is a summary of module 2.0, where we upgraded our React version and locked in our project configuration.

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:08] This is the summary of what we have learned in module 2. The first thing we learned was how to upgrade an existing React app.

    [00:09 - 00:28] Plenty of React courses and tutorials start off with a brand new Create React app, taking advantage of the latest and greatest that the React framework has to offer. But almost none walk through upgrading an existing, slightly outdated app, which is a situation you're more likely to encounter with a long-lived Enterprise React app.

    [00:29 - 00:47] The update process is documented, but it's not always the smoothest, nor does the process offer advice to troubleshoot when the app won't start up, or a new error appears after upgrading. That's alright, because we dealt with it ourselves, and our app is upgraded to the latest React scripts and it still runs.

    [00:48 - 00:58] We also learned how to use Node engines in Volta to define our Node.js and Yarn versions. The best kind of development setup is the kind that you barely have to think about.

    [00:59 - 01:10] We tried to make development of the app a little easier by defining the Node and Yarn versions our project runs best with by defining the engines in our React apps package JSON. This is a great start.

    [01:11 - 01:25] Anyone new to the project can at a glance see what versions of Node they should be running for the best local development experience. Then, we took it one step further and made the whole process even easier by introducing Volta to our project.

    [01:26 - 01:46] Volta, which also works by our package.json, takes us having to remember to switch to a specific version of Node.js or NPM out of the equation. As long as it's installed on your local machine and defined in a project, Volta will handle switching to the correct JavaScript project dependencies for you.

    [01:47 - 01:56] Now, there's no reason any developer should have a problem running this application. In our next module, we're going to configure prettier and eslint.

    [01:57 - 02:13] Two of the biggest game changers to my development experience were the additions of prettier and eslint to all of my projects. Critier brought opinionated code formatting to my life and combined with the VS code plugin, made it another thing I don't even have to think about.

    [02:14 - 02:26] And eslint, with the right rules in place, has made me a better JavaScript developer overall. In the next module, we'll set up both to enhance our application and soon you 'll marvel that you ever developed without them.