Das Hinzufügen von React zu einem Django-Projekt kann Ihre Entwicklungserfahrung verbessern, sodass Sie die Leistungsf?higkeit des serverseitigen Renderings und der Sicherheit von Django mit den dynamischen clientseitigen Funktionen von React nutzen k?nnen. Mit der Reactify-Django-CLI wird diese Integration einfach, sodass Sie das robuste Backend von Django nutzen und gleichzeitig hochgradig interaktive Benutzeroberfl?chen mit React erstellen k?nnen. Darüber hinaus haben Sie die Flexibilit?t, TypeScript für statische Typisierung und Tailwind CSS für Utility-First-Styling zu konfigurieren, was von Anfang an ein optimiertes, modernes Entwicklungs-Setup erm?glicht.

In diesem Leitfaden untersuchen wir, warum die Kombination von Django und React von Vorteil ist, und gehen dann durch die Verwendung von ?reactify-django“, um React sowohl in neuen als auch in bestehenden Django-Projekten einzurichten.

Warum ein monolithisches Django-React-Setup w?hlen?

Eine monolithische Django-React-Architektur bietet Ihnen das Beste aus beiden Welten.
Hier erfahren Sie, warum dieser Ansatz von Vorteil ist:

• Serverseitiges Rendering (SSR): Die Template-Engine und die leistungsstarken Backend-Funktionen von Django bieten sofort serverseitiges Rendering und verbessern so die Suchmaschinenoptimierung und die anf?ngliche Seitenladegeschwindigkeit.
• Verbessertes Routing und Sicherheit: Djangos integriertes Routing und robuste Sicherheitsfunktionen (wie CSRF-Schutz und Sitzungsverwaltung) vereinfachen die Backend-Verwaltung und machen die Handhabung komplexer Routings sicherer und einfacher.
• Einheitliche Bereitstellung: Mit React und Django unter einem Dach k?nnen Sie die Bereitstellung als einzelne Anwendung durchführen und so die Komplexit?t der Verwaltung separater Frontend- und Backend-Dienste reduzieren. Es macht au?erdem CORS-Header und -Konfiguration überflüssig, da Django und React denselben Ursprung haben.

Die Verwendung von ?reactify-django“ zum Einrichten von React in Django bedeutet eine schnellere Projektinitialisierung und weniger Standardcode, sodass Sie sofort mit der Entwicklung von Funktionen beginnen k?nnen.

1. Erste Schritte:

Reactify-Django installieren
Um Reactify-Django verwenden zu k?nnen, muss Node.js auf Ihrem Computer installiert sein. Sobald Sie Node haben, k?nnen Sie ?reactify-django“ direkt mit npx:
ausführen npx reactify-django

Befehlsübersicht
Die CLI verfügt über zwei Hauptbefehle:

• init Richtet ein neues Django-Projekt mit React ein.
• add Fügt React zu einem vorhandenen Django-Projekt hinzu.

2. Einrichten eines neuen Django-Projekts mit?React

Um von vorne zu beginnen, verwenden Sie den Befehl init, um ein neues Django-Projekt zu erstellen, das mit React konfiguriert ist.

1. Führen Sie den Befehl aus:

npx reactify-django init

2. Beantworten Sie die Setup-Eingabeaufforderungen:
Sie werden gebeten, Folgendes anzugeben:

• Projektname: Name für Ihr Django-Projekt.
• App-Name: Name für die Django-App, in die React integriert wird.
• Optionale Einrichtung: W?hlen Sie, ob Sie TypeScript und/oder Tailwind CSS im Projekt für zus?tzliche Werkzeug- und Stilfunktionen verwenden m?chten.

3. Dateigenerierung und -konfiguration:

Die CLI richtet Django-Projektdateien ein, konfiguriert Webpack für die React-Bündelung und fügt erforderliche Abh?ngigkeiten für TypeScript und/oder Tailwind hinzu, sofern ausgew?hlt. Es generiert automatisch eine Datei ?templates/your_app_name/index.html“ als Ausgangspunkt für React, die der Stamm-URL mit ?views.index.

Beispielverwendung:

npx reactify-django init -c ./my-new-project

Mit dem Flag -c (oder --cwd) k?nnen Sie das Zielverzeichnis angeben, wenn Sie es nicht im gewünschten Projektordner ausführen.

Hinweis zur URL-Konfiguration:
Standardm??ig ordnet der Befehl ?init“ in ?reactify-django“ Ihre Django-App der Stamm-URL (?“) zu. Diese Konfiguration weicht geringfügig von der typischen Empfehlung von Django ab, die die Verwendung eines app-spezifischen Pr?fixes für URLs vorschl?gt, wie zum Beispiel:

from django.urls import include, path

urlpatterns = [
    path("your_app_name/", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

Der Einfachheit halber enth?lt das generierte Setup jedoch die URLs Ihrer App direkt auf der Stammebene:

from django.urls import include, path

urlpatterns = [
    path("", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

Dieser Ansatz bietet einen sauberen Einstiegspunkt auf Basisebene für Einzelseitenanwendungen. Es kann so ge?ndert werden, dass es das App-Namenspr?fix enth?lt, wenn Sie lieber der Django-Konvention folgen m?chten oder wenn Sie mehrere Django-Apps planen.

3. React in ein bestehendes Django-Projekt integrieren

Wenn Sie bereits ein Django-Projekt haben, k?nnen Sie den Befehl ?add“ verwenden, um React innerhalb einer vorhandenen Django-App einzurichten.

1. Navigieren Sie zu Ihrem App-Verzeichnis:

CD-Pfad/zu/Ihrer-Django-App

2. Führen Sie den Befehl aus:

npx reactify-django add

3. W?hlen Sie zus?tzliche Optionen:

Sie werden zur TypeScript- und Tailwind-Konfiguration aufgefordert, sodass Sie Ihr React-Setup an Ihre Bedürfnisse anpassen k?nnen.
Dieser Befehl generiert eine webpack.config.js im Verzeichnis Ihrer App und platziert das JavaScript-Bundle in static/your_app_name/js/ als bundle.js. Um React in Ihre Vorlagen einzubinden, k?nnen Sie dieses Bundle wie folgt laden:

{%load static %}
<div>



<p><strong>Beispielverwendung:</strong></p>

<p>npx reactify-django add -c ./path/to/app</p>

<h2>
  
  
  4. Ausführen und Erstellen des?Projekts
</h2>

<p>Sobald die Einrichtung abgeschlossen ist, k?nnen Sie sofort mit der Entwicklung beginnen:</p>

• Entwicklungsmodus

1. Starten Sie den Webpack Dev Server:
Führen Sie in Ihrem Django-App-Verzeichnis (wo sich package.json befindet) Folgendes aus:

npm start

Dadurch wird der Webpack-Entwicklungsserver gestartet, der Ihren React-Code bei jedem Speichern bündelt und in den statischen Django-Ordner ausgibt.

2. Führen Sie den Django Development Server aus:
Starten Sie in einer separaten Terminalsitzung den Django-Server mit:

python manage.py runserver

Sie k?nnen jetzt über den Django-Entwicklungsserver auf die React-App zugreifen und so eine gleichzeitige serverseitige und clientseitige Entwicklung erm?glichen.

• Produktionsaufbau

Wenn Sie zur Bereitstellung bereit sind, wechseln Sie in das Django-App-Verzeichnis und führen Sie Folgendes aus:

npm run build

Dadurch wird die React-App für die Produktion gebündelt und optimiertes JavaScript im static/-Verzeichnis platziert, damit Django es bereitstellen kann.

5. Anpassen Ihres Setups

Nachdem Sie ?reactify-django“ ausgeführt haben, stehen die Konfigurationsdateien (z. B. webpack.config.js und Django-Einstellungen) zur Feinabstimmung zur Verfügung. Durch diese Flexibilit?t k?nnen Sie die Einstellungen besser an die Anforderungen Ihres Projekts anpassen.

Abschluss

Die Reactify-Django-CLI vereinfacht den Prozess des Hinzufügens von React zu Django-Projekten, unabh?ngig davon, ob Sie neu starten oder React zu einer vorhandenen App hinzufügen. Durch die Kombination der Backend-St?rke von Django mit der Frontend-Flexibilit?t von React k?nnen Sie eine robuste, funktionsreiche monolithische Anwendung erstellen.
Um es auszuprobieren, installieren Sie die CLI mit npx-reactify-django und erkunden Sie, wie sie Ihren Entwicklungsprozess optimieren kann. Viel Spa? beim Codieren mit dem Besten von Django und React!

Ich hoffe, dass Sie dieses Tool für Ihr Projekt hilfreich finden. Sie finden dieses Projekt auf GitHub. Fühlen Sie sich frei, einen Beitrag zu leisten oder Probleme zu melden!

Das obige ist der detaillierte Inhalt vonIntegrieren Sie React nahtlos in Django mit der Reactify-Django-CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!