๐ 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 ๐