✨ 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-scripts versions as shown below 👇
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
--forceto 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.
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
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 🙏