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.
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 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.
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.
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.
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.
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team