Hoe bouw je een eenvoudige app met Django en React

Hoe bouw je een eenvoudige app met Django en React

Wil je een webapp maken met een krachtige backend en een dynamische frontend? Door Django, een Python-framework, te combineren met React, een JavaScript-bibliotheek, kun je dit uitstekend realiseren. Django zorgt voor backend-taken zoals databasebeheer en het maken van API’s, terwijl React een responsieve, interactieve gebruikersinterface creëert.

Belangrijke stappen:

1. Je omgeving instellen:
   • Installeer Python 3.x voor Django en Node.js voor React.
   • Gebruik virtuele omgevingen om Python-afhankelijkheden te beheren.
   • Controleer de installaties met python --version, node --version, en npm --version.
2. Organiseer je project:
   • Maak aparte mappen aan voor de Django-backend en de React-frontend.
   • Gebruik django-admin startproject voor het instellen van de backend en npx create-react-app voor het opzetten van de frontend.
3. De backend bouwen:
   • Maak Django-apps aan, definieer modellen en genereer migraties.
   • Gebruik Django REST Framework om API-eindpunten te bouwen.
   • Configureer django-cors-headers om communicatie tussen frontend en backend mogelijk te maken.
4. De frontend ontwikkelen:
   • Gebruik React-componenten om taken en gebruikersinteracties te beheren.
   • Installeer Axios voor API-verzoeken en integreer het met Django-eindpunten.
   • Geef de app met CSS een strakke gebruikersinterface.
5. Verbinden en testen:
   • Draai Django op localhost:8000 en React op localhost:3000.
   • Test API-eindpunten met tools zoals Postman of rechtstreeks in de browser.
   • Zorg voor de juiste CORS-instellingen voor soepele communicatie.

Met deze opzet kun je efficiënt een full-stack-applicatie bouwen met een duidelijke scheiding tussen backend en frontend. Volg deze stappen om een schaalbare, interactieve webapp te maken.

Django- en React-project voor beginners – Bouw een FullStack-notitie-app

Vereisten voor de installatie en het opzetten

Voordat je begint met het bouwen van je Django- en React-app, is het cruciaal om je ontwikkelomgeving in te richten met de benodigde tools en afhankelijkheden. Deze basis helpt je om je Django- en React-componenten soepel te maken, te integreren en te testen terwijl je verdergaat.

Systeemvereisten en tools

Om aan de slag te gaan, heeft je ontwikkelingscomputer Python 3.x nodig voor Django en Node.js voor React. Django 5.0 vereist met name Python 3.x, terwijl React werkt met Node.js versie 12 of hoger.

Python installeren: Je kunt Python rechtstreeks downloaden vanaf de officiële website of de pakketbeheerder van je systeem gebruiken. Voor macOS-gebruikers maakt Homebrew het eenvoudig met brew install python. Windows-gebruikers kunnen het installatieprogramma downloaden van python.org, terwijl Linux-gebruikers het kunnen installeren met commando’s zoals apt install python3 op Ubuntu of vergelijkbare commando’s voor andere distributies.

Node.js en npm instellen: Node.js wordt geleverd met npm (Node Package Manager). Je hebt npm versie 6 of hoger nodig; versie 7.5.4 is een betrouwbare keuze. Download Node.js van nodejs.org; hiermee wordt npm automatisch meegeleverd.

Virtuele Python-omgevingen: Het gebruik van virtuele omgevingen is essentieel om projectspecifieke afhankelijkheden zonder conflicten te beheren. Je kunt de ingebouwde venv module of tools zoals pipenv of virtualenvwrapper voor meer functies. Als je Windows gebruikt, biedt het virtualenvwrapper-win pakket vergelijkbare functionaliteit.

Voer de volgende commando’s uit in je terminal om te controleren of alles correct is geïnstalleerd:

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

De projectstructuur opzetten

Een goed georganiseerde projectstructuur is essentieel om je backend- en frontend-code gescheiden en overzichtelijk te houden. Begin met het aanmaken van een hoofdmap voor je project:

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

Maak binnen deze map twee mappen aan: één voor je Django-backend en één voor je React-frontend. Door deze scheiding kun je elk onderdeel afzonderlijk onderhouden en implementeren.

Stel je virtuele Python-omgeving in binnen de projectmap:

python -m venv venv

Activeer de virtuele omgeving:

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

Deze stap zorgt ervoor dat alle Python-afhankelijkheden voor je project geïsoleerd zijn.

De benodigde pakketten installeren

Nu je omgeving klaar is, is het tijd om de benodigde pakketten voor zowel Django als React te installeren.

Django-backendpakketten: Installeer, terwijl je virtuele omgeving actief is, Django en de bijbehorende bibliotheken met pip:

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

• Django zorgt voor de server-side logica, het databasebeheer en de URL-routing.
• Django REST Framework vereenvoudigt het bouwen van RESTful API's, waardoor het makkelijker wordt om eindpunten voor je React-frontend te maken.
• Django-cors-headers maakt Cross-Origin Resource Sharing (CORS) mogelijk, wat essentieel is voor de communicatie tussen je React-frontend (draaiend op poort 3000) en de Django-backend (draaiend op poort 8000).

React-frontend instellen: Gebruik de create-react-app tool. Dit commando initialiseert een React-project en installeert alle benodigde afhankelijkheden:

npx create-react-app frontend

Hiermee wordt een nieuw React-project aangemaakt in een frontend map, compleet met essentiële pakketten, ontwikkeltools en buildscripts.

Extra frontend-pakket: Nadat je je React-project hebt ingesteld, ga je naar de frontend map en installeer Axios, een bibliotheek voor het uitvoeren van HTTP-verzoeken naar je Django-API:

cd frontend
npm install axios

Op dit moment is je ontwikkelomgeving volledig uitgerust met Python 3.x, Django, Node.js, React en alle benodigde tools. De virtuele Python-omgeving zorgt ervoor dat je backend-afhankelijkheden geïsoleerd zijn, terwijl npm je JavaScript-pakketten apart beheert. Je bent nu klaar om te beginnen met het bouwen van je full-stack-applicatie!

De backend bouwen met Django

Een Django-backend opzetten met databasemodellen, API-eindpunten en integratie voor een React-frontend.

Een Django-project en -app maken

Begin met het aanmaken van een Django-project, dat instellingen, databaseconfiguraties en app-specifieke opties bevat. Binnen dit project bouw je een Django-app – een Python-pakket dat is ontworpen voor specifieke taken, zoals het beheren van gebruikersgegevens of inhoud.

Ga naar de hoofdmap van je project (waar je virtuele omgeving is ingesteld) en maak het Django-project aan:

django-admin startproject backend .

Met deze opdracht worden projectbestanden direct in de huidige map aangemaakt, waardoor je geen extra map nodig hebt. Je zult nieuwe bestanden opmerken, zoals manage.py (voor het uitvoeren van Django-opdrachten) en een backend map met bestanden zoals settings.py, urls.py, asgi.py, en wsgi.py.

Maak vervolgens een app aan om specifieke functionaliteit af te handelen. Bijvoorbeeld een taakbeheersysteem:

python manage.py startapp tasks

Hiermee wordt een tasks map met essentiële bestanden zoals models.py, views.py, admin.py, en een migrations map. Zorg ervoor dat je naamconflicten met ingebouwde namen zoals "django" of "test" vermijdt.

Registreer de app in je projectinstellingen door deze toe te voegen aan de INSTALLED_APPS lijst in 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
]

Modellen en serializers instellen

Definieer je gegevensstructuur met Django-modellen. Een eenvoudig Task model voor de taakbeheer-app kan worden toegevoegd 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

Dit model bevat velden zoals CharField voor korte tekst, TextField voor langere inhoud, BooleanField voor waar/onwaar-waarden, en DateTimeField voor tijdstempels. De Meta klasse specificeert opties zoals de standaardvolgorde.

Pas het model toe op je database door migraties uit te voeren:

python manage.py makemigrations tasks
python manage.py migrate

Gebruik de serializers van het Django REST Framework om modelgegevens naar JSON te converteren. tasks/serializers.py, definieer je een serializer voor het Task model:

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']

Het ModelSerializer genereert automatisch velden en methoden op basis van het model. Door velden expliciet op te sommen, voorkom je dat je onbedoeld gevoelige gegevens blootgeeft.

API-eindpunten bouwen

Django REST Framework vereenvoudigt het maken van API’s. Gebruik voor standaard CRUD-bewerkingen ViewSets met routers voor een overzichtelijke, RESTful-structuur.

Maak tasks/views.py, maak je API-views aan:

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

Het ModelViewSet verwerkt automatisch het weergeven, aanmaken, ophalen, bijwerken en verwijderen van taken.

Stel URL-routing in 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)),
]

Neem deze URL's op in het hoofdbestand backend/urls.py bestand:

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

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

CORS-headers configureren

Om ervoor te zorgen dat je React-frontend (draaiend op poort 3000) kan communiceren met de Django-backend (op poort 8000), moet je Cross-Origin Resource Sharing (CORS) configureren. Zonder dit blokkeren browsers om veiligheidsredenen verzoeken van andere domeinen.

Werk backend/settings.py om de CORS-configuratie op te nemen:

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

Voor snelle tests kun je CORS_ALLOW_ALL_ORIGINS = True, maar het is veiliger om toegestane oorsprongen op te geven.

API-eindpunten testen

Test de API-eindpunten voordat je de React-frontend integreert, om er zeker van te zijn dat ze naar behoren werken. Start de Django-ontwikkelingsserver:

python manage.py runserver

Ga naar de API op http://127.0.0.1:8000/api/tasks/. Gebruik de doorbladerbare API om bewerkingen zoals GET- en POST-verzoeken te testen.

Je kunt ook testen met cURL of Postman:

# 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"}'

Voeg voor geautomatiseerd testen testcases toe 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

Nu de backend klaar is, kun je deze koppelen aan de React-frontend.

De frontend bouwen met React

Om een aantrekkelijke interface voor je Django-backend te maken, gebruik je React om gebruikersinteracties te beheren – van het bekijken van taken tot het toevoegen van nieuwe taken.

Een React-project opzetten

Begin met het opzetten van je React-frontend met behulp van Create React App. Ga naar de hoofdmap van je project (waar je Django-backend staat) en voer het volgende uit:

npx create-react-app frontend
cd frontend

Met dit commando wordt een React-app opgezet met essentiële bestanden zoals package.json, src/App.js, en public/index.html. Het bevat ook tools zoals webpack voor het bundelen, Babel voor het compileren van JavaScript en een ontwikkelingsserver om te testen.

Installeer vervolgens Axios voor het afhandelen van HTTP-verzoeken aan je Django-API:

npm install axios

Axios vereenvoudigt API-aanroepen door het parseren van JSON te beheren en een betere foutafhandeling te bieden dan de ingebouwde fetch() functie. Het ondersteunt ook functies zoals interceptors voor verzoeken en reacties.

Je mappenstructuur zou er nu als volgt uit moeten zien:

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

Om te controleren of alles werkt, start je de React-ontwikkelingsserver:

npm start

Hiermee wordt de app gestart op http://localhost:3000, waarbij de standaard React-welkomstpagina wordt weergegeven. Laat deze server tijdens de ontwikkeling draaien – hij wordt automatisch opnieuw geladen wanneer je wijzigingen aanbrengt.

React-componenten maken

Laten we een TaskList component maken om taken weer te geven die zijn opgehaald uit je Django-API. Voeg het volgende toe aan 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;

Maak vervolgens een TaskForm component voor het toevoegen van nieuwe taken. Voeg dit toe aan 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;

Maak voor wat basisopmaak een src/App.css bestand en voeg het volgende toe:

.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; }

Statusbeheer en API-integratie

React-hooks zoals useState en useEffect maken het eenvoudig om de status te beheren en te communiceren met je Django-backend. Om API-aanroepen te centraliseren, maak je een servicebestand 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;

Integreer ten slotte 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
}

Met deze opzet is je React-frontend klaar om taken interactief af te handelen en tegelijkertijd naadloos te communiceren met je Django-backend.

Django en React koppelen

Nu je backend en frontend operationeel zijn, is de volgende stap ervoor te zorgen dat ze soepel met elkaar communiceren. Dit omvat het instellen van API-eindpunten, het beheren van verzoeken en het oplossen van eventuele integratieproblemen.

API-URL’s instellen in React

Je React-app moet weten waar de Django API-eindpunten zich bevinden. Om dit te bereiken, werk je het src/services/api.js bestand met omgevingsspecifieke configuraties:

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;

Voeg voor de productieomgeving een .env bestand toe aan de hoofdmap van je React-project met de volgende inhoud:

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

Deze configuratie zorgt ervoor dat je React-app naadloos kan communiceren met je Django-backend, of je nu in een lokale ontwikkelomgeving werkt of naar productie implementeert. Nu de API-eindpunten zijn geconfigureerd, ben je klaar om backend-gegevens op te halen en te bewerken.

Gegevens ophalen uit de backend

Zodra de API-configuratie is ingesteld, kun je CRUD-bewerkingen uitvoeren om gegevens tussen React en Django te beheren. Werk src/App.js om deze bewerkingen af te handelen:

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;

Deze code zorgt voor het aanmaken, bijwerken en verwijderen van taken, evenals voor foutbeheer. De gebruikersinterface wordt onmiddellijk bijgewerkt voor een soepele gebruikerservaring, en fouten worden op een elegante manier afgehandeld door wijzigingen ongedaan te maken of passende berichten weer te geven.

De verbinding testen en debuggen

Een van de meest voorkomende hindernissen bij het koppelen van Django en React is het omgaan met CORS-fouten (Cross-Origin Resource Sharing). Deze ontstaan doordat browsers om veiligheidsredenen verzoeken tussen verschillende oorsprongen blokkeren. Tijdens de ontwikkeling draait React doorgaans op localhost:3000, terwijl Django op localhost:8000, waardoor een cross-origin-scenario ontstaat.

Om CORS-problemen op te lossen, moet je ervoor zorgen dat je de CORS-headers in je Django-instellingen hebt geconfigureerd zoals beschreven in het gedeelte „CORS-headers configureren“. Start je Django-server opnieuw op nadat je wijzigingen hebt aangebracht, zodat deze worden toegepast.

Hieronder volgen enkele veelvoorkomende fouten bij API-verzoeken en de bijbehorende oplossingen:

• HTTP 400 (Bad Request): Dit betekent meestal dat er vereiste gegevens ontbreken of onjuist zijn opgegeven in de payload van het verzoek. In november 2023 kreeg FintanMi bijvoorbeeld een 400-foutmelding bij het aanmaken van een community in een Django REST Framework- en React-project, omdat het owner veld ontbrak in het verzoek. Controleer altijd nogmaals of je frontend alle vereiste velden verstuurt die door de Django-modellen worden verwacht.
• HTTP 405 (Method Not Allowed): Dit treedt op wanneer het API-eindpunt de gebruikte HTTP-methode niet ondersteunt. FintanMi meldde bijvoorbeeld een 405-fout bij een poging om een bericht te verwijderen; dit werd opgelost door de Django-view bij te werken van generics.RetrieveUpdateAPIView naar generics.RetrieveUpdateDestroyAPIView , zodat ondersteuning werd toegevoegd voor DELETE verzoeken.

De app uitvoeren en testen

Nu je Django-backend en React-frontend met elkaar zijn verbonden, is het tijd om beide ontwikkelingsservers te starten en de applicatie te testen. Hiervoor moet je twee servers tegelijkertijd draaien en ervoor zorgen dat alles soepel samenwerkt.

De ontwikkelingsservers starten

Om je Django-React-applicatie te draaien, heb je twee terminalvensters nodig – één voor elke server. Met deze opzet kunnen de backend en frontend onafhankelijk van elkaar werken, terwijl ze via API-aanroepen met elkaar communiceren.

De Django-backendserver starten:

1. Open het eerste terminalvenster en ga naar de hoofdmap van je Django-project.

2. Activeer je virtuele Python-omgeving:

   source venv/bin/activate
   

3. Start de Django-ontwikkelingsserver:

   python manage.py runserver
   

   De server is bereikbaar via http://127.0.0.1:8000/.

De React-frontendserver starten:

1. Open een tweede terminalvenster en ga naar de map van je React-project:

   cd frontend
   

2. Start de React-ontwikkelingsserver:

   npm start
   

   Hierdoor wordt automatisch een browservenster geopend op http://localhost:3000/.

Zodra beide servers draaien, kun je beginnen met het testen van de functionaliteit van je applicatie.

De volledige functionaliteit van de app testen

Nu de servers draaien en CORS en API-eindpunten correct zijn geconfigureerd, is het tijd om de gegevensstroom tussen de frontend en de backend te valideren.

Verificatie van de backend-API:

• Test je Django API-eindpunten rechtstreeks door naar het volgende adres te gaan:

  http://localhost:8000/api/tasks
  

  Hierdoor zou de doorbladerbare API-interface van het Django REST Framework moeten worden weergegeven, waar u CREATE- en READ-bewerkingen kunt uitvoeren.

• Ga naar de Django-beheerinterface via:

  http://localhost:8000/admin
  

  Log in met je superuser-inloggegevens om taken aan te maken, te bewerken of te verwijderen. Je kunt ook UPDATE- en DELETE-bewerkingen testen door naar het volgende adres te gaan:

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

Frontend-backend-integratietesten:

• Open je React-app op http://localhost:3000 en controleer of deze correct laadt en taken uit de Django-backend weergeeft.
• Test elke CRUD-bewerking via de React-interface:
  • Voeg een nieuwe taak toe en controleer of deze zowel in de React-gebruikersinterface als in de backend verschijnt.
  • Bewerk een bestaande taak en zorg ervoor dat de wijzigingen worden opgeslagen.
  • Verwijder een taak en controleer of deze zowel uit de frontend als uit de database is verwijderd.

Als je app filters of andere functies bevat, test deze dan grondig om te controleren of taken worden weergegeven zoals verwacht.

Veelvoorkomende problemen oplossen

Mocht u tijdens het testen problemen tegenkomen, dan zijn hier enkele veelvoorkomende oplossingen die u kunt proberen.

Fouten in de API-verbinding:

• Zorg ervoor dat beide servers op hun respectievelijke poorten draaien: Django op http://localhost:8000 en React op http://localhost:3000.
• Gebruik de ontwikkelaarstools van de browser (tabblad 'Netwerk') om HTTP-statuscodes zoals 404 of 500 te identificeren.

• Controleer de proxy instelling in het package.json :

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

  Als je wijzigingen aanbrengt, start dan de React-server opnieuw op.

Problemen bij het opstarten van de server:

• Als de Django-server niet start, controleer dan of er migraties ontbreken:

  python manage.py makemigrations
  python manage.py migrate
  

• Probeer bij problemen met de React-server de afhankelijkheden opnieuw te installeren:

  npm install
  

Problemen met de gegevensstroom:

• Gebruik de ontwikkelaarstools van de browser om netwerkverzoeken en consolefouten te inspecteren.
• Voeg debug-instructies toe, zoals console.log() in React of print instructies in Django-views, om de gegevensstroom te traceren.
• Controleer nogmaals of de API-URL's in je React-app exact overeenkomen met de Django-URL-patronen, inclusief de afsluitende schuine strepen (bijv., /api/tasks/).

Samenvatting en volgende stappen

Je hebt een webapp gemaakt die Django en React combineert, waardoor je een gedegen introductie hebt gekregen in full-stack-ontwikkeling. Dit project belicht essentiële concepten zoals het scheiden van de backend en de frontend, het uitvoeren van CRUD-bewerkingen en het beheren van cross-origin-verzoeken met behulp van CORS-instellingen. Tijdens het project heb je met het Django REST Framework gewerkt om API’s te bouwen en React-hooks gebruikt voor statusbeheer – vaardigheden die een soepele integratie tussen deze twee krachtige tools mogelijk maken.

Je app naar een hoger niveau tillen

Er is volop ruimte om de functionaliteit van je app uit te breiden. Je kunt bijvoorbeeld JWT-authenticatie toevoegen met behulp van het Django REST Framework om gebruikersgegevens en API-toegang te beveiligen. Hierdoor kun je gebruikersspecifieke functies en gepersonaliseerde ervaringen aanbieden.

Als je app realtime updates nodig heeft, overweeg dan om Django Channels te gebruiken om WebSocket-ondersteuning in te schakelen. Dit is perfect voor functies zoals live dashboards, chatsystemen of meldingen, waardoor je app een dynamischer en interactiever platform wordt.

Naarmate je app groeit, wordt geavanceerde datavisualisatie steeds belangrijker. Door de weergavemogelijkheden van React te combineren met efficiënte gegevensopvraging vanuit de backend, kun je complexe datasets effectief verwerken en weergeven.

Voorbereiding op productie

Richt je bij het voorbereiden van je app op productie op implementatie, beveiliging en prestaties. Hoewel de huidige opzet prima is voor lokale ontwikkeling, vereisen productieomgevingen extra stappen. Deze omvatten het instellen van omgevingsvariabelen, het optimaliseren van je database en het implementeren van sterke mechanismen voor foutafhandeling.

Deze verbeteringen bouwen voort op de vaardigheden die je al hebt ontwikkeld – zoals API-ontwerp, componentgebaseerde architectuur en full-stack-integratie. Door deze geavanceerde technieken onder de knie te krijgen, ben je goed toegerust om projecten op bedrijfsniveau aan te pakken en je verder te ontwikkelen als webontwikkelaar.

Veelgestelde vragen

Wat zijn de voordelen van het gebruik van Django voor de backend en React voor de frontend bij het bouwen van een webapp?

Het gebruik van Django voor de backend en React voor de frontend vormt een sterke combinatie voor het ontwikkelen van moderne webapplicaties. Django biedt een solide framework vol met tools die de backend-ontwikkeling stroomlijnen, terwijl React uitblinkt in het bouwen van dynamische en interactieve gebruikersinterfaces.

Deze combinatie bevordert een duidelijke scheiding van verantwoordelijkheden, wat helpt om de codebase overzichtelijk te houden en in de loop van de tijd gemakkelijker uit te breiden. De op componenten gebaseerde structuur van React stimuleert het hergebruik van UI-elementen, en het REST Framework van Django vereenvoudigt het bouwen van API’s, waardoor een soepele communicatie tussen de frontend en de backend wordt gegarandeerd. Samen bieden ze een snelle, efficiënte en gebruikersgerichte aanpak voor applicatieontwikkeling.

Hoe los ik CORS-problemen op bij het koppelen van een React-frontend aan een Django-backend?

Om CORS-problemen tussen een React-frontend en een Django-backend op te lossen, is het django-cors-headers pakket een handige oplossing. Installeer het eerst met pip. Voeg vervolgens in je settings.py bestand 'corsheaders' aan de INSTALLED_APPS lijst. Voeg daarna 'corsheaders.middleware.CorsMiddleware' helemaal bovenaan de MIDDLEWARE lijst op te nemen om de juiste uitvoervolgorde van de middleware te garanderen.

Tijdens de ontwikkeling kun je het jezelf gemakkelijker maken door CORS_ORIGIN_ALLOW_ALL = True in je settings.py. Hierdoor worden verzoeken van elke herkomst toegestaan. In een productieomgeving is het echter veel veiliger om specifieke vertrouwde domeinen te definiëren met behulp van de CORS_ALLOWED_ORIGINS instelling. Deze aanpak draagt bij aan een strengere beveiliging.

Met deze configuratie kan je React-app soepel communiceren met je Django-API’s, terwijl je blijft voldoen aan de CORS-vereisten.

Hoe kan ik mijn Django- en React-app voorbereiden op implementatie in de productieomgeving?

Om je Django- en React-app voor te bereiden op productie, begin je met het aanpassen van je Django-instellingen voor een veilige opzet. Dit omvat het instellen van DEBUG in False en het specificeren van de ALLOWED_HOSTS om te bepalen welke domeinen toegang hebben tot je app. Deze wijzigingen zijn essentieel voor het beveiligen van je applicatie in een live-omgeving.

Kies vervolgens een betrouwbaar hostingplatform voor je Django-backend en statische bestanden. Zorg ervoor dat je infrastructuur is opgezet om het verkeer en de eisen op productieniveau aan te kunnen. Gebruik voor de React-frontend de juiste buildtools om een geoptimaliseerde productiebouw te genereren.

Zodra je React-app klaar is, stel je een webserver zoals Nginx in om zowel de React-frontend als de Django-backend te hosten. Een juiste serverconfiguratie zorgt ervoor dat je app efficiënt draait en biedt gebruikers een naadloze ervaring.

Test je app grondig in de productieomgeving voordat je live gaat. Deze stap helpt bij het opsporen en oplossen van eventuele problemen, zodat je app betrouwbaar presteert zodra deze wordt gelanceerd.