Anzeige
Anzeige
News
Artikel merken

Mit Goodie für die PWA-Entwicklung: create-react-app 4 ist da

Create-react-app, eines der unverzichtbarsten Tools für React-Nutzer, ist jetzt in Version 4 verfügbar. Was drin steckt und welche Rolle der no-new-Features-Release von React 17 dabei spielt, lest ihr hier.

2 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

yarn add –exact react-scripts@4.0.0

respective

npm install --save --save-exact react-scripts@4.0.0

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
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

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige