So erstellen Sie eine einfache App mit Django und React

So erstellen Sie eine einfache App mit Django und React

Möchten Sie eine Web-App mit einem leistungsstarken Backend und einem dynamischen Frontend erstellen? Die Kombination von Django, einem Python-Framework, mit React, einer JavaScript-Bibliothek, ist eine hervorragende Möglichkeit, dies zu erreichen. Django übernimmt Backend-Aufgaben wie Datenbankverwaltung und API-Erstellung, während React eine reaktionsschnelle, interaktive Benutzeroberfläche erstellt.

Wichtige Schritte:

1. Richten Sie Ihre Entwicklungsumgebung ein:
   • Installieren Sie Python 3.x für Django und Node.js für React.
   • Verwenden Sie virtuelle Umgebungen, um Python-Abhängigkeiten zu verwalten.
   • Überprüfen Sie die Installationen mit python --version, node --versionund npm --version.
2. Organisieren Sie Ihr Projekt:
   • Erstellen Sie separate Ordner für das Django-Backend und das React-Frontend.
   • Verwenden Sie django-admin startproject für die Backend-Einrichtung und npx create-react-app für die Frontend-Initialisierung.
3. Erstellen Sie das Backend:
   • Erstellen Sie Django-Apps, definieren Sie Modelle und generieren Sie Migrationen.
   • Verwenden Sie das Django REST Framework, um API-Endpunkte zu erstellen.
   • Konfigurieren Sie django-cors-headers , um die Kommunikation zwischen Frontend und Backend zu ermöglichen.
4. Entwicklung des Frontends:
   • Verwenden Sie React-Komponenten, um Aufgaben und Benutzerinteraktionen zu verwalten.
   • Installieren Sie Axios für API-Anfragen und integrieren Sie es in die Django-Endpunkte.
   • Gestalten Sie die App mit CSS, um eine übersichtliche Benutzeroberfläche zu schaffen.
5. Verbinden und Testen:
   • Führen Sie Django auf localhost:8000 und React auf localhost:3000.
   • Testen Sie die API-Endpunkte mit Tools wie Postman oder direkt im Browser.
   • Stellen Sie die richtigen CORS-Einstellungen sicher, um eine reibungslose Kommunikation zu gewährleisten.

Mit dieser Konfiguration können Sie effizient eine Full-Stack-Anwendung mit klarer Trennung zwischen Backend und Frontend erstellen. Befolgen Sie diese Schritte, um eine skalierbare, interaktive Web-App zu erstellen.

Django- und React-Projekt für Anfänger – Erstellen einer Full-Stack-Notiz-App

Voraussetzungen und Installation

Bevor Sie mit der Entwicklung Ihrer Django- und React-App beginnen, ist es entscheidend, Ihre Entwicklungsumgebung mit den erforderlichen Tools und Abhängigkeiten einzurichten. Diese Grundlage wird Ihnen helfen, Ihre Django- und React-Komponenten im weiteren Verlauf reibungslos zu erstellen, zu integrieren und zu testen.

Systemanforderungen und Tools

Um loszulegen, benötigt Ihr Entwicklungsrechner Python 3.x für Django und Node.js für React. Konkret erfordert Django 5.0 Python 3.x, während React mit Node.js Version 12 oder höher funktioniert.

Python installieren: Du kannst Python direkt von der offiziellen Website herunterladen oder den Paketmanager deines Systems verwenden. Für macOS-Nutzer macht Homebrew die Installation ganz einfach brew install python. Windows-Nutzer sollten das Installationsprogramm von python.org herunterladen, während Linux-Nutzer es mit Befehlen wie apt install python3 unter Ubuntu oder mit ähnlichen Befehlen für andere Distributionen.

Einrichten von Node.js und npm: Node.js wird zusammen mit npm (Node Package Manager) ausgeliefert. Du benötigst npm Version 6 oder höher, wobei Version 7.5.4 eine zuverlässige Wahl ist. Lade Node.js von nodejs.org herunter, wodurch npm automatisch mitinstalliert wird.

Virtuelle Python-Umgebungen: Die Verwendung virtueller Umgebungen ist entscheidend für die konfliktfreie Verwaltung projektspezifischer Abhängigkeiten. Sie können das integrierte venv Modul oder Tools wie pipenv oder virtualenvwrapper für erweiterte Funktionen nutzen. Unter Windows bietet das virtualenvwrapper-win Paket ähnliche Funktionen.

Um zu überprüfen, ob die Installationen erfolgreich waren, führen Sie folgende Befehle in Ihrem Terminal aus:

python --version
node --version
npm --version

Erstellen der Projektstruktur

Eine gut organisierte Projektstruktur ist unerlässlich, um Ihren Backend- und Frontend-Code getrennt und übersichtlich zu halten. Erstellen Sie zunächst ein Hauptverzeichnis für Ihr Projekt:

mkdir django-react-app
cd django-react-app

Erstellen Sie in diesem Verzeichnis zwei Ordner: einen für Ihr Django-Backend und einen für Ihr React-Frontend. Diese Trennung ermöglicht es Ihnen, jeden Teil unabhängig voneinander zu verwalten und bereitzustellen.

Richten Sie Ihre virtuelle Python-Umgebung innerhalb des Projektverzeichnisses ein:

python -m venv venv

Aktivieren Sie die virtuelle Umgebung:

• Unter macOS/Linux: source venv/bin/activate
• Unter Windows: venv\Scripts\activate

Dieser Schritt stellt sicher, dass alle Python-Abhängigkeiten für Ihr Projekt isoliert sind.

Installation der erforderlichen Pakete

Nachdem Ihre Umgebung bereit ist, ist es an der Zeit, die erforderlichen Pakete für Django und React zu installieren.

Django-Backend-Pakete: Installieren Sie, während Ihre virtuelle Umgebung aktiv ist, Django und die dazugehörigen Bibliotheken mit pip:

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django übernimmt die serverseitige Logik, die Datenbankverwaltung und das URL-Routing.
• Das Django REST Framework vereinfacht die Erstellung von RESTful-APIs und erleichtert so die Erstellung von Endpunkten für Ihr React-Frontend.
• Django-cors-headers aktiviert Cross-Origin Resource Sharing (CORS), was für die Kommunikation zwischen Ihrem React-Frontend (läuft auf Port 3000) und dem Django-Backend (läuft auf Port 8000) unerlässlich ist.

Einrichtung des React-Frontends: Verwenden Sie zur Einrichtung Ihrer React-Umgebung das create-react-app Tool. Dieser Befehl initialisiert ein React-Projekt und installiert alle erforderlichen Abhängigkeiten:

npx create-react-app frontend

Dadurch wird ein neues React-Projekt in einem frontend Verzeichnis, komplett mit den wesentlichen Paketen, Entwicklungstools und Build-Skripten.

Zusätzliches Frontend-Paket: Nachdem Sie Ihr React-Projekt eingerichtet haben, wechseln Sie in das frontend Verzeichnis und installiere Axios, eine Bibliothek zum Absenden von HTTP-Anfragen an deine Django-API:

cd frontend
npm install axios

Zu diesem Zeitpunkt ist Ihre Entwicklungsumgebung vollständig mit Python 3.x, Django, Node.js, React und allen erforderlichen Tools ausgestattet. Die virtuelle Python-Umgebung sorgt dafür, dass Ihre Backend-Abhängigkeiten isoliert sind, während npm Ihre JavaScript-Pakete separat verwaltet. Jetzt können Sie mit der Entwicklung Ihrer Full-Stack-Anwendung beginnen!

Aufbau des Backends mit Django

Richten Sie ein Django-Backend mit Datenbankmodellen, API-Endpunkten und Integration für ein React-Frontend ein.

Erstellen eines Django-Projekts und einer App

Beginnen Sie mit der Erstellung eines Django-Projekts, das Einstellungen, Datenbankkonfigurationen und app-spezifische Optionen umfasst. Innerhalb dieses Projekts erstellen Sie eine Django-App – ein Python-Paket, das für bestimmte Aufgaben wie die Verwaltung von Benutzerdaten oder Inhalten konzipiert ist.

Wechseln Sie in das Stammverzeichnis Ihres Projekts (in dem Ihre virtuelle Umgebung eingerichtet ist) und erstellen Sie das Django-Projekt:

django-admin startproject backend .

Dieser Befehl generiert die Projektdateien direkt im aktuellen Verzeichnis, wodurch ein zusätzlicher Ordner vermieden wird. Sie werden neue Dateien wie manage.py (zum Ausführen von Django-Befehlen) sowie ein backend Verzeichnis mit Dateien wie settings.py, urls.py, asgi.pyund wsgi.py.

Erstellen Sie als Nächstes eine App zur Abwicklung bestimmter Funktionen. Zum Beispiel ein Aufgabenmanagementsystem:

python manage.py startapp tasks

Dadurch wird ein tasks Verzeichnis mit wichtigen Dateien wie models.py, views.py, admin.pysowie einen migrations Ordner. Achten Sie darauf, Namenskonflikte mit integrierten Namen wie „django“ oder „test“ zu vermeiden.

Registrieren Sie die App in Ihren Projekteinstellungen, indem Sie sie zur INSTALLED_APPS Liste unter backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

Einrichten von Modellen und Serializern

Definieren Sie Ihre Datenstruktur mit Django-Modellen. Beispielsweise kann ein einfaches Task Modell für die Aufgabenverwaltungs-App kann in tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

Dieses Modell enthält Felder wie CharField für kurzen Text, TextField für längere Inhalte, BooleanField für Wahr/Falsch-Werte sowie DateTimeField für Zeitstempel. Die Meta Klasse legt Optionen wie die Standardreihenfolge fest.

Wenden Sie das Modell auf Ihre Datenbank an, indem Sie Migrationen ausführen:

python manage.py makemigrations tasks
python manage.py migrate

Um Modelldaten in JSON zu konvertieren, verwenden Sie die Serializer des Django REST Frameworks. Definieren Sie tasks/serializers.pydefinieren Sie einen Serializer für das Task Modell:

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at']
        read_only_fields = ['created_at', 'updated_at']

Das ModelSerializer generiert Felder und Methoden automatisch auf Basis des Modells. Durch die explizite Auflistung der Felder stellen Sie sicher, dass Sie nicht versehentlich sensible Daten offenlegen.

Erstellen von API-Endpunkten

Das Django REST Framework vereinfacht die Erstellung von APIs. Verwenden Sie für Standard-CRUD-Operationen ViewSets mit Routern für eine übersichtliche, REST-konforme Struktur.

Erstellen Sie tasks/views.pyerstellen Sie API-Ansichten:

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

Das ModelViewSet übernimmt automatisch das Auflisten, Erstellen, Abrufen, Aktualisieren und Löschen von Aufgaben.

Richten Sie das URL-Routing in tasks/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Fügen Sie diese URLs in die Hauptdatei backend/urls.py Datei ein:

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

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

Konfiguration der CORS-Header

Damit Ihr React-Frontend (das auf Port 3000 läuft) mit dem Django-Backend (auf Port 8000) kommunizieren kann, konfigurieren Sie Cross-Origin Resource Sharing (CORS). Ohne diese Konfiguration blockieren Browser aus Sicherheitsgründen domänenübergreifende Anfragen.

Aktualisieren Sie backend/settings.py so, dass die CORS-Konfiguration enthalten ist:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

Für schnelle Tests können Sie CORS_ALLOW_ALL_ORIGINS = Trueverwenden, doch die Angabe zulässiger Ursprünge ist sicherer.

Testen der API-Endpunkte

Bevor Sie das React-Frontend integrieren, testen Sie die API-Endpunkte, um sicherzustellen, dass sie wie erwartet funktionieren. Starten Sie den Django-Entwicklungsserver:

python manage.py runserver

Rufen Sie die API unter http://127.0.0.1:8000/api/tasks/. Verwenden Sie die durchsuchbare API, um Operationen wie GET- und POST-Anfragen zu testen.

Alternativ können Sie mit cURL oder Postman testen:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

Für automatisierte Tests fügen Sie Testfälle in tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

Nachdem das Backend eingerichtet ist, können Sie es nun mit dem React-Frontend verbinden.

Erstellung des Frontends mit React

Um eine ansprechende Benutzeroberfläche für Ihr Django-Backend zu erstellen, verwenden Sie React zur Verwaltung von Benutzerinteraktionen – von der Anzeige von Aufgaben bis hin zum Hinzufügen neuer Aufgaben.

Ein React-Projekt einrichten

Beginnen Sie damit, Ihr React-Frontend mit „Create React App“ einzurichten. Wechseln Sie in das Stammverzeichnis Ihres Projekts (wo sich Ihr Django-Backend befindet) und führen Sie folgenden Befehl aus:

npx create-react-app frontend
cd frontend

Dieser Befehl richtet eine React-App mit den wesentlichen Dateien wie package.json, src/App.js, und public/index.html. Außerdem enthält es Tools wie „webpack“ zum Bündeln, „Babel“ zur JavaScript-Kompilierung und einen Entwicklungsserver zum Testen.

Installieren Sie anschließend Axios für die Abwicklung von HTTP-Anfragen an Ihre Django-API:

npm install axios

Axios vereinfacht API-Aufrufe, indem es das Parsen von JSON übernimmt und eine bessere Fehlerbehandlung bietet als die integrierte fetch() . Außerdem unterstützt es Funktionen wie Request- und Response-Interceptors.

Ihre Ordnerstruktur sollte nun wie folgt aussehen:

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

Um zu überprüfen, ob alles funktioniert, starte den React-Entwicklungsserver:

npm start

Dadurch wird die App unter http://localhost:3000und zeigt die Standard-Begrüßungsseite von React an. Lass diesen Server während der Entwicklung laufen – er lädt die Seite automatisch neu, wenn du Änderungen vornimmst.

React-Komponenten erstellen

Erstellen wir eine TaskList Komponente erstellen, um Aufgaben anzuzeigen, die von Ihrer Django-API abgerufen werden. Fügen Sie Folgendes zu src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

Erstellen Sie als Nächstes eine TaskForm Komponente zum Hinzufügen neuer Aufgaben. Fügen Sie dies zu src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

Für ein grundlegendes Styling erstellen Sie eine src/App.css Datei an und fügen Sie Folgendes hinzu:

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

Verwaltung des Zustands und API-Integration

React-Hooks wie useState und useEffect erleichtern die Verwaltung des Zustands und die Interaktion mit Ihrem Django-Backend. Um API-Aufrufe zu zentralisieren, erstellen Sie eine Service-Datei src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Integrieren Sie schließlich alles in src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

Mit dieser Konfiguration ist Ihr React-Frontend bereit, Aufgaben interaktiv zu bearbeiten und dabei nahtlos mit Ihrem Django-Backend zu kommunizieren.

Django und React verbinden

Nachdem Ihr Backend und Ihr Frontend nun betriebsbereit sind, besteht der nächste Schritt darin, eine reibungslose Kommunikation zwischen beiden sicherzustellen. Dazu gehören die Einrichtung von API-Endpunkten, die Verwaltung von Anfragen und die Behebung etwaiger Integrationsprobleme.

Einrichten von API-URLs in React

Ihre React-App muss wissen, wo sich die Django-API-Endpunkte befinden. Dazu aktualisieren Sie die src/services/api.js Datei mit umgebungsspezifischen Konfigurationen:

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Für die Produktion fügen Sie eine .env Datei mit folgendem Inhalt zum Stammverzeichnis Ihres React-Projekts hinzu:

REACT_APP_API_URL=https://your-production-domain.com/api

Diese Konfiguration stellt sicher, dass Ihre React-App nahtlos mit Ihrem Django-Backend interagieren kann, unabhängig davon, ob Sie sich in einer lokalen Entwicklungsumgebung befinden oder die App in der Produktion bereitstellen. Nachdem die API-Endpunkte konfiguriert sind, können Sie Backend-Daten abrufen und bearbeiten.

Daten aus dem Backend abrufen

Sobald die API-Konfiguration eingerichtet ist, können Sie CRUD-Operationen durchführen, um Daten zwischen React und Django zu verwalten. Aktualisieren Sie src/App.js , um diese Operationen zu verarbeiten:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

Dieser Code übernimmt die Erstellung, Aktualisierung und Löschung von Aufgaben sowie das Fehlermanagement. Die Benutzeroberfläche wird sofort aktualisiert, um eine reibungslose Benutzererfahrung zu gewährleisten, und Fehler werden elegant behandelt, indem Änderungen rückgängig gemacht oder entsprechende Meldungen angezeigt werden.

Testen und Debuggen der Verbindung

Eine der häufigsten Hürden bei der Verknüpfung von Django und React ist der Umgang mit CORS-Fehlern (Cross-Origin Resource Sharing). Diese entstehen, weil Browser aus Sicherheitsgründen Anfragen zwischen verschiedenen Ursprüngen blockieren. Während der Entwicklung läuft React in der Regel auf localhost:3000, während Django auf localhost:8000, wodurch ein Cross-Origin-Szenario entsteht.

Um CORS-Probleme zu beheben, stellen Sie sicher, dass Sie die CORS-Header in Ihren Django-Einstellungen wie im Abschnitt „Konfigurieren der CORS-Header“ beschrieben konfiguriert haben. Starten Sie Ihren Django-Server nach den Änderungen neu, um diese zu übernehmen.

Hier sind einige häufige Fehler bei API-Anfragen und ihre Lösungen:

• HTTP 400 (Bad Request): Dies bedeutet in der Regel, dass einige erforderliche Daten in der Anfrage-Nutzlast fehlen oder fehlerhaft sind. So trat beispielsweise im November 2023 bei FintanMi ein 400-Fehler beim Erstellen einer Community in einem Django-REST-Framework- und React-Projekt auf, da das owner Feld in der Anfrage fehlte. Überprüfen Sie stets sorgfältig, ob Ihr Frontend alle erforderlichen Felder übermittelt, die von den Django-Modellen erwartet werden.
• HTTP 405 (Method Not Allowed): Dieser Fehler tritt auf, wenn der API-Endpunkt die verwendete HTTP-Methode nicht unterstützt. So meldete FintanMi beispielsweise einen 405-Fehler beim Versuch, einen Beitrag zu löschen. Das Problem wurde behoben, indem die Django-View von generics.RetrieveUpdateAPIView auf generics.RetrieveUpdateDestroyAPIView zu ändern, um die Unterstützung für DELETE Anfragen.

Ausführen und Testen der App

Nachdem Ihr Django-Backend und Ihr React-Frontend miteinander verbunden sind, ist es an der Zeit, beide Entwicklungsserver zu starten und die Anwendung zu testen. Dazu müssen zwei Server gleichzeitig ausgeführt werden, um sicherzustellen, dass alles reibungslos zusammenarbeitet.

Starten der Entwicklungsserver

Um Ihre Django-React-Anwendung auszuführen, benötigen Sie zwei Terminalfenster – eines für jeden Server. Diese Konfiguration ermöglicht es dem Backend und dem Frontend, unabhängig voneinander zu arbeiten und dabei über API-Aufrufe zu kommunizieren.

Starten des Django-Backend-Servers:

1. Öffnen Sie das erste Terminalfenster und wechseln Sie in das Stammverzeichnis Ihres Django-Projekts.

2. Aktivieren Sie Ihre virtuelle Python-Umgebung:

   source venv/bin/activate
   

3. Starten Sie den Django-Entwicklungsserver:

   python manage.py runserver
   

   Der Server ist unter folgender Adresse erreichbar: http://127.0.0.1:8000/.

Starten des React-Frontend-Servers:

1. Öffnen Sie ein zweites Terminalfenster und wechseln Sie in das Verzeichnis Ihres React-Projekts:

   cd frontend
   

2. Starten Sie den React-Entwicklungsserver:

   npm start
   

   Dadurch wird automatisch ein Browserfenster unter http://localhost:3000/.

Sobald beide Server laufen, können Sie mit dem Testen der Funktionalität Ihrer Anwendung beginnen.

Testen der vollständigen App-Funktionalität

Nachdem die Server laufen und CORS sowie die API-Endpunkte ordnungsgemäß konfiguriert sind, ist es an der Zeit, den Datenfluss zwischen Frontend und Backend zu überprüfen.

Überprüfung der Backend-API:

• Testen Sie Ihre Django-API-Endpunkte direkt unter:

  http://localhost:8000/api/tasks
  

  Dadurch sollte die durchsuchbare API-Oberfläche des Django REST Frameworks angezeigt werden, über die Sie CREATE- und READ-Operationen ausführen können.

• Rufen Sie die Django-Admin-Oberfläche unter folgender Adresse auf:

  http://localhost:8000/admin
  

  Melden Sie sich mit Ihren Superuser-Anmeldedaten an, um Aufgaben zu erstellen, zu bearbeiten oder zu löschen. Sie können auch UPDATE- und DELETE-Operationen testen, indem Sie folgende Adresse aufrufen:

  http://localhost:8000/api/tasks/{id}
  

Frontend-Backend-Integrationstests:

• Öffnen Sie Ihre React-App unter http://localhost:3000 und vergewissern Sie sich, dass sie korrekt geladen wird und Aufgaben aus dem Django-Backend anzeigt.
• Testen Sie jede CRUD-Operation über die React-Oberfläche:
  • Fügen Sie eine neue Aufgabe hinzu und überprüfen Sie, ob sie sowohl in der React-Benutzeroberfläche als auch im Backend angezeigt wird.
  • Bearbeiten Sie eine vorhandene Aufgabe und stellen Sie sicher, dass die Änderungen gespeichert werden.
  • Löschen Sie eine Aufgabe und vergewissern Sie sich, dass sie sowohl aus dem Frontend als auch aus der Datenbank entfernt wurde.

Falls Ihre App Filter oder andere Funktionen enthält, testen Sie diese gründlich, um sicherzustellen, dass die Aufgaben wie erwartet angezeigt werden.

Behebung häufiger Probleme

Sollten beim Testen Probleme auftreten, finden Sie hier einige gängige Lösungsansätze.

API-Verbindungsfehler:

• Stellen Sie sicher, dass beide Server auf ihren jeweiligen Ports laufen: Django unter http://localhost:8000 und React auf http://localhost:3000.
• Verwenden Sie die Entwicklertools Ihres Browsers (Registerkarte „Netzwerk“), um HTTP-Statuscodes wie 404 oder 500 zu identifizieren.

• Überprüfen Sie die proxy Einstellung in der package.json Datei:

  "proxy": "http://localhost:8000"
  

  Wenn Sie Änderungen vornehmen, starten Sie den React-Server neu.

Probleme beim Serverstart:

• Wenn der Django-Server nicht startet, prüfen Sie, ob Migrationen fehlen:

  python manage.py makemigrations
  python manage.py migrate
  

• Bei Problemen mit dem React-Server versuchen Sie, die Abhängigkeiten neu zu installieren:

  npm install
  

Probleme mit dem Datenfluss:

• Verwenden Sie die Entwicklertools Ihres Browsers, um Netzwerkanfragen und Konsolenfehler zu überprüfen.
• Fügen Sie Debugging-Anweisungen hinzu, wie z. B. console.log() in React oder print Anweisungen in Django-Views, um den Datenfluss nachzuverfolgen.
• Vergewissern Sie sich, dass die API-URLs in Ihrer React-App exakt mit den Django-URL-Mustern übereinstimmen, einschließlich der abschließenden Schrägstriche (z. B. /api/tasks/).

Zusammenfassung und nächste Schritte

Sie haben eine Web-App erstellt, die Django und React kombiniert, und damit eine solide Einführung in die Full-Stack-Entwicklung erhalten. Dieses Projekt beleuchtet wesentliche Konzepte wie die Trennung von Backend und Frontend, die Durchführung von CRUD-Operationen und die Verwaltung von Cross-Origin-Anfragen mithilfe von CORS-Einstellungen. Dabei haben Sie mit dem Django REST Framework APIs erstellt und React-Hooks für das Zustandsmanagement verwendet – Fähigkeiten, die eine reibungslose Integration dieser beiden leistungsstarken Tools ermöglichen.

Deine App auf die nächste Stufe bringen

Es gibt reichlich Spielraum, um die Funktionalität Ihrer App zu erweitern. Sie können beispielsweise eine JWT-Authentifizierung mithilfe des Django REST Frameworks hinzufügen, um Benutzerdaten und den API-Zugriff zu sichern. Dies würde es Ihnen ermöglichen, benutzerspezifische Funktionen und personalisierte Erlebnisse anzubieten.

Wenn Ihre App Echtzeit-Aktualisierungen benötigt, sollten Sie den Einsatz von Django Channels in Betracht ziehen, um WebSocket-Unterstützung zu ermöglichen. Dies eignet sich perfekt für Funktionen wie Live-Dashboards, Chat-Systeme oder Benachrichtigungen und verwandelt Ihre App in eine dynamischere und interaktivere Plattform.

Mit dem Wachstum Ihrer App gewinnt die fortgeschrittene Datenvisualisierung an Bedeutung. Durch die Kombination der Rendering-Fähigkeiten von React mit einer effizienten Datenabfrage im Backend können Sie komplexe Datensätze effektiv verarbeiten und darstellen.

Vorbereitung auf den Produktivbetrieb

Konzentrieren Sie sich bei der Vorbereitung Ihrer App auf den Produktivbetrieb auf Bereitstellung, Sicherheit und Leistung. Während die aktuelle Konfiguration für die lokale Entwicklung hervorragend geeignet ist, erfordern Produktionsumgebungen zusätzliche Schritte. Dazu gehören das Einrichten von Umgebungsvariablen, die Optimierung Ihrer Datenbank und die Implementierung robuster Mechanismen zur Fehlerbehandlung.

Diese Verbesserungen bauen auf den Fähigkeiten auf, die Sie bereits erworben haben – wie API-Design, komponentenbasierte Architektur und Full-Stack-Integration. Wenn Sie diese fortgeschrittenen Techniken beherrschen, sind Sie bestens gerüstet, um Projekte auf Unternehmensebene in Angriff zu nehmen und sich als Webentwickler weiterzuentwickeln.

Häufig gestellte Fragen

Was sind die Vorteile der Verwendung von Django für das Backend und React für das Frontend bei der Entwicklung einer Web-App?

Die Verwendung von Django für das Backend und React für das Frontend bildet eine starke Kombination für die Entwicklung moderner Webanwendungen. Django bietet ein solides Framework mit zahlreichen Tools, die die Backend-Entwicklung optimieren, während React bei der Erstellung dynamischer und interaktiver Benutzeroberflächen glänzt.

Diese Kombination fördert eine klare Trennung der Verantwortlichkeiten, was dazu beiträgt, den Code übersichtlich zu halten und im Laufe der Zeit leichter zu erweitern. Die komponentenbasierte Struktur von React fördert die Wiederverwendung von UI-Elementen, und das REST-Framework von Django vereinfacht die Erstellung von APIs und gewährleistet eine reibungslose Kommunikation zwischen Frontend und Backend. Zusammen bieten sie einen schnellen, effizienten und nutzerorientierten Ansatz für die Anwendungsentwicklung.

Wie behebe ich CORS-Probleme bei der Anbindung eines React-Frontends an ein Django-Backend?

Um CORS-Probleme zwischen einem React-Frontend und einem Django-Backend zu beheben, ist das django-cors-headers Paket eine praktische Lösung. Installieren Sie es zunächst mit pip. Fügen Sie anschließend in Ihrer settings.py Datei 'corsheaders' zu der INSTALLED_APPS Liste hinzu. Fügen Sie anschließend 'corsheaders.middleware.CorsMiddleware' ganz oben in die MIDDLEWARE Liste ein, um die korrekte Ausführungsreihenfolge der Middleware sicherzustellen.

Während der Entwicklung können Sie den Vorgang vereinfachen, indem Sie CORS_ORIGIN_ALLOW_ALL = True in Ihrer settings.py. Dadurch werden Anfragen von beliebigen Ursprüngen zugelassen. In einer Produktionsumgebung ist es jedoch wesentlich sicherer, bestimmte vertrauenswürdige Domänen mithilfe der CORS_ALLOWED_ORIGINS Einstellung. Dieser Ansatz trägt zu einer höheren Sicherheit bei.

Mit dieser Konfiguration kann Ihre React-App reibungslos mit Ihren Django-APIs interagieren und gleichzeitig die CORS-Anforderungen erfüllen.

Wie kann ich meine Django- und React-App für den Produktivbetrieb vorbereiten?

Um Ihre Django- und React-App für den Produktivbetrieb vorzubereiten, passen Sie zunächst Ihre Django-Einstellungen für eine sichere Konfiguration an. Dazu gehört die Einstellung DEBUG auf False sowie die Angabe der ALLOWED_HOSTS , um zu steuern, welche Domains auf Ihre App zugreifen dürfen. Diese Änderungen sind unerlässlich, um Ihre Anwendung in einer Live-Umgebung zu schützen.

Wählen Sie als Nächstes eine zuverlässige Hosting-Plattform für Ihr Django-Backend und Ihre statischen Dateien aus. Stellen Sie sicher, dass Ihre Infrastruktur so ausgelegt ist, dass sie den Datenverkehr und die Anforderungen im Produktionsbetrieb bewältigen kann. Verwenden Sie für das React-Frontend die entsprechenden Build-Tools, um einen optimierten Produktions-Build zu erstellen.

Sobald Ihre React-App bereit ist, richten Sie einen Webserver wie Nginx ein, um sowohl das React-Frontend als auch das Django-Backend bereitzustellen. Eine korrekte Serverkonfiguration stellt sicher, dass Ihre App effizient läuft und den Nutzern ein nahtloses Erlebnis bietet.

Testen Sie Ihre App vor der Inbetriebnahme gründlich in der Produktionsumgebung. Dieser Schritt hilft dabei, etwaige Probleme zu identifizieren und zu beheben, sodass Ihre App nach dem Start zuverlässig funktioniert.