React zu einem bestehenden Projekt hinzufügen

Wenn Sie Ihrem bestehenden Projekt etwas Interaktivität hinzufügen möchten, müssen Sie es nicht in React neu schreiben. Fügen Sie React zu Ihrem bestehenden Stack hinzu und rendern Sie interaktive React-Komponenten überall.

React für eine gesamte Unterroute Ihrer bestehenden Website verwenden

Angenommen, Sie haben eine bestehende Web-App unterexample.com, die mit einer anderen Server-Technologie (wie Rails) erstellt wurde, und Sie möchten alle Routen, die mitexample.com/some-app/beginnen, vollständig mit React implementieren.

So empfehlen wir, dies einzurichten:

1. Erstellen Sie den React-Teil Ihrer Appmit einem derReact-basierten Frameworks.
2. Geben Sie/some-appalsBasis-Pfadin der Konfiguration Ihres Frameworks an (hier erfahren Sie, wie:Next.js,Gatsby).
3. Konfigurieren Sie Ihren Server oder einen Proxyso, dass alle Anfragen unter/some-app/von Ihrer React-App verarbeitet werden.

Dies stellt sicher, dass der React-Teil Ihrer Appvon den Best Practices profitieren kann, die in diese Frameworks integriert sind.

Viele React-basierte Frameworks sind Full-Stack und ermöglichen es Ihrer React-App, den Server zu nutzen. Sie können denselben Ansatz jedoch auch verwenden, wenn Sie JavaScript nicht auf dem Server ausführen können oder möchten. In diesem Fall servieren Sie stattdessen den HTML/CSS/JS-Export (next export outputfür Next.js, Standard für Gatsby) unter/some-app/.

React für einen Teil Ihrer bestehenden Seite verwenden

Angenommen, Sie haben eine bestehende Seite, die mit einer anderen Technologie erstellt wurde (entweder einer serverseitigen wie Rails oder einer clientseitigen wie Backbone), und Sie möchten irgendwo auf dieser Seite interaktive React-Komponenten rendern. Das ist eine gängige Methode zur Integration von React – tatsächlich sah die meiste React-Nutzung bei Meta viele Jahre lang so aus!

Sie können dies in zwei Schritten tun:

1. Richten Sie eine JavaScript-Umgebung ein, die es Ihnen ermöglicht, dieJSX-Syntaxzu verwenden, Ihren Code mit derimport/export-Syntax in Module aufzuteilen und Pakete (z. B. React) aus demnpm-Paket-Registry zu verwenden.
2. Rendern Sie Ihre React-Komponentenan den Stellen auf der Seite, an denen Sie sie sehen möchten.

Der genaue Ansatz hängt von Ihrem bestehenden Seiten-Setup ab, lassen Sie uns daher einige Details durchgehen.

Schritt 1: Eine modulare JavaScript-Umgebung einrichten

Eine modulare JavaScript-Umgebung ermöglicht es Ihnen, Ihre React-Komponenten in einzelnen Dateien zu schreiben, anstatt Ihren gesamten Code in einer einzigen Datei zu schreiben. Sie ermöglicht es Ihnen auch, alle wunderbaren Pakete zu verwenden, die von anderen Entwicklern in dernpm-Registry veröffentlicht wurden – einschließlich React selbst! Wie Sie dies tun, hängt von Ihrem bestehenden Setup ab:

• Wenn Ihre App bereits in Dateien aufgeteilt ist, dieimport-Anweisungen verwenden,versuchen Sie, Ihre bestehende Konfiguration zu nutzen. Prüfen Sie, ob das Schreiben von<div />in Ihrem JS-Code einen Syntaxfehler verursacht. Wenn ja, müssen Sie möglicherweiseIhren JavaScript-Code mit Babel transformierenund dieBabel React Presetaktivieren, um JSX zu verwenden.
• Wenn Ihre App keine bestehende Konfiguration für das Kompilieren von JavaScript-Modulen hat,richten Sie sie mitViteein. Die Vite-Community unterhältviele Integrationen mit Backend-Frameworks, darunter Rails, Django und Laravel. Wenn Ihr Backend-Framework nicht aufgeführt ist,folgen Sie dieser Anleitung, um Vite-Builds manuell mit Ihrem Backend zu integrieren.

Um zu prüfen, ob Ihre Konfiguration funktioniert, führen Sie diesen Befehl in Ihrem Projektordner aus:

npm install react react-dom

Fügen Sie dann diese Codezeilen am Anfang Ihrer Haupt-JavaScript-Datei ein (sie könnteindex.jsodermain.jsheißen):

Wenn der gesamte Seiteninhalt durch ein „Hello, world!“ ersetzt wurde, hat alles funktioniert! Lesen Sie weiter.

Schritt 2: React-Komponenten überall auf der Seite rendern

Im vorherigen Schritt haben Sie diesen Code am Anfang Ihrer Hauptdatei platziert:

Natürlich möchten Sie nicht wirklich den bestehenden HTML-Inhalt löschen!

Löschen Sie diesen Code.

Stattdessen möchten Sie Ihre React-Komponenten wahrscheinlich an bestimmten Stellen in Ihrem HTML rendern. Öffnen Sie Ihre HTML-Seite (oder die Server-Templates, die sie generieren) und fügen Sie einem beliebigen Tag ein eindeutigesid-Attribut hinzu, zum Beispiel:

Dadurch können Sie dieses HTML-Element mitdocument.getElementByIdfinden und ancreateRootübergeben, damit Sie Ihre eigene React-Komponente darin rendern können:

Beachten Sie, wie der ursprüngliche HTML-Inhalt ausindex.htmlerhalten bleibt, aber Ihre eigeneNavigationBar-React-Komponente nun innerhalb des<nav id="navigation">aus Ihrem HTML erscheint. Lesen Sie diecreateRoot-Nutzungsdokumentation, um mehr über das Rendern von React-Komponenten innerhalb einer bestehenden HTML-Seite zu erfahren.

Wenn Sie React in einem bestehenden Projekt einführen, ist es üblich, mit kleinen interaktiven Komponenten (wie Buttons) zu beginnen und dann schrittweise „nach oben“ zu arbeiten, bis schließlich die gesamte Seite mit React erstellt ist. Wenn Sie diesen Punkt erreichen, empfehlen wir, direkt danach aufein React-Frameworkzu migrieren, um das Meiste aus React herauszuholen.

React Native in einer bestehenden nativen Mobile App verwenden

React Nativekann ebenfalls schrittweise in bestehende native Apps integriert werden. Wenn Sie eine bestehende native App für Android (Java oder Kotlin) oder iOS (Objective-C oder Swift) haben,folgen Sie dieser Anleitung, um einen React Native-Bildschirm hinzuzufügen.