Create-react-app, one of the most indispensable tools for React users, is now available in version 4. What’s in it and what role the no-new features release of React 17 plays in it, you can read here.
create-react-app allows you to create a React application by entering a single command. An app created in this way already has many required dependencies such as Webpack, ESLint or Babel.
One of the most exciting new features in version 4 is Fast Refresh. Anyone who works regularly with NextJS should already know and appreciate the feature. In
create-react-app 4 replaces the React Hot Loader feature. Fast Refresh not only ensures better performance, but also ensures that when components are reloaded, their state is retained.
React 17 and JSX Transform
React 17 is just a so-called transitional release without new features, but support for the new React version is an important innovation: it also includes support for a feature called JSX Transform. JSX Transform has the advantage that you no longer have to import React into your components in order to use JSX. The only downer: For TypeScript users, support for the new feature will probably only come with version 4.1. For a deep dive, this blog post on the official React blog is recommended.
Support for Web Vitals
Web Vitals is a useful library for measuring the performance of an application, which enables the exact measurement of so-called core and other web vitals. These include values such as Cumlative Layout Shift (CLS), First Input Delay (FID) or Largest Contentful Paint (LCP). When collecting these metrics, the library replicates the measurement behavior of Google Chrome and other Google tools.
The fourth version of create-react-app supports a Google library called Workbox. Via Workbox, developers can use pre-caching and runtime caching in PWAs. Progressive web apps should feel similar to native applications.
You can upgrade your applications created via create-react-app via
yarn add –exact email@example.com
npm install --save --save-exact firstname.lastname@example.org
for npm users.
Like every major release, this version update also brings with it some breaking changes. The new support for Jest 26 could destroy some of your tests. Upgrading to ESLint 7 may require configuration changes or code adjustments. You can find out all changes that are not backwards compatible in detail via the official changelog for the project on GitHub.