v19.2Latest

Eine React-App von Grund auf erstellen

Wenn deine App Anforderungen hat, die von bestehenden Frameworks nicht gut abgedeckt werden, du es vorziehst, dein eigenes Framework zu bauen, oder du einfach die Grundlagen einer React-App lernen möchtest, kannst du eine React-App von Grund auf erstellen.

Deep Dive
Erwäge die Verwendung eines Frameworks

Schritt 1: Ein Build-Tool installieren

Der erste Schritt ist die Installation eines Build-Tools wievite,parceloderrsbuild. Diese Build-Tools bieten Funktionen zum Bündeln und Ausführen von Quellcode, einen Entwicklungsserver für die lokale Entwicklung und einen Build-Befehl, um deine App auf einem Produktionsserver bereitzustellen.

Vite

Viteist ein Build-Tool, das eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte bieten soll.

npm create vite@latest my-app -- --template react-ts

Vite ist meinungsstark und kommt mit sinnvollen Standardeinstellungen aus dem Karton. Vite verfügt über ein reiches Ökosystem von Plugins zur Unterstützung von Fast Refresh, JSX, Babel/SWC und anderen gängigen Funktionen. Siehe VitesReact-PluginoderReact SWC-Pluginund dasReact SSR-Beispielprojekt, um loszulegen.

Vite wird bereits als Build-Tool in einem unsererempfohlenen Frameworksverwendet:React Router.

Parcel

Parcelkombiniert eine großartige Entwicklungserfahrung aus dem Karton mit einer skalierbaren Architektur, die dein Projekt vom einfachen Start bis hin zu massiven Produktionsanwendungen begleiten kann.

npm install --save-dev parcel

Parcel unterstützt Fast Refresh, JSX, TypeScript, Flow und Styling direkt aus dem Karton. SieheParcels React-Rezept, um loszulegen.

Rsbuild

Rsbuildist ein von Rspack angetriebenes Build-Tool, das eine nahtlose Entwicklungserfahrung für React-Anwendungen bietet. Es kommt mit sorgfältig abgestimmten Standardeinstellungen und einsatzbereiten Leistungsoptimierungen.

npx create-rsbuild --template react

Rsbuild enthält eingebaute Unterstützung für React-Funktionen wie Fast Refresh, JSX, TypeScript und Styling. SieheRsbuilds React-Anleitung, um loszulegen.

Hinweis

Metro für React Native

Wenn du mit React Native von Grund auf startest, musst duMetroverwenden, den JavaScript-Bundler für React Native. Metro unterstützt das Bündeln für Plattformen wie iOS und Android, bietet aber im Vergleich zu den hier aufgeführten Tools weniger Funktionen. Wir empfehlen, mit Vite, Parcel oder Rsbuild zu beginnen, es sei denn, dein Projekt erfordert React Native-Unterstützung.

Schritt 2: Häufige Anwendungsmuster aufbauen

Die oben aufgeführten Build-Tools starten mit einer rein clientseitigen Single-Page-App (SPA), enthalten aber keine weiteren Lösungen für gängige Funktionalitäten wie Routing, Datenabruf oder Styling.

Das React-Ökosystem umfasst viele Tools für diese Probleme. Wir haben einige aufgelistet, die als Ausgangspunkt weit verbreitet sind, aber du kannst gerne andere Tools wählen, wenn diese besser für dich funktionieren.

Routing

Routing bestimmt, welcher Inhalt oder welche Seiten angezeigt werden, wenn ein Benutzer eine bestimmte URL aufruft. Du musst einen Router einrichten, um URLs verschiedenen Teilen deiner App zuzuordnen. Du musst auch verschachtelte Routen, Routenparameter und Abfrageparameter behandeln. Router können innerhalb deines Codes konfiguriert oder basierend auf deiner Komponentenordner- und Dateistruktur definiert werden.

Router sind ein Kernbestandteil moderner Anwendungen und sind in der Regel mit Datenabruf (einschließlich Vorabruf von Daten für eine ganze Seite für schnelleres Laden), Code-Splitting (zur Minimierung der Client-Bundle-Größe) und Seitenrendering-Ansätzen (zur Entscheidung, wie jede Seite generiert wird) integriert.

Wir empfehlen die Verwendung von:

Datenabruf

Das Abrufen von Daten von einem Server oder einer anderen Datenquelle ist ein wesentlicher Bestandteil der meisten Anwendungen. Dies korrekt zu handhaben erfordert das Verwalten von Ladezuständen, Fehlerzuständen und das Zwischenspeichern der abgerufenen Daten, was komplex sein kann.

Speziell entwickelte Datenabruf-Bibliotheken übernehmen die schwierige Arbeit des Abrufens und Zwischenspeicherns der Daten für Sie, sodass Sie sich darauf konzentrieren können, welche Daten Ihre App benötigt und wie sie angezeigt werden sollen. Diese Bibliotheken werden typischerweise direkt in Ihren Komponenten verwendet, können aber auch in Router-Loader für schnelleres Vorab-Abrufen und bessere Leistung sowie beim Server-Rendering integriert werden.

Beachten Sie, dass das direkte Abrufen von Daten in Komponenten aufgrund von Netzwerkanfragen-Wasserfällen zu längeren Ladezeiten führen kann. Daher empfehlen wir, Daten nach Möglichkeit in Router-Loadern oder auf dem Server vorab abzurufen! Dies ermöglicht es, die Daten einer Seite auf einmal abzurufen, während die Seite angezeigt wird.

Wenn Sie Daten von den meisten Backends oder REST-ähnlichen APIs abrufen, empfehlen wir die Verwendung von:

Wenn Sie Daten von einer GraphQL-API abrufen, empfehlen wir die Verwendung von:

Code-Splitting

Code-Splitting ist der Prozess, bei dem Ihre App in kleinere Bundles aufgeteilt wird, die bei Bedarf geladen werden können. Die Codegröße einer App wächst mit jeder neuen Funktion und zusätzlichen Abhängigkeit. Apps können langsam laden, weil der gesamte Code für die gesamte App gesendet werden muss, bevor sie verwendet werden kann. Caching, das Reduzieren von Funktionen/Abhängigkeiten und das Verschieben von Code zur Ausführung auf dem Server können helfen, langsames Laden zu mildern, sind aber unvollständige Lösungen, die bei übermäßiger Nutzung Funktionalität opfern können.

Ebenso kann es, wenn Sie darauf angewiesen sind, dass die Apps, die Ihr Framework verwenden, den Code aufteilen, zu Situationen kommen, in denen das Laden langsamer wird, als wenn überhaupt kein Code-Splitting stattfinden würde. Zum Beispiel verzögert dasverzögerte Ladeneines Diagramms das Senden des Codes, der zum Rendern des Diagramms benötigt wird, und trennt den Diagrammcode vom Rest der App.Parcel unterstützt Code-Splitting mit React.lazy. Wenn das Diagramm seine Daten jedochnachdem ersten Rendern lädt, müssen Sie nun doppelt warten. Dies ist ein Wasserfall: Anstatt die Daten für das Diagramm abzurufen und den Code zu dessen Darstellung gleichzeitig zu senden, müssen Sie warten, bis jeder Schritt nacheinander abgeschlossen ist.

Das Aufteilen von Code nach Routen kann, wenn es mit Bundling und Datenabruf integriert ist, die anfängliche Ladezeit Ihrer App und die Zeit bis zum Rendern des größten sichtbaren Inhalts der App (Largest Contentful Paint) reduzieren.

Anweisungen zum Code-Splitting finden Sie in der Dokumentation Ihres Build-Tools:

Verbesserung der Anwendungsleistung

Da das von Ihnen gewählte Build-Tool nur Single-Page-Apps (SPAs) unterstützt, müssen Sie andereRendering-Musterwie Server-Side Rendering (SSR), Static Site Generation (SSG) und/oder React Server Components (RSC) implementieren. Selbst wenn Sie diese Funktionen zunächst nicht benötigen, könnten in Zukunft einige Routen von SSR, SSG oder RSC profitieren.

  • Single-Page-Apps (SPA)laden eine einzelne HTML-Seite und aktualisieren die Seite dynamisch, während der Benutzer mit der App interagiert. SPAs sind einfacher zu starten, können aber längere anfängliche Ladezeiten haben. SPAs sind die Standardarchitektur für die meisten Build-Tools.
  • Streaming Server-Side Rendering (SSR)rendert eine Seite auf dem Server und sendet die vollständig gerenderte Seite an den Client. SSR kann die Leistung verbessern, ist aber komplexer einzurichten und zu warten als eine Single-Page-App. Mit der Ergänzung von Streaming kann SSR sehr komplex einzurichten und zu warten sein. SieheVite’s SSR guide.
  • Static Site Generation (SSG)generiert statische HTML-Dateien für Ihre App zur Build-Zeit. SSG kann die Leistung verbessern, ist aber komplexer einzurichten und zu warten als Server-Side Rendering. SieheVite’s SSG guide.
  • React Server Components (RSC)ermöglicht es, Build-Zeit-, Server-only- und interaktive Komponenten in einem einzigen React-Baum zu mischen. RSC kann die Leistung verbessern, erfordert derzeit jedoch tiefgehendes Fachwissen für Einrichtung und Wartung. SieheParcel’s RSC examples.

Ihre Rendering-Strategien müssen sich in Ihren Router integrieren, damit Apps, die mit Ihrem Framework erstellt werden, die Rendering-Strategie auf Pro-Route-Ebene wählen können. Dies ermöglicht verschiedene Rendering-Strategien, ohne die gesamte App neu schreiben zu müssen. Beispielsweise könnte die Landing Page Ihrer App von statischer Generierung (SSG) profitieren, während eine Seite mit einem Content-Feed mit Server-Side Rendering am besten abschneidet.

Die Verwendung der richtigen Rendering-Strategie für die richtigen Routen kann die Zeit verringern, bis das erste Byte des Inhalts geladen ist (Time to First Byte), bis der erste Inhalt gerendert wird (First Contentful Paint) und bis der größte sichtbare Inhalt der App gerendert wird (Largest Contentful Paint).

Und mehr…

Dies sind nur einige Beispiele für Funktionen, die eine neue App berücksichtigen muss, wenn sie von Grund auf neu erstellt wird. Viele Einschränkungen, auf die Sie stoßen, können schwer zu lösen sein, da jedes Problem mit den anderen verknüpft ist und tiefgehendes Fachwissen in Problembereichen erfordern kann, mit denen Sie möglicherweise nicht vertraut sind.

Wenn Sie diese Probleme nicht selbst lösen möchten, können Siemit einem Framework beginnen, das diese Funktionen von Haus aus bereitstellt.

上一篇Eine React-App erstellen下一篇React zu einem bestehenden Projekt hinzufügen