Een eenvoudige app maken met Django en React

Wil je een webapp maken met een sterke backend en dynamische frontend? Django, een Python-framework, koppelen aan React, een JavaScript-bibliotheek, is een geweldige manier om dit te bereiken. Django zorgt voor backend-taken zoals databasebeheer en het maken van API's, terwijl React een responsieve, interactieve gebruikersinterface creëert.

Belangrijkste stappen:

1. Stel uw omgeving in:- Installeer Python 3.x voor Django en Node.js voor React.

   • Gebruik virtuele omgevingen om Python-afhankelijkheden te beheren.
   • Bevestig installaties met python --version, node --version en npm --version.

2. Organiseer uw project:- Maak aparte mappen voor de Django backend en React frontend.

   • Gebruik django-admin startproject voor de backend setup en npx create-react-app voor de frontend initialisatie.

3. Bouw de backend:- Maak Django apps, definieer modellen en genereer migraties.

   • Gebruik Django REST Framework om API endpoints te bouwen.
   • Configureer django-cors-headers om communicatie tussen frontend en backend mogelijk te maken.

4. Ontwikkel de voorkant:- Gebruik React-componenten om taken en gebruikersinteracties te beheren.

   • Installeer Axios voor API-verzoeken en integreer het met Django eindpunten.
   • Stijl de app met CSS voor een schone gebruikersinterface.

5. Verbinden en testen:- Voer Django uit op localhost:8000 en React op localhost:3000.

   • Test API endpoints met tools zoals Postman of direct in de browser.
   • Zorg voor de juiste CORS-instellingen voor soepele communicatie.

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

Django en React Project voor beginners - Bouw een FullStack Notes-app

Installatie en vereisten

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 zal u helpen bij het maken, integreren en testen van uw Django en React componenten.

Systeemvereisten en tools

Om te beginnen heeft uw ontwikkelmachine Python 3.x nodig voor Django en Node.js voor React. Meer specifiek vereist Django 5.0 Python 3.x, terwijl React werkt met Node.js versie 12 of hoger.

Python installeren: Je kunt Python rechtstreeks downloaden van 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 van python.org downloaden, terwijl Linux-gebruikers het kunnen installeren met commando's als apt install python3 op Ubuntu of soortgelijke commando's voor andere distributies.

Node.js en npm installeren: Node.js wordt geleverd met npm (Node Package Manager). Je hebt npm versie 6 of hoger nodig, waarbij versie 7.5.4 een betrouwbare keuze is. Download Node.js van nodejs.org, dat automatisch npm zal toevoegen.

Python virtuele omgevingen: Het gebruik van virtuele omgevingen is de sleutel tot het beheren van projectspecifieke afhankelijkheden zonder conflicten. Je kunt de ingebouwde venv module gebruiken of tools zoals pipenv of virtualenvwrapper voor meer mogelijkheden. Als je op Windows zit, biedt het virtualenvwrapper-win pakket vergelijkbare functionaliteit.

Om je installaties te bevestigen, voer je deze commando's uit in je terminal:

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

De projectstructuur maken

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

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

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

Maak een virtuele Python-omgeving aan in de projectmap:

python -m venv venv

Activeer de virtuele omgeving:

• Op macOS/Linux: source venv/bin/activate
• Op Windows: venvScripts activeren

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

Benodigde pakketten installeren

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

Django backend pakketten: Terwijl uw virtuele omgeving actief is, installeert u Django en de ondersteunende bibliotheken met pip:

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

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

React Frontend instellen: Om uw React-omgeving in te stellen, gebruikt u de tool create-react-app. Deze opdracht initialiseert een React-project en installeert alle noodzakelijke afhankelijkheden:

npx create-react-app frontend

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

Extra Frontend pakket: Na het opzetten van uw React-project, navigeert u naar de frontend-directory en installeert u Axios, een bibliotheek voor het maken van HTTP-verzoeken naar uw Django API:

cd frontend npm install axios

Op dit punt is uw 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 afhandelt. Nu ben je klaar om te beginnen met het bouwen van je full-stack applicatie!

De backend bouwen met Django

Zet een Django backend op met databasemodellen, API endpoints en integratie voor een React frontend.

Een Django-project en app maken

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

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

django-admin startproject backend .

Dit commando genereert projectbestanden direct in de huidige directory, waardoor een extra map wordt vermeden. U zult nieuwe bestanden zien zoals manage.py (voor het uitvoeren van Django-opdrachten) en een backend-directory met bestanden zoals settings.py, urls.py, asgi.py en wsgi.py.

Maak vervolgens een app voor specifieke functionaliteit. Bijvoorbeeld een taakbeheersysteem:

python manage.py startapp taken

Dit maakt een takenmap aan met essentiële bestanden zoals models.py, views.py, admin.py en een map migrations. Zorg ervoor dat u naamconflicten met ingebouwde namen zoals "django" of "test" vermijdt.

Registreer de app in uw 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', # Registreer uw app ]

Modellen en serializers instellen

Definieer uw datastructuur met Django modellen. Bijvoorbeeld, een eenvoudig Taak-model voor de taakbeheer-app kan worden toegevoegd in taken/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 klasse Meta specificeert opties zoals de standaardvolgorde.

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

python manage.py makemigrations taken python manage.py migrate

Om modelgegevens naar JSON te converteren, gebruikt u Django REST Framework serializers. Definieer in tasks/serializers.py een serializer voor het Taak-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']

De ModelSerializer genereert automatisch velden en methoden op basis van het model. Het expliciet opsommen van velden zorgt ervoor dat je niet onbedoeld gevoelige gegevens blootgeeft.

API eindpunten bouwen

Django REST Framework vereenvoudigt het maken van API's. Gebruik voor standaard CRUD operaties ViewSets met routers voor een schone, RESTful structuur.

Maak in tasks/views.py API views:

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] # Alleen voor ontwikkeling

De ModelViewSet handelt automatisch het opsommen, maken, ophalen, bijwerken en verwijderen van taken af.

Stel URL routing in tasks/urls.py in:

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:

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 uw React frontend (die draait op poort 3000) te laten communiceren met de Django backend (op poort 8000), configureert u Cross-Origin Resource Sharing (CORS). Zonder dit blokkeren browsers cross-origin verzoeken om veiligheidsredenen.

Update backend/settings.py om CORS configuratie op te nemen:

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Voeg dit bovenaan toe '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 instellingen voor ontwikkeling CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # React ontwikkelingsserver "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True

Voor snel testen kun je CORS_ALLOW_ALL_ORIGINS = True gebruiken, maar het specificeren van toegestane herkomsten is veiliger.

API-eindpunten testen

Voordat u de React frontend integreert, test u de API endpoints om er zeker van te zijn dat ze werken zoals verwacht. Start de Django ontwikkelingsserver:

python manage.py runserver

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

U kunt ook testen met cURL of Postman:

# Test GET verzoek om taken op te sommen curl -X GET http://127.0.0.1:8000/api/tasks/ # Test POST verzoek om een taak te maken curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Testtaak", "beschrijving": "Dit is een testtaak"}'

Voeg voor geautomatiseerd testen testgevallen 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): # Voeg hier je assertions en testlogica toe pass

Met de backend op zijn plaats ben je klaar om deze te verbinden met de React frontend.

De voorkant bouwen met React

Om een aantrekkelijke interface voor uw Django backend te maken, gebruikt u React om gebruikersinteracties te beheren - alles van het bekijken van taken tot het toevoegen van nieuwe.

Een React-project opzetten

Begin met het opzetten van uw React frontend met behulp van Create React App. Navigeer naar de hoofdmap van je project (waar je Django backend zich bevindt) en voer het volgende uit:

npx create-react-app frontend cd frontend

Deze opdracht zet een React app op met essentiële bestanden zoals package.json, src/App.js en public/index.html. Het bevat ook tools zoals webpack voor bundelen, Babel voor JavaScript-compilatie en een ontwikkelserver voor testen.

Installeer vervolgens Axios voor het afhandelen van HTTP-verzoeken naar uw Django API:

npm install axios

Axios maakt API-aanroepen eenvoudiger door JSON-parsing te beheren en een betere foutafhandeling te bieden dan de ingebouwde fetch() functie. Het ondersteunt ook functies zoals request en response interceptors.

Je mappenstructuur zou er nu zo uit moeten zien:

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

Om te bevestigen dat alles werkt, start u de React-ontwikkelserver:

npm start

Dit start de app op http://localhost:3000 en toont de standaard React welkomstpagina. Laat deze server draaien tijdens de ontwikkeling - hij wordt automatisch opnieuw geladen wanneer u wijzigingen aanbrengt.

React-componenten maken

Laten we een TaskList component maken om taken weer te geven die zijn opgehaald van 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>Geen taken beschikbaar. Maak je eerste taak! </p> ) : ( <ul> {tasks.map((taak) => ( <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 ? 'Ongedaan maken' : 'Voltooien'} </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('Fout bij toevoegen taak:', error); } finally { setIsSubmitting(false); }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Nieuwe taak toevoegen</h2> <div className="form-group"> <input type="text" placeholder="Task title" value={title} onChange={(e) => setTitle(e.doel.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Taakomschrijving (optioneel)" value={description} onChange={(e) => setDescription(e.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !.title.trim()}> {isSubmitting ? 'Toevoegen...' : 'Taak toevoegen'} </button> </form> ); }; export default TaskForm;

Maak voor wat basisstyling een src/App.css bestand en voeg 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 { achtergrondkleur: #f0f8f0; text-decoration: line-through; opacity: 0.7; } .task-form { achtergrond: #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 { achtergrond: #ffc107; color: black; } .btn-delete { background: #dc3545; kleur: wit; }

State en API-integratie beheren

React hooks zoals useState en useEffect maken het eenvoudig om de status te beheren en te communiceren met uw Django backend. Om API-oproepen te centraliseren, maakt u 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 tot slot 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'; functie 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); } }; // Aanvullende methoden voor het toevoegen, bijwerken en verwijderen van taken zouden hier moeten komen }.

Met deze opzet is uw React frontend klaar om taken interactief af te handelen terwijl het naadloos communiceert met uw Django backend.

Django en React verbinden

Nu je backend en frontend klaar zijn, is de volgende stap ervoor te zorgen dat de communicatie tussen beide soepel verloopt. Dit omvat het instellen van API-eindpunten, het beheren van verzoeken en het oplossen van eventuele haperingen in de integratie.

API URL's instellen in React

Uw React app moet weten waar de Django API endpoints te vinden zijn. Om dit te bereiken, werkt u het bestand src/services/api.js bij met omgevingsspecifieke configuraties:

import axios from 'axios'; // Bepaal API base URL op basis van omgeving 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 seconden 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;

Voor productie voegt u een .env bestand toe aan uw React project root met de volgende inhoud:

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

Deze setup zorgt ervoor dat uw React app naadloos kan communiceren met uw Django backend, of u zich nu in een lokale ontwikkelomgeving bevindt of in productie gaat. Met de API endpoints geconfigureerd, bent u klaar om data van de backend op te halen en te manipuleren.

Data ophalen van de backend

Zodra de API-configuratie is ingesteld, kunt u CRUD-bewerkingen uitvoeren om gegevens tussen React en Django te beheren. Werk src/App.js bij 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'; functie 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('Fout bij toevoegen taak:', err); throw err; // Re-throw om TaskForm de fout te laten afhandelen } }; const handleToggleComplete = async (taskId, completed) => { try { const taskToUpdate = tasks.find(task => task.id == taskId); const updatedTaskData = { ...taskToUpdate, voltooid }; const response = await taskAPI.updateTask(taskId, updatedTaskData); setTasks(prevTasks => prevTasks.map(task => task.id == taskId ? response.data : task ) ); } catch (err) { console.error('Fout bijwerken taak:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Weet u zeker dat u deze taak wilt verwijderen?') { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !.== taskId)); } catch (err) { console.error('Fout bij het verwijderen van taak:', err); }; if (loading) { return <div className="loading">Taken aan het laden...</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 handelt het aanmaken, bijwerken, verwijderen en foutbeheer van taken af. De UI wordt onmiddellijk bijgewerkt voor een soepele gebruikerservaring en fouten worden netjes afgehandeld door wijzigingen terug te draaien of de juiste 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 omdat browsers om veiligheidsredenen verzoeken tussen verschillende origins blokkeren. Tijdens de ontwikkeling draait React meestal op localhost:3000, terwijl Django op localhost:8000 draait, waardoor een cross-origin scenario ontstaat.

Om CORS-problemen aan te pakken, moet u ervoor zorgen dat u de CORS-headers in uw Django-instellingen hebt geconfigureerd zoals beschreven in de sectie "CORS-headers configureren". Nadat u wijzigingen hebt aangebracht, herstart u uw Django-server om ze toe te passen.

Hier zijn een paar veel voorkomende API-aanvraagfouten en hun oplossingen:

• HTTP 400 (Bad Request): Dit betekent meestal dat sommige vereiste gegevens ontbreken of misvormd zijn in de payload van het verzoek. In november 2023, bijvoorbeeld, kreeg FintanMi een 400 foutmelding bij het maken van een community in een Django REST Framework en React project omdat het owner veld ontbrak in het verzoek. Controleer altijd dubbel of uw frontend alle vereiste velden verzendt die door de Django-modellen worden verwacht.
• HTTP 405 (Methode niet toegestaan): Dit treedt op wanneer het API endpoint de gebruikte HTTP-methode niet ondersteunt. FintanMi meldde bijvoorbeeld een 405-fout bij een poging om een bericht te verwijderen, wat werd opgelost door de Django-view bij te werken van generics.RetrieveUpdateAPIView naar generics.RetrieveUpdateDestroyAPIView om ondersteuning voor DELETE-verzoeken op te nemen.

De app uitvoeren en testen

Nu je Django backend en React frontend verbonden zijn, is het tijd om beide ontwikkelservers te starten en de applicatie te testen. Dit houdt in dat u twee servers tegelijk moet laten draaien en ervoor moet zorgen dat alles soepel samenwerkt.

De ontwikkelservers starten

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

De Django Backend Server starten:

1. Open het eerste terminalvenster en navigeer naar de hoofdmap van uw Django-project.

2. Activeer uw Python virtuele omgeving:

   source venv/bin/activate
   

3. Start de Django ontwikkelingsserver:

   python manage.py runserver
   

   De server zal beschikbaar zijn op http://127.0.0.1:8000/.

Start de React Frontend Server:

1. Open een tweede terminalvenster en navigeer naar uw React-projectdirectory:

   cd frontend
   

2. Start de React ontwikkelingsserver:

   npm start
   

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

Zodra beide servers draaien, kunt u beginnen met het testen van de functionaliteit van uw applicatie.

De volledige functionaliteit van de app testen

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

Backend API verificatie:

• Test uw Django API endpoints direct door een bezoek te brengen aan:

  http://localhost:8000/api/tasks
  

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

• Ga naar de Django admin interface op:

  http://localhost:8000/admin
  

  Log in met uw superuser gegevens om taken aan te maken, te bewerken of te verwijderen. U kunt ook UPDATE- en DELETE-bewerkingen testen op:

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

Frontend-Backend integratietests:

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

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

Veelvoorkomende problemen oplossen

Als je problemen tegenkomt tijdens het testen, zijn hier enkele veelvoorkomende oplossingen die je kunt proberen.

API-verbindingsfouten:

• Zorg ervoor dat beide servers op hun respectieve poorten draaien: Django op http://localhost:8000 en React op http://localhost:3000.

• Gebruik de ontwikkelaarstools van uw browser (tabblad Netwerk) om HTTP-statuscodes zoals 404 of 500 te achterhalen.

• Controleer de proxy-instelling in het bestand package.json van uw React-project:

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

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

Problemen met het opstarten van de server:

• Als de Django server niet start, controleer dan op ontbrekende migraties:

  python manage.py makemigrations python manage.py migrate
  

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

  npm install
  

Problemen met gegevensstromen:

• Gebruik hulpmiddelen voor browserontwikkelaars om netwerkverzoeken en consolefouten te inspecteren.
• Voeg foutopsporingsstatements toe, zoals console.log() in React of printstatements in Django-weergaven, om de gegevensstroom te traceren.
• Controleer dubbel of de API URL's in uw React app exact overeenkomen met de Django URL patronen, inclusief de slashes (bijv. /api/tasks/).

Samenvatting en volgende stappen

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

Uw app naar een hoger niveau tillen

Er is genoeg ruimte om de functionaliteit van je app uit te breiden. U kunt bijvoorbeeld JWT-authenticatie toevoegen met Django REST Framework om gebruikersgegevens en API-toegang te beveiligen. Dit zou u in staat stellen om gebruikersspecifieke functies en gepersonaliseerde ervaringen aan te bieden.

Als uw app real-time updates nodig heeft, overweeg dan om Django Channels te gebruiken om WebSocket-ondersteuning mogelijk te maken. Dit is perfect voor functies als live dashboards, chatsystemen of meldingen, waardoor uw app een dynamischer en interactiever platform wordt.

Naarmate je app groeit, wordt geavanceerde datavisualisatie belangrijk. Door de rendermogelijkheden van React te combineren met efficiënte backend data fetching, kun je complexe datasets effectief verwerken en weergeven.

Klaarmaken voor productie

Bij het voorbereiden van je app voor productie, moet je je richten op implementatie, beveiliging en prestaties. Hoewel de huidige setup 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. Als je deze geavanceerde technieken onder de knie hebt, ben je goed uitgerust om projecten op bedrijfsniveau aan te pakken en te blijven groeien als webontwikkelaar.

FAQs

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 creëert een sterke mix voor het ontwikkelen van moderne webapplicaties. Django biedt een solide framework boordevol tools die de ontwikkeling aan de achterkant stroomlijnen, terwijl React uitblinkt in het bouwen van dynamische en interactieve gebruikersinterfaces.

Deze combinatie bevordert een duidelijke scheiding van verantwoordelijkheden, waardoor de codebase overzichtelijk blijft en na verloop van tijd gemakkelijker kan worden uitgebreid. De op componenten gebaseerde structuur van React moedigt het hergebruik van UI-elementen aan, en het REST Framework van Django vereenvoudigt het proces van het bouwen van API's en zorgt voor een soepele communicatie tussen de frontend en backend. Samen bieden ze een snelle, efficiënte en gebruikersgerichte benadering van applicatieontwikkeling.

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

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

Tijdens de ontwikkeling kun je de dingen vereenvoudigen door CORS_ORIGIN_ALLOW_ALL = True in je settings.py in te stellen. Dit staat verzoeken van elke oorsprong toe. In een productieomgeving is het echter veel veiliger om specifieke vertrouwde domeinen te definiëren met de instelling CORS_ALLOWED_ORIGINS. Deze aanpak zorgt voor een betere beveiliging.

Met deze configuratie kan uw React-app soepel communiceren met uw Django API's en tegelijkertijd voldoen aan de CORS-vereisten.

Hoe kan ik mijn Django en React app voorbereiden op productie?

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

Selecteer vervolgens een betrouwbaar hostingplatform voor uw Django backend en statische bestanden. Zorg ervoor dat uw infrastructuur gebouwd is om verkeer en eisen op productieniveau aan te kunnen. Voor de React frontend gebruikt u de juiste build tools om een geoptimaliseerde productie build 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 bedienen. De juiste serverconfiguratie zorgt ervoor dat je app efficiënt draait en gebruikers een naadloze ervaring biedt.

Voordat je live gaat, test je je app grondig in de productieomgeving. Deze stap helpt bij het identificeren en oplossen van eventuele problemen, zodat je app betrouwbaar presteert zodra hij is gelanceerd.