So erstellen Sie eine einfache App mit React und Django

Blog

So erstellen Sie eine einfache App mit React und Django

Die Entkopplung von Frontend und Backend einer App hat Vorteile.



Es ermöglicht Front-End- und Back-End-Ingenieuren in einem Team, sich auf ihre Fähigkeiten zu konzentrieren. Es spart Zeit beim Debuggen der Frameworks / bibliotheksspezifischen Setups, die beim Zusammenfügen zweier Technologien erforderlich sind (ich spreche mit Ihnen ReactOnRails und React-Rails).

In diesem Tutorial stellen wir eine React-App im Frontend und eine Django-App zusammen, die als API für das Backend fungiert.



Das ist der Bildtitel

Teile dieses Tutorials:
1. Aufbau und Einrichtung
2. Frontend
3. Backend
4. Ausführen der App
5. Schlussfolgerung



1. Struktur und Einrichtung

Das ist der Bildtitel

Wenn wir fertig sind, sieht der Dateibaum der App wie oben aus.

Beachten Sie, dass wir hier buchstäblich zwei separate Apps erstellen.
1. Der React-Client
2. Der Django API-Server

Lass uns anfangen

Navigieren Sie zu dem Verzeichnis auf Ihrem Computer, in das Sie Code schreiben, erstellen Sie das App-Verzeichnis der obersten Ebene namens |_+_| und |_+_|in es.

ReactOnDjangoAPI

Erstellen Sie in |_+_| ein |_+_| Verzeichnis für das Frontend (Hinweis: wir erstellen später ein |_+_| Verzeichnis für das Backend).

cd

Öffnen Sie nun die App in Ihrem bevorzugten Editor. Ich verwende Atom.

mkdir ReactOnDjangoAPI && cd $_

2. Frontend

Aus dem obersten Stammverzeichnis, |_+_| in |_+_| , einrichten |_+_| (alle Standardeinstellungen akzeptieren) und die erforderlichen Pakete installieren.

ReactOnDjangoAPI

Aktualisieren Sie nun die |_+_| das wurde erstellt. Es sollte so aussehen:

/client

Die wichtigen Teile hier sind, wir haben geändert |_+_| um |_+_| einzuschließen, und wir haben |_+_| hinzugefügt, was auf den Port zeigt, auf dem unsere Back-End-Django-API ausgeführt wird.

Erstellen Sie in |_+_| zwei neue Verzeichnisse, |_+_| und |_+_|.

/server

Erstellen Sie in |_+_| eine Datei namens |_+_| und in |_+_| erstellen Sie zwei Dateien |_+_| und |_+_|.

Füllen Sie nun diese Dateien mit den nackten Knochen aus, die wir brauchen.

**/public/index.html

HP-Drucker befindet sich im Fehlerzustand
mkdir client

/src/App.js

atom .

/src/index.js

cd

3. Back-End

Erstellen und aktivieren Sie Ihre virtuelle Umgebung. Installieren Sie dann die Bibliotheken, die wir benötigen. Tun Sie dies im Stammverzeichnis der obersten Ebene, wobei |_+_| existiert.

/client

Erstellen Sie jetzt unser Django-Projekt, das als Nebeneffekt unser |_+_| . erstellt Verzeichnis.

npm

|_+_| enthält einige Dateien und Verzeichnisse. In |_+_| ändern Sie |_+_| wie folgt aussehen:

cd client npm init npm install axios react react-dom react-scripts

Bearbeiten Sie im selben Verzeichnis |_+_| so aussehen:

package.json

Bestätigen Sie nun, dass unsere Django-App funktioniert. In der obersten Ebene |_+_| Verzeichnis, ausführen:

{ 'name': 'client', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'dependencies': { 'axios': '^0.19.2', 'react': '^16.13.0', 'react-dom': '^16.13.0', 'react-scripts': '^3.4.0' }, 'devDependencies': {}, 'scripts': { 'start': 'react-scripts start' }, 'author': '', 'license': 'ISC', 'proxy': 'http://localhost:9000', 'browserslist': { 'production': [ '>0.2%', 'not dead', 'not op_mini all' ], 'development': [ 'last 1 chrome version', 'last 1 firefox version', 'last 1 safari version' ] } }

Navigieren Sie zu |_+_|, und Sie sollten die folgende Nachricht auf einer ansonsten leeren Seite sehen.

Das ist der Bildtitel

Login-Seite in HTML mit Validierung

Führen Sie die App aus

Wenn der Server auf Port |_+_| . läuft Starten Sie in einem Konsolenfenster die React-App auf einem anderen Port mit |_+_|.

Dies sollte automatisch den Browser öffnen und |_+_| anzeigen. Wenn nicht, navigieren Sie zu |_+_| . Wenn alles funktioniert hat, sehen Sie Folgendes:

Das ist der Bildtitel

Erfolg! Sie haben jetzt eine React-App bereitgestellt, die Anfragen an eine Django-API stellt, um zu bestimmen, was angezeigt wird. Versuchen Sie, den Text in Djangos |_+_| . zu ändern wenn du nicht weißt was ich meine.

Abschluss

Dies ist zwar eine sehr einfache App, aber das Verständnis, wie man Client und Server entkoppelt, gibt Ihnen viel Flexibilität.

Sie müssen Django nicht für das Backend verwenden – Sie können Rails oder ein Java-Framework verwenden. Sie könnten auch eine mobile App erstellen, die mit dem Back-End interagiert, anstatt eine React-Web-App zu verwenden.

Dies ist nicht produktionsreif (da es keine Datenbank gibt), und wir haben noch nicht einmal über Sicherheit gesprochen. Aber ich hoffe, das gibt Ihnen eine Vorstellung davon, was möglich ist.

Dankeschön!

#reagieren #django #api #python #javascript