So richten Sie eine Django + React-Webanwendung mit Webpack ein

Jan 19 2023

Suchen Sie nach einer Möglichkeit, eine Webanwendung mit einem robusten React-Frontend und einem leistungsstarken Django-Backend zu erstellen? Suchen Sie nicht weiter! Dieser Leitfaden hilft Ihnen, Ihre Webanwendung in weniger als ein paar Minuten einzurichten. Django ist ein hochwertiges, kostenloses und quelloffenes Python-Webframework, das eine schnelle Entwicklung und ein klares, pragmatisches Design fördert.

Suchen Sie nach einer Möglichkeit, eine Webanwendung mit einem robusten React-Frontend und einem leistungsstarken Django-Backend zu erstellen? Suchen Sie nicht weiter! Dieser Leitfaden hilft Ihnen, Ihre Webanwendung in weniger als ein paar Minuten einzurichten.

Django ist ein hochwertiges, kostenloses und quelloffenes Python- Webframework, das eine schnelle Entwicklung und ein klares, pragmatisches Design fördert. React ist eine kostenlose und quelloffene Frontend- JavaScript- Bibliothek zum Erstellen von Benutzeroberflächen auf Basis von UI-Komponenten, die die Entwicklung interaktiver Benutzeroberflächen problemlos ermöglicht. Durch die Kombination der beiden Technologien mit Hilfe eines Bündelungstools namens Webpack sind wir in der Lage, mühelos eine solide Webanwendung zu erstellen. Lass uns anfangen!

Voraussetzungen

Es gibt nicht allzu viele Dinge, die Sie für dieses Handbuch im Voraus wissen müssen, aber es wäre auf jeden Fall hilfreich, ein grundlegendes Verständnis von Python und JavaScript zu haben, bevor Sie mit diesem Projekt beginnen.

Installieren Sie Python, Virtualenv und Django

Da Django ein Python-basiertes Webframework ist, müssen wir sicherstellen, dass Python auf unserem Gerät installiert ist, bevor wir fortfahren. Hier sind ein paar Artikel, die Ihnen bei der Installation von Python auf Ihrer jeweiligen Plattform helfen sollen, falls Sie es noch nicht haben: Mac , Windows , Linux

Wir werden ein Python-Tool namens verwenden, das virtualenvuns dabei hilft, die Abhängigkeiten für unser Django-Projekt in einer virtuellen Umgebung zu verfolgen und zu verwalten. Mehr darüber erfahren Sie hier . pip install virtualenvWir können es installieren, indem wir es in einem Terminalfenster ausführen . pip install djangoLassen Sie uns Django auch installieren, indem wir es in einem Terminalfenster ausführen .

Richten Sie eine virtuelle Umgebung ein und erstellen Sie ein Django-Projekt

Laufendjango-admin startproject djangoreact

Laufenpython -m virtualenv <path-to-env>

source <path-to-env>/bin/activateAuf einem Mac oder <path-to-env>/Scripts/activateunter Windows ausführen

Sie können deactivatedie virtuelle Umgebung jederzeit in der Zukunft deaktivieren.

Laufenpip install django

Erstellen und richten Sie das Frontend ein

Führen Sie im djangoreactStammverzeichnis Folgendes aus:django-admin startapp frontend

Öffnen Sie die djangoreact/djangoreact/settings.pyDatei und fügen Sie sie 'frontend'dem INSTALLED_APPSArray hinzu

Ändern Sie djangoreact/djangoreact/urls.pydie Datei so, dass sie wie folgt aussieht:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

Erstellen Sie im djangoreact/frontend/templates/frontendVerzeichnis eine index.htmlDatei und fügen Sie Folgendes ein:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django React</title>
    {% load static %}
  </head>
  <body>
    <div id="root"></div>
    <script src="{% static "js/main.js" %}"></script>
  </body>
</html>

Öffnen Sie djangoreact/djangoreact/settings.pydie Datei und ändern Sie die STATIC_URLVariable von /static/in/frontend/static/
Ändern Sie djangoreact/frontend/views.pyes so, dass es wie folgt aussieht:

from django.shortcuts import render

def index(request):
    return render(request, 'frontend/index.html')

from django.urls import path
from .views import index

urlpatterns = [
    path('', index),
]

Um React und Webpack ausführen zu können, müssen wir Node auf unserem Gerät installieren. Weitere Informationen zur Installation auf Ihrem Gerätetyp finden Sie hier auf der offiziellen Website.

React installieren und einrichten

Erstellen Sie ein srcVerzeichnis innerhalb des djangoreact/frontendVerzeichnisses und ein componentsVerzeichnis innerhalb dieses djangoreact/frontend/srcVerzeichnisses

djangoreact/frontendStellen Sie für die folgenden Schritte sicher, dass Sie derzeit im Verzeichnis arbeiten

Initialisieren Sie ein NPM-Projekt mitnpm init -y
Installieren Sie alle Abhängigkeiten für unser React-Frontend mit den folgenden Befehlen:

npm install webpack webpack-cli --save-dev
npm install @babel/core babel-loader --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties
npm install react react-dom --save-dev

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/js"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production")
      }
    })
  ]
};

"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
 },

import React from "react";

const App = (props) => {
  return (
    <div className="App">
      <h1>Django React Setup Works</h1>
    </div>
  );
};

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App/App";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
);

Navigieren Sie zum djangoreactStammverzeichnis und führen Sie Folgendes aus:

python manage.py migrate && python manage.py runserver

Navigieren Sie in einem neuen Terminalfenster zum djangoreact/frontendVerzeichnis und führen Sie es ausnpm run dev
Öffnen Sie einen Webbrowser und besuchen Sie. http://localhost:8000Dort sollte „Django React Setup Works“ angezeigt werden.

Sie können auch eine weitere App mit einem Befehl wie hinzufügen django-admin startapp apiund das INSTALLED_APPSArray ändern, um eine Django-Anwendung für den Backend-Teil der Webanwendung zu erstellen. Die Einzelheiten dazu liegen jedoch außerhalb des Rahmens dieses Tutorials und Sie können auf ein anderes Online-Django-Tutorial zurückgreifen, um dies zu erreichen.