Integrieren Sie React nahtlos in Django mit der Reactify-Django-CLI

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.

“ zugeordnet wird

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>

<ul>
<li><strong>Entwicklungsmodus</strong></li>
</ul>

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

<p>npm start</p>

<p>Dadurch wird der Webpack-Entwicklungsserver gestartet, der Ihren React-Code bei jedem Speichern bündelt und in den statischen Django-Ordner ausgibt.</p>
<p><strong>2. Führen Sie den Django Development Server aus:</strong><br>
Starten Sie in einer separaten Terminalsitzung den Django-Server mit:</p>

<p>python manage.py runserver</p>

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

<ul>
<li><strong>Produktionsaufbau</strong></li>
</ul>

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

<p>npm run build</p>

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

<h2>
  
  
  5. Anpassen Ihres Setups
</h2>

<p>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.</p>

<h2>
  
  
  Abschluss
</h2>

<p>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.<br>
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!</p>

<p><em>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!</em></p>


          </div>

            
        

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!