Seit Create React App veraltet ist, empfiehlt React offiziell, mit einem Framework zu beginnen.
Ein neuer Weg, mit React zu beginnen: Von Create React App zu Frameworks
Wenn du eine neue App oder Website mit React entwickelst, ist es empfehlenswert, mit einem Framework zu starten.
Wenn deine App Einschränkungen hat, die von bestehenden Frameworks nicht gut abgedeckt werden, du lieber ein eigenes Framework entwickelst oder einfach nur die Grundlagen von React-Apps lernen möchtest, kannst du auch eine React-App von Grund auf aufbauen.
Full-Stack-Frameworks
Diese empfohlenen Frameworks unterstützen alle Funktionen, die nötig sind, um Apps in Produktion bereitzustellen und zu skalieren. Sie integrieren moderne React-Funktionen und nutzen die Architektur von React.
Full-Stack-Frameworks benötigen keinen Server
Alle Frameworks auf dieser Seite unterstützen Client-Side Rendering (CSR), Single-Page-Apps (SPA) und Static Site Generation (SSG). Solche Apps können ohne Server auf einem CDN oder einem statischen Hosting-Dienst bereitgestellt werden. Außerdem ermöglichen diese Frameworks, bei passenden Anwendungsfällen serverseitiges Rendering pro Route hinzuzufügen.
So kannst du mit einer reinen Client-App beginnen und später, falls sich die Anforderungen ändern, Serverfunktionen für einzelne Routen aktivieren, ohne die App neu schreiben zu müssen. Sieh in der Dokumentation des jeweiligen Frameworks nach, wie sich die Rendering-Strategie konfigurieren lässt.
Next.js (App Router)
Der App Router von Next.js ist ein React-Framework, das Full-Stack-React-Apps ermöglicht, indem es die Architektur von React maximal nutzt.
npx create-next-app@latest
Next.js wird von Vercel betreut. Du kannst eine Next.js-App erstellen und auf Node.js, serverlosem Hosting oder deinem eigenen Server bereitstellen. Next.js unterstützt außerdem statischen Export ohne Server. Vercel bietet zusätzlich optionale kostenpflichtige Cloud-Dienste an.
React Router (v7)
React Router ist die beliebteste Routing-Bibliothek für React und kann zusammen mit Vite als Full-Stack-React-Framework eingesetzt werden. Es legt den Schwerpunkt auf standardisierte Web APIs und bietet vorgefertigte Deployment-Templates für verschiedene JavaScript-Runtimes und Plattformen.
Um ein neues React-Router-Framework-Projekt zu erstellen, verwende den folgenden Befehl.
npx create-react-router@latest
React Router wird von Shopify betreut.
Expo (für native Apps)
Expo ist ein React-Framework, mit dem du universelle Apps für Android, iOS und das Web mit nativer UI erstellen kannst. Es bietet ein React Native SDK, das die Nutzung nativer Funktionen vereinfacht. Um ein neues Expo-Projekt zu erstellen, verwende den folgenden Befehl.
npx create-expo-app@latest
Wenn du Expo zum ersten Mal verwendest, sieh dir das Expo-Tutorial an.
Expo wird von Expo (dem Unternehmen) betreut. Das Erstellen von Apps mit Expo ist kostenlos, und du kannst sie ohne Einschränkungen im Google- oder Apple-Store einreichen. Expo bietet zusätzlich optionale kostenpflichtige Cloud-Dienste an.
Andere Frameworks
Es gibt noch weitere aufstrebende Frameworks, die sich in Richtung der Full-Stack-React-Vision entwickeln.
- TanStack STart (Beta): TanStack Start ist ein Full-Stack-React-Framework auf Basis von TanStack Router. Es bietet vollständiges Dokument-SSR, Streaming, Serverfunktionen, Bundling und viele nützliche Werkzeuge, ähnlich wie Nitro oder Vite.
- RedwoodJS: Redwood ist ein Full-Stack-React-Framework mit vorinstallierten Paketen und Konfigurationen, damit sich Full-Stack-Webanwendungen leicht erstellen lassen.
Welche Funktionen prägen die Vision des React-Teams für eine Full-Stack-Architektur?
Der App-Router-Bundler von Next.js implementiert die offizielle React-Server-Components-Spezifikation vollständig. Dadurch lassen sich Build-Time-, serverseitige und interaktive Komponenten in einem einzigen React-Baum kombinieren.
Du kannst zum Beispiel eine rein serverseitige React-Komponente als async-Funktion schreiben, die eine Datenbank oder Dateien liest. Anschließend kannst du die Daten an interaktive Komponenten übergeben.
// Diese Komponente läuft *nur* auf dem Server (oder nur während des Builds).
async function Talks({ confId }) {
// 1. Auf dem Server kannst du direkt mit der Datenebene sprechen. Ein API-Endpunkt ist nicht nötig.
const talks = await db.Talks.findAll({ confId });
// 2. Selbst wenn zusätzliche Rendering-Logik hinzukommt, wird das JavaScript-Bundle dadurch nicht wesentlich größer.
const videos = talks.map(talk => talk.video);
// 3. Übergib die Daten an eine Komponente, die im Browser ausgeführt wird.
return <SearchableVideoList videos={videos} />;
}
Der App Router von Next.js integriert Suspense und Datenabfrage. Damit kannst du Ladezustände für unterschiedliche Teile der Benutzeroberfläche direkt im React-Baum definieren, zum Beispiel Skeleton-Placeholder.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Server Components und Suspense sind keine Next.js-Funktionen, sondern React-Funktionen. Um sie jedoch auf Framework-Ebene zu übernehmen, sind Abstimmung und erheblicher Implementierungsaufwand nötig. Der Next.js App Router ist derzeit die vollständigste Implementierung. Das React-Team arbeitet mit Bundler-Entwicklern zusammen, um diese Funktionen in der nächsten Generation von Frameworks leichter umsetzbar zu machen.
Von Grund auf beginnen
Wenn deine App Einschränkungen hat, die von bestehenden Frameworks nicht gut abgedeckt werden, du lieber ein eigenes Framework entwickeln oder die Grundlagen von React-Apps lernen möchtest, gibt es weitere Optionen, um ein React-Projekt von Grund auf zu starten.
Von Grund auf zu beginnen gibt dir mehr Flexibilität, aber du musst selbst Werkzeuge für Routing, Datenabfrage und andere gängige Nutzungsmuster auswählen. Das ähnelt dem Aufbau eines eigenen Frameworks, statt ein bestehendes zu verwenden. Die von uns empfohlenen Frameworks bieten für diese Probleme integrierte Lösungen.
Wenn du deine eigene Lösung entwickeln möchtest, sieh dir den Leitfaden zum Erstellen einer React-App von Grund auf an, mit dem du mit Build-Tools wie Vite, Parcel oder RSbuild starten kannst.
6 Kommentare
React ist nicht mehr als eine komponentenbasierte UI-Bibliothek. Es ist zwar einfach, Komponenten einfach in HTML anzuzeigen, aber um eine Website oder App zu erstellen, werden viele Funktionen benötigt. Deshalb werden Frameworks empfohlen. Das liegt nicht nur an React; viele moderne Websites werden heute mit Web-Frameworks erstellt. Außerdem kann React auch zusammen mit Web-Frameworks verwendet werden, die in verschiedenen anderen Sprachen entwickelt wurden (z. B. Go, Rust, Java) und nicht unbedingt React-basierte Frameworks sein müssen. Letztlich liegt die Wahl immer beim Nutzer.
Wenn man nicht weiß, unter welchen Einschränkungen Entwickler React einsetzen werden, sollten die offiziellen Dokumente meiner Meinung nach nicht in einer möglichst Vanilla-nahen Umgebung verfasst sein?
React kann auch zusammen mit Web-Frameworks verwendet werden, die in verschiedenen Sprachen entwickelt wurden (z. B. Go, Rust, Java usw.), ohne dass es zwingend ein React-basiertes Framework sein muss.
-> Genau deshalb finde ich eigentlich, dass zumindest der Abschnitt „Get Started“ in der offiziellen React-Dokumentation möglichst so anleiten sollte, dass man nur React und möglichst wenige weitere Abhängigkeiten verwendet.
Nun ja ... da ich selbst vor Kurzem React gelernt habe, war ich nach der Einstellung von CRA auch etwas ratlos, weil meine Lernmaterialien auf CRA basierten. Deshalb habe ich mir Next, React Router usw. angesehen, aber diese bringen jeweils ihre eigenen zusätzlichen Techniken mit, sodass sie meiner Meinung nach nicht ganz geeignet sind, wenn man React selbst lernen will. Persönlich finde ich, dass Vite da noch am ehesten die bessere Wahl ist.
React empfiehlt offiziell, mit einem Framework zu starten -> an sich ist das längst überfällig, aber ich frage mich trotzdem, ob es richtig ist, dass schon die offizielle React-Dokumentation dazu rät, gleich mit einem bestimmten Framework oder Build-Tool einzusteigen.
In bestehenden Codebasen kann man dieses Framework oder Build-Tool womöglich gar nicht einsetzen, und allein mehr Abhängigkeiten hinzuzufügen kann sich schon belastend anfühlen.
Irgendwie war die Zeit entspannter, als man einfach ein
script-Tag in HTML eingefügt und die Funktionen der Bibliothek direkt genutzt hat. Ist das schon eine Geschichte aus längst vergangenen Zeiten...Ich frage mich auch, ob das wirklich nötig ist.