Mit Goodie für die PWA-Entwicklung: create-react-app 4 ist da
create-react-app erstellt eine basic React-App inklusive Dependencies mit nur einem Command. (Screenshot: t3n)
create-react-app ermöglicht das Erstellen einer React-Applikation über die Eingabe eines einzelnen Befehls. Eine so erstellte App verfügt bereits über viele benötigte Dependencies wie Webpack, ESLint oder Babel.
Fast Refresh
Eine der spannendsten Neuerungen in Version 4 ist Fast Refresh. Wer regelmäßig mit NextJS arbeitet, dürfte das Feature bereits kennen und schätzen. In create-react-app 4 ersetzt das Feature React Hot Loader. Fast Refresh sorgt nicht nur für bessere Performanz, sondern ebenso dafür, dass beim Reload von Komponenten deren State erhalten bleibt.
React 17 und JSX Transform
React 17 ist zwar nur ein sogenannter Übergangs-Release ohne neue Features, trotzdem ist die Unterstützung für die neue React-Version eine wichtige Neuerung: Damit einher geht nämlich auch die Unterstützung für ein Feature namens JSX Transform. JSX Transform hat den Vorteil, dass ihr React zukünftig nicht mehr in eure Komponenten importieren müsst um JSX nutzen zu könnt. Einziger Wermutstropfen: Für TypeScript-Nutzer kommt die Unterstützung für das neue Feature voraussichtlich erst mit Version 4.1. Für einen Deepdive sei euch dieser Blogpost auf dem offiziellen React-Blog ans Herz gelegt.
Unterstützung für Web Vitals
Web Vitals ist eine nützliche Library zum Messen der Performance einer Anwendung, die das genaue Messen sogenannter Core- und anderer Web Vitals ermöglicht. Darunter Werte wie Cumlative Layout Shift (CLS), First Input Delay (FID) oder Largest Contentful Paint (LCP). Bei der Erhebung dieser Metriken repliziert die Library das Messungsverhalten von Google Chrome und anderer Google Tools.
Goodie für PWA
create-react-app unterstützt in seiner vierten Version eine Google-Library namens Workbox. Über Workbox können Entwickler Pre-Caching und Runtime-Caching in PWAs nutzen. Progressive Web Apps sollen sich so annähernd anfühlen wie native Applikationen.
Breaking Changes
Upgraden könnt ihr eure über create-react-app erstellten Anwendungen über
yarn add –exact react-scripts@4.0.0
respective
npm install --save --save-exact react-scripts@4.0.0
für npm-Nutzer.
Wie jeder Major Release bringt auch dieses Versionsupdate einige Breaking Changes mit sich. Der neu vorhandene Support für Jest 26 könnte einige eurer Tests zerschießen. Das Upgrade auf ESLint 7 erfordert möglicherweise Konfigurationsänderungen oder Anpassungen im Code. Alle nicht abwärts kompatiblen Änderungen im Detail erfahrt ihr über den offiziellen Changelog zum Projekt auf GitHub.
