Create React App (CRA) is an npm utility package used to create a pre-configured React project. This tool allows you to focus on coding your application without needing to know how to configure tools like Babel and Webpack, which is required to run React app in the browser.
Highlights
On 23rd October 2020, CRA version 4 was released to provide dependency updates for developer tools like ESLint as well as adding several new features. Here are some interesting details for the new CRA version:
react-hot-loader is replaced with Fast Refresh
Fast Refresh is originally a feature of React Native, but it’s very useful for development that the React team also wants it available for web projects, replacing the dependency on react-hot-loader.
One of the advantages of Fast Refresh over React Hot Loader is that it can preserve the local state value in function components (and Hooks) by default. That’s right! Your state won’t revert back to its default value when you change the code and hit save.
Updated tools dependencies
CRA dependencies for several tools are updated: TypeScript to version 4, ESLint to version 7, and Jest to version 26. Some of these changes are breaking, so you need to pay attention.
React version 17
React version 17 means CRA project now supports JSX transform, which enables you to use JSX without importing React. Remember in the past where you need to import React to use JSX?
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
With the new JSX transform, you can write the function without importing React at all:
function App() {
return <h1>Hello World</h1>;
}
But of course, you still need to import React when you use hooks and other React features.
Web Vitals support
Web Vitals is a library from Google Chrome team that aims to capture the user experience of a web page. With CRA 4, Web Vitals is now supported out of the box, helping you to measure important metrics like:
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- Largest Contentful Paint (LCP)
You can see measuring performance documentation for more information.
PWA full customization support
With CRA 4, the project now uses Workbox’s InjectManifest plugin and allows full customization over the logic in the service worker. You can see more details in the PWA documentation.
Breaking changes
The new [email protected] contains a number of breaking changes that shouldn’t affect the majority of users. Here are some important changes that you need to pay attention to:
ESLint
ESLint has been updated to version 7 that adds many new rules for Jest, React Testing Library, and the import/no-anonymous-default-export rule. The rule eslint-plugin-hooks is udpated to 4.0.0 and EXTEND_ESLINT flag has been removed as it’s no longer required to customize the config.
Jest
Jest is updated to version 26 and it has resetMocks value set to true by default.
Service workers
Service workers have been switched to Workbox InjectManifest plugin and the PWA template now has its own repository
Dropped Node 8 support
Node 8 is no longer supported since the end of 2019 anyway.
For more details, see the breaking changes in the changelog.
Updating your Create React App
You can update any Create React App project that has not been ejected by updating react-scripts version to 4.0.0:
npm install --save --save-exact [email protected]
#or
yarn add --exact [email protected]
You can also update the dependency in package.json manually then do npm install command. You may need to delete your node_modules folder and run the install command if you encounter any error after upgrading the package.
If you have ejected your project, it’s still possible to update by reverting to the commit where you ejected, update the dependency, and eject again after it has been updated.