Create-react-app, one of the most vital Tools for React users, is now available in Version 4. What’s in it and what is the role of the no-new-Features-Release of React 17 plays, you can read here.
create-react-app to Create a React application allows you to enter a single command. A created App already has many of the required Dependencies like Webpack, ESLint and Babel.
One of the most exciting new features in Version 4 is Almost Refresh. Anyone who works regularly with NextJS, is not familiar with the Feature already and appreciate. In
create-react-app 4, the Feature of React Hot Loader replaced. Fast Refresh is not only better performance, but also that the Reload of the components whose State is maintained.
React 17 and JSX Transform
React 17 is a so-called Transition-Release without any new Features, however, the support for the new React Version is a major innovation: Hence, the support for a Feature called JSX Transform is accompanied. JSX Transform has the advantage that you React more import in the future, in your components need to JSX to. The only fly in the ointment: For TypeScript users, comes the support for the new Feature is expected to be only with Version 4.1. For a Deepdive you, this blog post will be placed on the official React Blog to the heart.
Support for Web Vitals
Web Vitals is a useful Library to measure the Performance of an application, which allows you to accurate measure of so – called Core and other Web Vitals. Including values such as Cumlative Layout Shift (CLS), a First Input Delay (FID) or Largest Contentful Paint (LCP). The collection of these metrics, the Library replicates the measurement behavior of Google Chrome and other Google Tools.
Goodie for PWA
create-react-app support in its fourth Version, a Google Library called Workbox. About Workbox developer Pre can take advantage of Caching, and Runtime-Caching in PWAs. Progressive Web Apps are supposed to feel so close to native applications.
Upgrade on your create-react-app created applications
yarn add –exact firstname.lastname@example.org
npm install --save --save-exact email@example.com
for npm users.
Like every Major Release, this version of the update brings some Breaking Changes with it. The newly existing Support for Jest 26 could some of your Tests blast. The Upgrade of ESLint 7 may require configuration changes or adjustments in the Code. All non-backward compatible Changes in the Detail you can read the official Changelog for the project on GitHub.