✨ React 17 and React Scripts 4 | A Walkthrough
Tags: react, webdev, javascript, programming
Published: 2020-11-06 10:00:52

## 👋 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 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604635554996/ydBusTSa5.png)

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.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604637523554/HDGpFtUVL.png)

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604637630438/GDBqB4qeH.png)

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604637686638/FbqSunC3L.png)

## 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](https://youtu.be/m19mK5_anuI?t=348) 

## 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](http://bit.ly/CRA-vitals) 

**I also have a [video on YouTube](https://youtu.be/m19mK5_anuI) about React 17 and React Scripts 4**

{% youtube m19mK5_anuI %}

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 🙏