Hur man bygger en enkel app med Django och React

Hur man bygger en enkel app med Django och React

Vill du skapa en webbapp med en robust backend och ett dynamiskt frontend? Att kombinera Django, ett Python-ramverk, med React, ett JavaScript-bibliotek, är ett utmärkt sätt att uppnå detta. Django hanterar backend-uppgifter som databashantering och skapande av API:er, medan React skapar ett responsivt och interaktivt användargränssnitt.

Viktiga steg:

1. Konfigurera din miljö:
   • Installera Python 3.x för Django och Node.js för React.
   • Använd virtuella miljöer för att hantera Python-beroenden.
   • Kontrollera installationerna med python --version, node --version, och npm --version.
2. Organisera ditt projekt:
   • Skapa separata mappar för Django-backend och React-frontend.
   • Använd django-admin startproject för konfiguration av backend och npx create-react-app för initialisering av frontend.
3. Bygg backend:
   • Skapa Django-appar, definiera modeller och generera migreringar.
   • Använd Django REST Framework för att bygga API-ändpunkter.
   • Konfigurera django-cors-headers för att möjliggöra kommunikation mellan frontend och backend.
4. Utveckla frontend:
   • Använd React-komponenter för att hantera uppgifter och användarinteraktioner.
   • Installera Axios för API-förfrågningar och integrera det med Django-ändpunkterna.
   • Formatera appen med CSS för ett snyggt användargränssnitt.
5. Anslut och testa:
   • Kör Django på localhost:8000 och React på localhost:3000.
   • Testa API-ändpunkter med verktyg som Postman eller direkt i webbläsaren.
   • Se till att CORS-inställningarna är korrekta för smidig kommunikation.

Denna konfiguration gör det möjligt för dig att effektivt bygga en fullstack-applikation med tydlig åtskillnad mellan backend och frontend. Följ dessa steg för att skapa en skalbar, interaktiv webbapp.

Django- och React-projekt för nybörjare – Bygg en FullStack-anteckningsapp

Krav för installation och konfiguration

Innan du börjar bygga din Django- och React-app är det viktigt att konfigurera din utvecklingsmiljö med nödvändiga verktyg och beroenden. Denna grund kommer att hjälpa dig att skapa, integrera och testa dina Django- och React-komponenter smidigt under arbetets gång.

Systemkrav och verktyg

För att komma igång behöver din utvecklingsdator Python 3.x för Django och Node.js för React. Mer specifikt kräver Django 5.0 Python 3.x, medan React fungerar med Node.js version 12 eller högre.

Installera Python: Du kan ladda ner Python direkt från den officiella webbplatsen eller använda systemets pakethanterare. För macOS-användare gör Homebrew det enkelt med brew install python. Windows-användare bör hämta installationsprogrammet från python.org, medan Linux-användare kan installera det med kommandon som apt install python3 på Ubuntu eller liknande kommandon för andra distributioner.

Konfigurera Node.js och npm: Node.js levereras tillsammans med npm (Node Package Manager). Du behöver npm version 6 eller senare, där version 7.5.4 är ett pålitligt val. Ladda ner Node.js från nodejs.org, vilket automatiskt inkluderar npm.

Virtuella Python-miljöer: Att använda virtuella miljöer är avgörande för att hantera projektspecifika beroenden utan konflikter. Du kan använda den inbyggda venv modulen eller verktyg som pipenv eller virtualenvwrapper för fler funktioner. Om du använder Windows erbjuder virtualenvwrapper-win paketet liknande funktionalitet.

För att kontrollera att installationerna har fungerat, kör följande kommandon i terminalen:

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

Skapa projektstrukturen

En välorganiserad projektstruktur är avgörande för att hålla din backend- och frontend-kod åtskilda och hanterbara. Börja med att skapa en huvudkatalog för ditt projekt:

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

Inuti denna katalog skapar du två mappar: en för din Django-backend och en annan för din React-frontend. Denna uppdelning gör att du kan underhålla och driftsätta varje del separat.

Konfigurera din virtuella Python-miljö i projektkatalogen:

python -m venv venv

Aktivera den virtuella miljön:

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

Detta steg säkerställer att alla Python-beroenden för ditt projekt är isolerade.

Installera nödvändiga paket

När din miljö är klar är det dags att installera de nödvändiga paketen för både Django och React.

Django-backendpaket: Medan din virtuella miljö är aktiv installerar du Django och dess stödbibliotek med pip:

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

• Django hanterar logik på serversidan, databashantering och URL-routing.
• Django REST Framework förenklar processen att bygga RESTful API:er, vilket gör det enklare att skapa slutpunkter för din React-frontend.
• Django-cors-headers aktiverar Cross-Origin Resource Sharing (CORS), vilket är nödvändigt för kommunikationen mellan ditt React-frontend (som körs på port 3000) och Django-backend (som körs på port 8000).

Konfigurera React-frontend: För att konfigurera din React-miljö använder du verktyget create-react-app verktyget. Detta kommando initialiserar ett React-projekt och installerar alla nödvändiga beroenden:

npx create-react-app frontend

Detta skapar ett nytt React-projekt i en frontend katalog, komplett med nödvändiga paket, utvecklingsverktyg och byggskript.

Ytterligare frontend-paket: När du har konfigurerat ditt React-projekt navigerar du till frontend katalogen och installera Axios, ett bibliotek för att skicka HTTP-förfrågningar till ditt Django-API:

cd frontend
npm install axios

Nu är din utvecklingsmiljö fullt utrustad med Python 3.x, Django, Node.js, React och alla nödvändiga verktyg. Den virtuella Python-miljön säkerställer att dina backend-beroenden är isolerade, medan npm hanterar dina JavaScript-paket separat. Nu är du redo att börja bygga din fullstack-applikation!

Bygga backend med Django

Konfigurera en Django-backend med databasmodeller, API-ändpunkter och integration för en React-frontend.

Skapa ett Django-projekt och en app

Börja med att skapa ett Django-projekt, som innehåller inställningar, databaskonfigurationer och appspecifika alternativ. Inom detta projekt kommer du att bygga en Django-app – ett Python-paket utformat för specifika uppgifter som att hantera användardata eller innehåll.

Navigera till projektets rotkatalog (där din virtuella miljö är konfigurerad) och skapa Django-projektet:

django-admin startproject backend .

Detta kommando genererar projektfiler direkt i den aktuella katalogen, vilket gör att du slipper en extra mapp. Du kommer att märka nya filer som manage.py (för att köra Django-kommandon) och en backend katalog som innehåller filer som settings.py, urls.py, asgi.py, och wsgi.py.

Skapa sedan en app för att hantera specifika funktioner. Till exempel ett uppgiftshanteringssystem:

python manage.py startapp tasks

Detta skapar en tasks katalog med nödvändiga filer som models.py, views.py, admin.py, och en migrations mapp. Se till att undvika namnkonflikter med inbyggda namn som ”django” eller ”test”.

Registrera appen i dina projektinställningar genom att lägga till den i INSTALLED_APPS listan i 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
]

Konfigurera modeller och serialiserare

Definiera din datastruktur med Django-modeller. Till exempel kan en enkel Task modell för appen för uppgiftshantering kan läggas till i 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

Denna modell innehåller fält som CharField för kort text, TextField för längre innehåll, BooleanField för sanna/falska värden och DateTimeField för tidsstämplar. Klassen Meta klassen anger alternativ som standardordning.

Tillämpa modellen på din databas genom att köra migreringar:

python manage.py makemigrations tasks
python manage.py migrate

För att konvertera modelldata till JSON använder du Django REST Frameworks serialiserare. I tasks/serializers.py, definiera en serialiserare för Task modellen:

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

Django ModelSerializer genererar automatiskt fält och metoder baserat på modellen. Genom att uttryckligen lista fälten säkerställer du att du inte oavsiktligt exponerar känslig data.

Skapa API-ändpunkter

Django REST Framework förenklar skapandet av API:er. För vanliga CRUD-operationer använder du ViewSets med routrar för en ren, REST-kompatibel struktur.

I tasks/views.py, skapa API-vyer:

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

Django ModelViewSet hanterar automatiskt listning, skapande, hämtning, uppdatering och radering av uppgifter.

Konfigurera URL-routing i 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)),
]

Inkludera dessa URL:er i huvudfilen backend/urls.py filen:

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

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

Konfigurera CORS-rubriker

För att din React-frontend (som körs på port 3000) ska kunna kommunicera med Django-backenden (på port 8000) måste du konfigurera Cross-Origin Resource Sharing (CORS). Utan detta blockerar webbläsare förfrågningar mellan olika ursprung av säkerhetsskäl.

Uppdatera backend/settings.py för att inkludera CORS-konfigurationen:

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 snabbtestning kan du använda CORS_ALLOW_ALL_ORIGINS = True, men det är säkrare att ange tillåtna ursprung.

Testa API-ändpunkter

Innan du integrerar React-frontenden bör du testa API-ändpunkterna för att säkerställa att de fungerar som förväntat. Starta Django-utvecklingsservern:

python manage.py runserver

Gå till API:et på http://127.0.0.1:8000/api/tasks/. Använd det webbläsarbaserade API:et för att testa operationer som GET- och POST-förfrågningar.

Alternativt kan du testa med cURL eller 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"}'

För automatiserad testning lägger du till testfall i 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 när backend-delen är på plats är du redo att ansluta den till React-frontenden.

Bygga frontend med React

För att skapa ett engagerande gränssnitt för din Django-backend använder du React för att hantera användarinteraktioner – allt från att visa uppgifter till att lägga till nya.

Konfigurera ett React-projekt

Börja med att konfigurera ditt React-frontend med hjälp av Create React App. Gå till projektets rotkatalog (där ditt Django-backend finns) och kör:

npx create-react-app frontend
cd frontend

Detta kommando skapar en React-app med nödvändiga filer som package.json, src/App.js, och public/index.html. Det inkluderar även verktyg som webpack för paketering, Babel för JavaScript-kompilering och en utvecklingsserver för testning.

Installera sedan Axios för att hantera HTTP-förfrågningar till ditt Django-API:

npm install axios

Axios förenklar API-anrop genom att hantera JSON-tolkning och erbjuda bättre felhantering än den inbyggda fetch() . Det stöder även funktioner som avlyssnare för förfrågningar och svar.

Din mappstruktur bör nu se ut så här:

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

För att kontrollera att allt fungerar startar du React-utvecklingsservern:

npm start

Detta startar appen på http://localhost:3000, och visar Reacts standardvälkomstsida. Låt servern vara igång under utvecklingen – den laddas om automatiskt när du gör ändringar.

Skapa React-komponenter

Låt oss skapa en TaskList komponent för att visa uppgifter som hämtas från ditt Django-API. Lägg till följande i 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;

Skapa sedan en TaskForm komponent för att lägga till nya uppgifter. Lägg till detta i 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 att lägga till lite grundläggande formatering, skapa en src/App.css fil och lägg till:

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

Hantering av tillstånd och API-integration

React-hooks som useState och useEffect gör det enkelt att hantera tillstånd och interagera med din Django-backend. För att centralisera API-anrop skapar du en servicefil 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;

Slutligen integrerar du allt i 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
}

Med den här konfigurationen är ditt React-frontend redo att hantera uppgifter interaktivt samtidigt som det kommunicerar sömlöst med din Django-backend.

Koppla ihop Django och React

Nu när din backend och frontend är igång är nästa steg att säkerställa smidig kommunikation mellan dem. Detta innebär att konfigurera API-ändpunkter, hantera förfrågningar och åtgärda eventuella integrationsproblem.

Konfigurera API-URL:er i React

Din React-app måste veta var Django-API-ändpunkterna finns. För att åstadkomma detta uppdaterar du filen src/services/api.js filen med miljöspecifika inställningar:

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 produktion lägger du till en .env fil till rotkatalogen för ditt React-projekt med följande innehåll:

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

Denna konfiguration säkerställer att din React-app kan interagera sömlöst med din Django-backend, oavsett om du befinner dig i en lokal utvecklingsmiljö eller distribuerar till produktion. När API-ändpunkterna är konfigurerade är du redo att hämta och bearbeta data från backenden.

Hämta data från backend

När API-konfigurationen är klar kan du utföra CRUD-operationer för att hantera data mellan React och Django. Uppdatera src/App.js för att hantera dessa operationer:

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;

Denna kod hanterar skapande, uppdatering, radering och felhantering av uppgifter. Användargränssnittet uppdateras omedelbart för en smidig användarupplevelse, och fel hanteras smidigt genom att återställa ändringar eller visa lämpliga meddelanden.

Testa och felsöka anslutningen

Ett av de vanligaste hindren när man kopplar samman Django och React är att hantera CORS-fel (Cross-Origin Resource Sharing). Dessa uppstår eftersom webbläsare av säkerhetsskäl blockerar förfrågningar mellan olika ursprung. Under utvecklingen körs React vanligtvis på localhost:3000, medan Django körs på localhost:8000, vilket skapar en situation med olika ursprung.

För att lösa CORS-problem ska du se till att du har konfigurerat CORS-rubrikerna i dina Django-inställningar enligt beskrivningen i avsnittet ”Konfigurera CORS-rubriker”. Starta om din Django-server efter att du har gjort ändringarna för att tillämpa dem.

Här är några vanliga API-förfrågningsfel och deras lösningar:

• HTTP 400 (Bad Request): Detta innebär vanligtvis att vissa obligatoriska uppgifter saknas eller är felaktigt formaterade i begäran. I november 2023 stötte FintanMi till exempel på ett 400-fel när man skapade en community i ett projekt med Django REST Framework och React, eftersom owner fältet saknades i förfrågan. Kontrollera alltid noga att din frontend skickar alla obligatoriska fält som Django-modellerna förväntar sig.
• HTTP 405 (Method Not Allowed): Detta inträffar när API-ändpunkten inte stöder den HTTP-metod som används. Till exempel rapporterade FintanMi ett 405-fel vid försök att ta bort ett inlägg, vilket löstes genom att uppdatera Django-vyn från generics.RetrieveUpdateAPIView till generics.RetrieveUpdateDestroyAPIView för att inkludera stöd för DELETE requests.

Körning och testning av appen

När din Django-backend och React-frontend är anslutna är det dags att starta båda utvecklingsservrarna och testa applikationen. Detta innebär att köra två servrar samtidigt och säkerställa att allt fungerar smidigt tillsammans.

Starta utvecklingsservrarna

För att köra din Django-React-applikation behöver du två terminalfönster – ett för varje server. Denna konfiguration gör det möjligt för backend och frontend att fungera oberoende av varandra samtidigt som de kommunicerar via API-anrop.

Starta Django-backend-servern:

1. Öppna det första terminalfönstret och navigera till rotkatalogen för ditt Django-projekt.

2. Aktivera din virtuella Python-miljö:

   source venv/bin/activate
   

3. Starta Django-utvecklingsservern:

   python manage.py runserver
   

   Servern kommer att vara tillgänglig på http://127.0.0.1:8000/.

Starta React-frontend-servern:

1. Öppna ett andra terminalfönster och navigera till ditt React-projekt:

   cd frontend
   

2. Starta React-utvecklingsservern:

   npm start
   

   Detta öppnar automatiskt ett webbläsarfönster på http://localhost:3000/.

När båda servrarna är igång kan du börja testa applikationens funktionalitet.

Testa appens fullständiga funktionalitet

Nu när servrarna är igång och CORS samt API-ändpunkterna är korrekt konfigurerade är det dags att validera dataflödet mellan frontend och backend.

Verifiering av backend-API:

• Testa dina Django API-ändpunkter direkt genom att besöka:

  http://localhost:8000/api/tasks
  

  Då bör Django REST Frameworks API-gränssnitt visas, där du kan utföra CREATE- och READ-operationer.

• Gå till Djangos administratörsgränssnitt på:

  http://localhost:8000/admin
  

  Logga in med dina superanvändaruppgifter för att skapa, redigera eller ta bort uppgifter. Du kan också testa UPDATE- och DELETE-operationer genom att besöka:

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

Integrationstestning mellan frontend och backend:

• Öppna din React-app på http://localhost:3000 och kontrollera att den laddas korrekt och visar uppgifter från Django-backenden.
• Testa varje CRUD-operation via React-gränssnittet:
  • Lägg till en ny uppgift och kontrollera att den visas både i React-gränssnittet och i backend-systemet.
  • Redigera en befintlig uppgift och se till att ändringarna sparas.
  • Ta bort en uppgift och kontrollera att den tas bort både från frontend och databasen.

Om din app innehåller filter eller andra funktioner, testa dem noggrant för att bekräfta att uppgifterna visas som förväntat.

Åtgärda vanliga problem

Om du stöter på några problem under testningen finns här några vanliga lösningar att prova.

Fel i API-anslutningen:

• Se till att båda servrarna körs på sina respektive portar: Django på http://localhost:8000 och React på http://localhost:3000.
• Använd webbläsarens utvecklingsverktyg (fliken Nätverk) för att identifiera HTTP-statuskoder som 404 eller 500.

• Kontrollera proxy inställningen i ditt React-projekts package.json fil:

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

  Om du gör ändringar, starta om React-servern.

Problem vid serverstart:

• Om Django-servern inte startar, kontrollera om det saknas migreringar:

  python manage.py makemigrations
  python manage.py migrate
  

• Vid problem med React-servern, försök att installera om beroenden:

  npm install
  

Problem med dataflödet:

• Använd webbläsarens utvecklingsverktyg för att granska nätverksförfrågningar och konsolfel.
• Lägg till felsökningsuttryck, till exempel console.log() i React eller print uttryck i Django-vyer, för att spåra dataflödet.
• Kontrollera noga att API-URL:erna i din React-app stämmer exakt överens med Django-URL-mönstren, inklusive avslutande snedstreck (t.ex. /api/tasks/).

Sammanfattning och nästa steg

Du har skapat en webbapp som kombinerar Django och React, vilket ger dig en gedigen introduktion till fullstack-utveckling. Detta projekt belyser viktiga begrepp som att separera backend från frontend, utföra CRUD-operationer och hantera cross-origin-förfrågningar med hjälp av CORS-inställningar. Under arbetets gång har du använt Django REST Framework för att bygga API:er och använt React-hooks för tillståndshantering – färdigheter som möjliggör en smidig integration mellan dessa två kraftfulla verktyg.

Ta din app till nästa nivå

Det finns gott om utrymme att utöka appens funktionalitet. Du kan till exempel lägga till JWT-autentisering med hjälp av Django REST Framework för att säkra användardata och API-åtkomst. Detta skulle göra det möjligt för dig att erbjuda användarspecifika funktioner och personliga upplevelser.

Om din app behöver uppdateringar i realtid bör du överväga att använda Django Channels för att aktivera stöd för WebSocket. Detta är perfekt för funktioner som live-dashboards, chatt-system eller aviseringar, vilket förvandlar din app till en mer dynamisk och interaktiv plattform.

När din app växer blir avancerad datavisualisering allt viktigare. Genom att kombinera Reacts renderingsfunktioner med effektiv datahämtning från backend kan du hantera och visa komplexa datamängder på ett effektivt sätt.

Förberedelser inför driftsättning

När du förbereder din app för produktion ska du fokusera på driftsättning, säkerhet och prestanda. Även om den nuvarande konfigurationen fungerar utmärkt för lokal utveckling kräver produktionsmiljöer ytterligare åtgärder. Dessa inkluderar att ställa in miljövariabler, optimera din databas och implementera robusta mekanismer för felhantering.

Dessa förbättringar bygger vidare på de färdigheter du redan har utvecklat – såsom API-design, komponentbaserad arkitektur och fullstack-integration. Genom att bemästra dessa avancerade tekniker kommer du att vara väl rustad för att ta dig an projekt på företagsnivå och fortsätta utvecklas som webbutvecklare.

Vanliga frågor

Vilka är fördelarna med att använda Django för backend och React för frontend vid utveckling av en webbapp?

Att använda Django för backend och React för frontend skapar en stark kombination för utveckling av moderna webbapplikationer. Django erbjuder ett stabilt ramverk fullspäckat med verktyg som effektiviserar backend-utvecklingen, medan React utmärker sig när det gäller att bygga dynamiska och interaktiva användargränssnitt.

Denna kombination främjar en tydlig ansvarsfördelning, vilket bidrar till att hålla kodbasen organiserad och lättare att utöka över tid. Reacts komponentbaserade struktur uppmuntrar återanvändning av UI-element, och Djangos REST Framework förenklar processen att bygga API:er, vilket säkerställer smidig kommunikation mellan frontend och backend. Tillsammans erbjuder de ett snabbt, effektivt och användarcentrerat tillvägagångssätt för applikationsutveckling.

Hur löser jag CORS-problem när jag ansluter ett React-frontend till ett Django-backend?

För att hantera CORS-problem mellan ett React-frontend och ett Django-backend är django-cors-headers paketet en praktisk lösning. Installera det först med pip. Lägg sedan till följande i din settings.py filen 'corsheaders' till INSTALLED_APPS listan. Därefter lägger du till 'corsheaders.middleware.CorsMiddleware' helt högst upp i MIDDLEWARE listan för att säkerställa rätt körningsordning för middleware.

Under utvecklingen kan du förenkla saker och ting genom att ange CORS_ORIGIN_ALLOW_ALL = True i din settings.py. Detta tillåter förfrågningar från vilken källa som helst. I en produktionsmiljö är det dock mycket säkrare att definiera specifika betrodda domäner med hjälp av CORS_ALLOWED_ORIGINS inställningen. Denna metod bidrar till att upprätthålla en högre säkerhetsnivå.

Med denna konfiguration kan din React-app interagera smidigt med dina Django-API:er samtidigt som den uppfyller CORS-kraven.

Hur förbereder jag min Django- och React-app för driftsättning?

För att förbereda din Django- och React-app för produktion bör du börja med att justera dina Django-inställningar för en säker konfiguration. Detta innefattar att ställa in DEBUG till False och att ange ALLOWED_HOSTS för att styra vilka domäner som kan komma åt din app. Dessa ändringar är avgörande för att skydda din applikation i en live-miljö.

Välj sedan en pålitlig värdplattform för din Django-backend och dina statiska filer. Se till att din infrastruktur är utformad för att hantera trafik och krav på produktionsnivå. För React-frontenden ska du använda lämpliga byggverktyg för att generera en optimerad produktionsversion.

När din React-app är klar, konfigurera en webbserver som Nginx för att hantera både React-frontenden och Django-backenden. En korrekt serverkonfiguration säkerställer att din app körs effektivt och ger användarna en smidig upplevelse.

Innan du går live ska du testa din app noggrant i produktionsmiljön. Detta steg hjälper dig att identifiera och lösa eventuella problem, vilket säkerställer att din app fungerar tillförlitligt när den väl har lanserats.