✨ React 17 and React Scripts 4 | A Walkthrough

👋 Hello Developers

This post covers how you can update your app to use React 17. And what do you get from using React 17 and React Scripts 4

So React 17 and React Scripts 4 are successfully released. Actually React 17 was released with no new features. But then we got something called JSX Transform from React 17 and New Hot Reload from React Scripts 4. So let's cover those in this one.

1. ⬆ Update your existing create-react-app app to use React 17.

Updating the versions of the packages

First off, open your package.json file in your project and change the react, react-dom and react-scripts versions as shown below 👇

Then run npm i or yarn as per the package manager you are using to install those updated versions.

Using JSX Transform in all React components

Once you have updated to React 17 and React Scripts 4, you will use JSX Transform, and for that, you will have to edit all the files, which is not a programmer does 😉.

There is a simple script provided by React, which will remove all of your React imports from your components.

npx react-codemod update-react-imports

Run this script inside of your folder in the CLI,

If you are getting any errors running this command above, it's because you have not committed your git changes, you can put a --force to force it to do that

This is the 1st question you will get after running that command
You can select the (.) folder and press enter because you want it to do in the current directory.

The next question would be that which type of JavaScript are you using in your project, you can select the one you are using

Once every question is complete, it'll do it's job and remove the React imports from all the components

2. ⚡️ New Hot Reload

This is not specifically a setting to enable but it is rather a feature by create-react-app. In your cra apps, you will find that when you save your code and check the browser, it won't refresh and will make changes instantly

You can check how it works on this video

3. 👽 Breaking Change from create-react-app

With React Scripts version 4, you no longer have the serviceWorker.js file which you had in the earlier versions of React Scripts. It is removed now and will not work even if you have the file, it will fail at build time.
There is a new thing called reportWebVitals.js which helps you check the performace of your app. Learn more

I also have a video on YouTube about React 17 and React Scripts 4

Finally, Give the post a 💙 like if you liked it, and don't hesitate to ask questions and give suggestions in the 💬 comments. Thanks for reading 🙏