Hogyan készítsünk egy egyszerű alkalmazást Django és React segítségével

Hogyan készítsünk egyszerű alkalmazást Djangóval és Reacttal

Erős háttérrendszerrel és dinamikus felhasználói felülettel rendelkező webalkalmazást szeretne készíteni? Ehhez kiváló megoldás a Django (egy Python-keretrendszer) és a React (egy JavaScript-könyvtár) kombinálása. A Django kezeli a háttérfeladatokat, például az adatbázis-kezelést és az API-k létrehozását, míg a React egy reszponzív, interaktív felhasználói felületet hoz létre.

Főbb lépések:

1. A környezet beállítása:
   • Telepítsd a Python 3.x-et a Djangohoz és a Node.js-t a Reacthez.
   • Használjon virtuális környezeteket a Python-függőségek kezeléséhez.
   • Ellenőrizze a telepítéseket a python --version, node --version, és npm --version.
2. Rendezze el a projektjét:
   • Hozzon létre külön mappákat a Django háttérrendszerhez és a React felhasználói felülethez.
   • Használja a django-admin startproject a backend beállításához, és npx create-react-app a frontend inicializálásához.
3. A backend összeállítása:
   • Hozzon létre Django-alkalmazásokat, határozza meg a modelleket, és generálja a migrációkat.
   • Használja a Django REST Framework-et az API végpontok létrehozásához.
   • Konfigurálja django-cors-headers a frontend és a backend közötti kommunikáció engedélyezéséhez.
4. A frontend fejlesztése:
   • React-komponensek használata a feladatok és a felhasználói interakciók kezeléséhez.
   • Telepítse az Axios-t az API-lekérdezésekhez, és integrálja azt a Django végpontokkal.
   • Alakítsa ki az alkalmazás stílusát CSS-sel a tiszta felhasználói felület érdekében.
5. Csatlakoztatás és tesztelés:
   • Futtassa a Djangót localhost:8000 , a React-et pedig localhost:3000.
   • Tesztelje az API végpontokat olyan eszközökkel, mint a Postman, vagy közvetlenül a böngészőben.
   • Gondoskodjon a megfelelő CORS-beállításokról a zökkenőmentes kommunikáció érdekében.

Ez a beállítás lehetővé teszi egy teljes körű alkalmazás hatékony fejlesztését, a backend és a frontend egyértelmű elválasztásával. Kövesse ezeket a lépéseket egy skálázható, interaktív webalkalmazás létrehozásához.

Django és React projekt kezdőknek – Készítsünk egy FullStack jegyzetalkalmazást

Beállítási követelmények és telepítés

Mielőtt elkezdené a Django és React alkalmazás fejlesztését, elengedhetetlen, hogy a fejlesztői környezetet a szükséges eszközökkel és függőségekkel konfigurálja. Ez az alap segít majd a Django és React komponensek zökkenőmentes létrehozásában, integrálásában és tesztelésében a munka során.

Rendszerkövetelmények és eszközök

Az induláshoz a fejlesztőgépén szükség lesz a Djangohoz Python 3.x-re, a Reacthez pedig Node.js-re. Pontosabban: a Django 5.0 Python 3.x-et igényel, míg a React a Node.js 12-es vagy újabb verziójával működik.

Python telepítése: A Python-t közvetlenül a hivatalos weboldalról töltheted le, vagy használhatod a rendszer csomagkezelőjét. MacOS-felhasználók számára a Homebrew egyszerűsíti a dolgot brew install python. A Windows-felhasználóknak a python.org oldalról kell letölteniük a telepítőt, míg a Linux-felhasználók olyan parancsokkal telepíthetik, mint például apt install python3 Ubuntu esetén, vagy más disztribúciók esetében hasonló parancsokkal.

A Node.js és az npm beállítása: A Node.js az npm-mel (Node Package Manager) együtt érkezik. Az npm 6-os vagy újabb verziójára lesz szükséged, a 7.5.4-es verzió megbízható választás. Töltsd le a Node.js-t a nodejs.org weboldalról, amely automatikusan tartalmazza az npm-et is.

Python virtuális környezetek: A virtuális környezetek használata kulcsfontosságú a projektspecifikus függőségek konfliktusmentes kezeléséhez. Használhatja a beépített venv modult vagy olyan eszközöket, mint a pipenv vagy virtualenvwrapper használhatja további funkciókhoz. Ha Windows-t használ, a virtualenvwrapper-win csomag hasonló funkciókat nyújt.

A telepítések ellenőrzéséhez futtassa a következő parancsokat a terminálban:

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

A projekt struktúrájának létrehozása

A jól szervezett projektstruktúra elengedhetetlen ahhoz, hogy a backend és a frontend kódjait elkülönítve és kezelhetően tartsd. Kezdd azzal, hogy létrehozol egy főkönyvtárat a projektedhez:

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

Ebben a könyvtárban hozzon létre két mappát: egyet a Django backendjéhez, a másikat pedig a React frontendjéhez. Ez az elválasztás lehetővé teszi, hogy mindkét részt függetlenül karbantartsa és telepítse.

Állítsa be a Python virtuális környezetet a projektkönyvtárban:

python -m venv venv

Aktiválja a virtuális környezetet:

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

Ez a lépés biztosítja, hogy a projekt összes Python-függősége el legyen szigetelve.

A szükséges csomagok telepítése

Miután a környezet készen áll, itt az ideje telepíteni a Django és a React számára szükséges csomagokat.

Django háttércsomagok: Amíg a virtuális környezet aktív, telepítsd a Djangót és a hozzá tartozó könyvtárakat a pip segítségével:

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

• A Django kezeli a szerveroldali logikát, az adatbázis-kezelést és az URL-útválasztást.
• A Django REST Framework leegyszerűsíti a RESTful API-k építésének folyamatát, megkönnyítve a React frontend végpontjainak létrehozását.
• A Django-cors-headers engedélyezi a Cross-Origin Resource Sharing (CORS) használatát, ami elengedhetetlen a React frontend (a 3000-es porton fut) és a Django backend (a 8000-es porton fut) közötti kommunikációhoz.

React frontend beállítása: A React környezet beállításához használja a create-react-app eszközt. Ez a parancs inicializál egy React-projektet, és telepíti az összes szükséges függőséget:

npx create-react-app frontend

Ezzel egy új React-projekt jön létre a frontend könyvtárba, a szükséges csomagokkal, fejlesztői eszközökkel és build szkriptekkel együtt.

További frontend-csomag: A React-projekt beállítása után lépjen a frontend könyvtárba, és telepítse az Axios-t, egy olyan könyvtárat, amellyel HTTP-kérelmeket küldhet a Django API-jához:

cd frontend
npm install axios

Ekkor a fejlesztői környezeted már teljes mértékben felszerelt Python 3.x-szel, Djangóval, Node.js-szel, React-tel és az összes szükséges eszközzel. A Python virtuális környezet biztosítja a háttérfüggőségek elszigeteltségét, míg az npm külön kezeli a JavaScript-csomagokat. Most már készen állsz a teljes körű alkalmazásod fejlesztésének megkezdésére!

A háttérrendszer felépítése Djangóval

Állítson be egy Django-háttérrendszert adatbázis-modellekkel, API-végpontokkal és a React-felhasználói felülethez való integrációval.

Django-projekt és -alkalmazás létrehozása

Kezdje azzal, hogy létrehoz egy Django-projektet, amely tartalmazza a beállításokat, az adatbázis-konfigurációkat és az alkalmazás-specifikus opciókat. Ezen a projekten belül fogja elkészíteni a Django-alkalmazást – egy Python-csomagot, amelyet konkrét feladatokra terveztek, például a felhasználói adatok vagy tartalmak kezelésére.

Lépj a projekt gyökérkönyvtárába (ahol a virtuális környezeted van beállítva), és hozd létre a Django-projektet:

django-admin startproject backend .

Ez a parancs közvetlenül az aktuális könyvtárban hozza létre a projektfájlokat, így elkerülhető egy extra mappa létrehozása. Új fájlokat fogsz észrevenni, mint például a manage.py (a Django parancsok futtatásához) és egy backend könyvtárat, amely olyan fájlokat tartalmaz, mint settings.py, urls.py, asgi.py, valamint wsgi.py.

Ezután hozzon létre egy alkalmazást egy adott funkció kezelésére. Például egy feladatkezelő rendszert:

python manage.py startapp tasks

Ez létrehoz egy tasks könyvtárat hoz létre olyan alapvető fájlokkal, mint models.py, views.py, admin.py, valamint egy migrations mappát. Ügyeljünk arra, hogy ne legyen névütközés a beépített nevekkel, mint például a „django” vagy a „test”.

Regisztrálja az alkalmazást a projektbeállításokban úgy, hogy felveszi a INSTALLED_APPS listához a 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
]

Modellek és sorosítók beállítása

Határozza meg az adatstruktúrát Django-modellekkel. Például egy egyszerű Task modell a feladatkezelő alkalmazáshoz a 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

Ez a modell olyan mezőket tartalmaz, mint például CharField a rövid szövegekhez, TextField hosszabb tartalomhoz, BooleanField az igaz/hamis értékekhez, valamint DateTimeField időbélyegekhez. A Meta osztály olyan beállításokat határoz meg, mint például az alapértelmezett rendezés.

A migrációk futtatásával alkalmazza a modellt az adatbázisára:

python manage.py makemigrations tasks
python manage.py migrate

A modelladatok JSON-ba történő konvertálásához használja a Django REST Framework sorosítóit. A tasks/serializers.py, határozzon meg egy sorosítót a Task modellhez:

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

A ModelSerializer automatikusan generál mezőket és metódusokat a modell alapján. A mezők kifejezett felsorolásával biztosíthatja, hogy véletlenül ne tegye közzé érzékeny adatokat.

API-végpontok létrehozása

A Django REST Framework leegyszerűsíti az API-k létrehozását. A szokásos CRUD-műveletekhez használjon ViewSets a routerekkel egy tiszta, RESTful szerkezet érdekében.

Az tasks/views.py, hozzon létre API-nézeteket:

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

A ModelViewSet automatikusan kezeli a feladatok listázását, létrehozását, lekérését, frissítését és törlését.

Állítsa be az URL-útválasztást a 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)),
]

Ezeket az URL-eket vegye fel a fő backend/urls.py fájlba:

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

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

A CORS-fejlécek konfigurálása

Ahhoz, hogy a React frontend (a 3000-es porton futó) kommunikálhasson a Django backenddel (a 8000-es porton), konfigurálja a Cross-Origin Resource Sharing (CORS) beállításokat. Enélkül a böngészők biztonsági okokból blokkolják a különböző eredetű kéréseket.

Frissítse a backend/settings.py fájlt a CORS-beállítások hozzáadásához:

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

Gyors teszteléshez használhatja a CORS_ALLOW_ALL_ORIGINS = True, de a megengedett eredetek megadása biztonságosabb.

Az API-végpontok tesztelése

A React frontend integrálása előtt tesztelje az API végpontokat, hogy megbizonyosodjon arról, hogy a várakozásoknak megfelelően működnek. Indítsa el a Django fejlesztői szervert:

python manage.py runserver

Érje el az API-t a http://127.0.0.1:8000/api/tasks/. Használja a böngészhető API-t olyan műveletek teszteléséhez, mint a GET és a POST kérések.

Alternatív megoldásként tesztelje a cURL vagy a Postman segítségével:

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

Az automatizált teszteléshez adjon hozzá teszteseteket a 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

Miután a háttérrendszer készen áll, készen állsz arra, hogy összekapcsold a React frontenddel.

A frontend felépítése React segítségével

Ahhoz, hogy vonzó felületet hozzon létre a Django-alapú backendjéhez, a React segítségével fogja kezelni a felhasználói interakciókat – a feladatok megtekintésétől az új feladatok hozzáadásáig.

React-projekt beállítása

Kezdje a React frontend beállításával a Create React App segítségével. Keresse meg a projekt gyökérkönyvtárát (ahol a Django backend található), és futtassa a következő parancsot:

npx create-react-app frontend
cd frontend

Ez a parancs létrehoz egy React-alkalmazást az alapvető fájlokkal, mint például package.json, src/App.js, és public/index.html. Ezenkívül olyan eszközöket is tartalmaz, mint a webpack a csomagoláshoz, a Babel a JavaScript-fordításhoz, valamint egy fejlesztői szervert a teszteléshez.

Ezután telepítsd az Axios-t a Django API-hoz érkező HTTP-kérelmek kezeléséhez:

npm install axios

Az Axios egyszerűbbé teszi az API-hívásokat azáltal, hogy kezeli a JSON-elemzést, és jobb hiba kezelést kínál, mint a beépített fetch() függvénynél. Ezenkívül támogat olyan funkciókat is, mint a kérés- és válasz-interceptorok.

A mappaszerkezetnek most így kell kinéznie:

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

Annak ellenőrzéséhez, hogy minden működik-e, indítsa el a React fejlesztői szervert:

npm start

Ez elindítja az alkalmazást a http://localhost:3000címen, és megjeleníti az alapértelmezett React üdvözlőoldalt. A fejlesztés során hagyja futni ezt a szervert – a változtatások után automatikusan újratölti az oldalt.

React-komponensek létrehozása

Hozzunk létre egy TaskList komponenst, amely a Django API-ból lekért feladatokat jeleníti meg. Adja hozzá a következőket a 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;

Ezután hozzon létre egy TaskForm komponenst új feladatok hozzáadásához. Ezt illessze be a 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;

Az alapvető stílusbeállításokhoz hozzon létre egy src/App.css fájlt, és írd bele a következőket:

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

Állapotkezelés és API-integráció

React hookok, mint például useState és useEffect megkönnyítik az állapot kezelését és a Django háttérrendszerrel való interakciót. Az API-hívások központosításához hozzon létre egy szolgáltatásfájlt 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;

Végül integráljunk mindent a 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
}

Ezzel a beállítással a React frontend készen áll az interaktív feladatok kezelésére, miközben zökkenőmentesen kommunikál a Django háttérrendszerrel.

A Django és a React összekapcsolása

Most, hogy a háttérrendszer és az elülső felület is működik, a következő lépés a kettő közötti zökkenőmentes kommunikáció biztosítása. Ehhez API-végpontok beállítása, a kérések kezelése és az integrációval kapcsolatos esetleges problémák megoldása szükséges.

API-URL-ek beállítása a Reactben

A React-alkalmazásnak tudnia kell, hol találja a Django API-végpontokat. Ehhez frissítse a src/services/api.js fájlt a környezetre jellemző beállításokkal:

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;

Éles környezetben helyezz el egy .env fájlt a React-projekt gyökérkönyvtárába a következő tartalommal:

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

Ez a beállítás biztosítja, hogy a React-alkalmazás zökkenőmentesen tudjon együttműködni a Django-háttérrendszerrel, függetlenül attól, hogy helyi fejlesztői környezetben dolgozol, vagy éles környezetbe telepíted az alkalmazást. Az API-végpontok konfigurálásával készen állsz a háttérrendszerből származó adatok lekérésére és feldolgozására.

Adatok lekérése a háttérrendszerből

Az API-konfiguráció beállítása után CRUD-műveleteket hajthat végre az adatok kezelésére a React és a Django között. Frissítse a src/App.js a következő műveletek kezeléséhez:

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;

Ez a kód kezeli a feladatok létrehozását, frissítését, törlését és a hibakezelést. A felhasználói felület azonnal frissül a zökkenőmentes felhasználói élmény érdekében, a hibákat pedig a változtatások visszavonásával vagy megfelelő üzenetek megjelenítésével kezeljük.

A kapcsolat tesztelése és hibakeresése

A Django és a React összekapcsolásakor az egyik leggyakoribb akadály a CORS (Cross-Origin Resource Sharing) hibák kezelése. Ezek azért merülnek fel, mert a böngészők biztonsági okokból blokkolják a különböző eredetű források közötti kéréseket. A fejlesztés során a React általában a localhost:3000, míg a Django a localhost:8000, ami egy eredetközi helyzetet eredményez.

A CORS-problémák megoldásához győződjön meg arról, hogy a „CORS-fejlécek konfigurálása” szakaszban leírtak szerint beállította a CORS-fejléceket a Django beállításaiban. A módosítások elvégzése után indítsa újra a Django-kiszolgálót a változások alkalmazásához.

Íme néhány gyakori API-kérés hiba és azok megoldása:

• HTTP 400 (Hibás kérés): Ez általában azt jelenti, hogy a kérés adatai közül hiányzik néhány kötelező adat, vagy azok formátuma hibás. Például 2023 novemberében a FintanMi egy Django REST Framework és React projektben közösség létrehozásakor 400-as hibával találkozott, mert a owner mező hiányzott a kérésből. Mindig ellenőrizd le, hogy a frontend elküldi-e a Django-modellek által elvárt összes kötelező mezőt.
• HTTP 405 (Method Not Allowed): Ez akkor fordul elő, amikor az API-végpont nem támogatja a használt HTTP-módszert. Például a FintanMi 405-ös hibát jelentett egy bejegyzés törlése közben, amit úgy oldottak meg, hogy a Django-nézetet generics.RetrieveUpdateAPIView -ra generics.RetrieveUpdateDestroyAPIView -re, hogy támogassa a DELETE requests-t.

Az alkalmazás futtatása és tesztelése

Miután összekapcsolta a Django háttérrendszerét és a React felhasználói felületét, itt az ideje elindítani mindkét fejlesztői szervert, és tesztelni az alkalmazást. Ehhez két szervert kell egyszerre futtatni, és meg kell győződni arról, hogy minden zökkenőmentesen működik együtt.

A fejlesztői szerverek elindítása

A Django-React alkalmazás futtatásához két terminálablakra lesz szükség – egy-egy mindkét szerverhez. Ez a beállítás lehetővé teszi, hogy a háttérrendszer és az elülső felület egymástól függetlenül működjön, miközben API-hívásokon keresztül kommunikálnak egymással.

A Django háttérszerver elindítása:

1. Nyisd meg az első terminálablakot, és lépj be a Django-projekt gyökérkönyvtárába.

2. Aktiválja a Python virtuális környezetét:

   source venv/bin/activate
   

3. Indítsa el a Django fejlesztői szervert:

   python manage.py runserver
   

   A szerver a következő címen érhető el: http://127.0.0.1:8000/.

A React frontend szerver elindítása:

1. Nyisson meg egy második terminálablakot, és lépjen be a React-projekt könyvtárába:

   cd frontend
   

2. Indítsa el a React fejlesztői szervert:

   npm start
   

   Ez automatikusan megnyit egy böngészőablakot a http://localhost:3000/.

Amint mindkét szerver fut, elkezdheti az alkalmazás funkcióinak tesztelését.

Az alkalmazás teljes funkcionalitásának tesztelése

Miután a szerverek elindultak, és a CORS, valamint az API végpontok megfelelően vannak konfigurálva, itt az ideje ellenőrizni az adatáramlást a frontend és a backend között.

A háttér API ellenőrzése:

• Tesztelje közvetlenül a Django API végpontjait a következő címen:

  http://localhost:8000/api/tasks
  

  Ekkor megjelenik a Django REST Framework böngészhető API-felülete, ahol CREATE és READ műveleteket hajthat végre.

• Nyissa meg a Django admin felületét a következő címen:

  http://localhost:8000/admin
  

  Jelentkezzen be a rendszergazdai hitelesítő adataival, hogy feladatokat hozzon létre, szerkesszen vagy töröljön. Az UPDATE és DELETE műveleteket is tesztelheti a következő címen:

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

Frontend-backend integrációs tesztelés:

• Nyissa meg a React alkalmazását a http://localhost:3000 címre, és ellenőrizze, hogy megfelelően betöltődik-e, és megjeleníti-e a Django backendből származó feladatokat.
• Tesztelje az egyes CRUD műveleteket a React felületen keresztül:
  • Adjon hozzá egy új feladatot, és ellenőrizze, hogy megjelenik-e mind a React felhasználói felületén, mind a háttérrendszerben.
  • Szerkesszen meg egy meglévő feladatot, és győződjön meg arról, hogy a módosítások mentésre kerülnek.
  • Töröljön egy feladatot, és ellenőrizze, hogy eltűnt-e mind a frontendből, mind az adatbázisból.

Ha az alkalmazás szűrőket vagy egyéb funkciókat tartalmaz, alaposan tesztelje azokat, hogy megbizonyosodjon arról, hogy a feladatok a várakozásoknak megfelelően jelennek meg.

Gyakori problémák megoldása

Ha a tesztelés során bármilyen problémába ütközik, íme néhány gyakori megoldás, amit kipróbálhat.

API-kapcsolati hibák:

• Győződjön meg arról, hogy mindkét szerver a megfelelő porton fut: a Django a http://localhost:8000 , a React pedig a http://localhost:3000.
• Használja a böngésző fejlesztői eszközeit (hálózati lap) a 404-es vagy 500-as HTTP-állapotkódok azonosításához.

• Ellenőrizze a proxy beállítást a React-projekt package.json fájlban:

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

  Ha módosításokat hajt végre, indítsa újra a React-kiszolgálót.

Kiszolgáló indítási problémák:

• Ha a Django-szerver nem indul el, ellenőrizze, hogy nincsenek-e hiányzó migrációk:

  python manage.py makemigrations
  python manage.py migrate
  

• React-kiszolgálóval kapcsolatos problémák esetén próbálja meg újratelepíteni a függőségeket:

  npm install
  

Adatáramlási problémák:

• Használja a böngésző fejlesztői eszközeit a hálózati kérések és a konzolhibák ellenőrzéséhez.
• Adjon hozzá hibakeresési utasításokat, például console.log() a React-ben, vagy print utasításokat a Django nézetekben, az adatáramlás nyomon követéséhez.
• Ellenőrizze még egyszer, hogy a React-alkalmazásában szereplő API-URL-ek pontosan megegyeznek-e a Django URL-mintáival, beleértve a záró perjeleket is (pl. /api/tasks/).

Összefoglalás és következő lépések

Létrehoztál egy webalkalmazást, amely ötvözi a Djangót és a Reactet, így alapos bevezetést nyertél a full-stack fejlesztésbe. Ez a projekt olyan alapvető fogalmakat emel ki, mint a backend és a frontend szétválasztása, a CRUD műveletek végrehajtása, valamint a CORS-beállítások segítségével történő, különböző eredetű kérések kezelése. A munka során a Django REST Framework segítségével API-kat építettél, az állapotkezeléshez pedig React hookokat használtál – ezek a készségek teszik lehetővé a két hatékony eszköz zökkenőmentes integrációját.

Az alkalmazás továbbfejlesztése

Rengeteg lehetőség nyílik az alkalmazás funkcionalitásának bővítésére. Például hozzáadhat JWT-hitelesítést a Django REST Framework segítségével a felhasználói adatok és az API-hozzáférés biztonsága érdekében. Ez lehetővé tenné, hogy felhasználó-specifikus funkciókat és személyre szabott élményeket kínáljon.

Ha az alkalmazásodnak valós idejű frissítésekre van szüksége, fontold meg a Django Channels használatát a WebSocket-támogatás engedélyezéséhez. Ez tökéletes megoldás olyan funkciókhoz, mint az élő irányítópultok, a csevegőrendszerek vagy az értesítések, így az alkalmazásod egy dinamikusabb és interaktívabb platformmá válik.

Az alkalmazás növekedésével egyre fontosabbá válik a fejlett adatvizualizáció. A React renderelési képességeinek és a hatékony háttérbeli adatlekérésnek a kombinálásával hatékonyan kezelheti és jelenítheti meg a komplex adatkészleteket.

Felkészülés a termelésre

Az alkalmazás termelésre való felkészítésekor összpontosíts a telepítésre, a biztonságra és a teljesítményre. Míg a jelenlegi beállítás kiválóan alkalmas a helyi fejlesztésre, a termelési környezetek további lépéseket igényelnek. Ide tartozik a környezeti változók beállítása, az adatbázis optimalizálása és a hatékony hiba kezelési mechanizmusok megvalósítása.

Ezek a fejlesztések az általad már elsajátított ismeretekre épülnek – például az API-tervezésre, a komponensalapú architektúrára és a teljes stack integrációjára. Ezen fejlett technikák elsajátításával felkészülten fogsz tudni vállalni vállalati szintű projekteket, és tovább fejlődhetsz webfejlesztőként.

GYIK

Milyen előnyei vannak annak, ha egy webalkalmazás fejlesztésénél a háttérrendszerhez Djangót, az elülső felülethez pedig Reactet használunk?

A Django használata a háttérben és a React a felhasználói felületen erős kombinációt alkot a modern webalkalmazások fejlesztéséhez. A Django szilárd keretrendszert biztosít, tele olyan eszközökkel, amelyek egyszerűsítik a háttérfejlesztést, míg a React a dinamikus és interaktív felhasználói felületek építésében tűnik ki.

Ez a kombináció elősegíti a felelősségi körök tiszta elválasztását, ami segít a kódbázis rendezettségének megőrzésében és az idővel történő bővítés megkönnyítésében. A React komponensalapú felépítése ösztönzi a felhasználói felületelemek újrafelhasználását, a Django REST Framework pedig leegyszerűsíti az API-k építésének folyamatát, biztosítva a frontend és a backend közötti zökkenőmentes kommunikációt. Együttesen gyors, hatékony és felhasználóközpontú megközelítést kínálnak az alkalmazásfejlesztéshez.

Hogyan oldhatom meg a CORS-problémákat, amikor egy React-frontendet csatlakoztatok egy Django-backendhez?

A React frontend és a Django backend közötti CORS-problémák megoldására a django-cors-headers csomag praktikus megoldást kínál. Először telepítsd a pip segítségével. Ezután a settings.py fájlba írja be 'corsheaders' a INSTALLED_APPS listához. Ezután illessze be 'corsheaders.middleware.CorsMiddleware' a MIDDLEWARE listát, hogy biztosítsd a közbenső szoftverek megfelelő végrehajtási sorrendjét.

A fejlesztés során egyszerűsítheti a dolgokat azzal, hogy CORS_ORIGIN_ALLOW_ALL = True a settings.pybeállítást. Ezzel bármely eredetből érkező kéréseket engedélyezhet. Termelési környezetben azonban sokkal biztonságosabb, ha a CORS_ALLOWED_ORIGINS beállítás segítségével. Ez a megközelítés segít a szigorúbb biztonság fenntartásában.

Ezzel a konfigurációval a React-alkalmazás zökkenőmentesen tud együttműködni a Django API-jaival, miközben megfelel a CORS-követelményeknek.

Hogyan készíthetem elő a Django- és React-alkalmazásomat a termelési környezetbe való telepítésre?

A Django- és React-alkalmazás termelésre való felkészítéséhez kezdje azzal, hogy a biztonságos beállítás érdekében módosítja a Django-beállításokat. Ez magában foglalja a DEBUG értéket False beállítását, valamint a ALLOWED_HOSTS beállítás megadását, amely szabályozza, hogy mely domainek férhetnek hozzá az alkalmazáshoz. Ezek a változtatások elengedhetetlenek az alkalmazás védelméhez éles környezetben.

Ezután válasszon egy megbízható tárhelyplatformot a Django-háttérrendszer és a statikus fájlok számára. Győződjön meg arról, hogy az infrastruktúrája képes kezelni a termelési szintű forgalmat és igényeket. A React-felhasználói felület esetében használja a megfelelő építőeszközöket egy optimalizált termelési verzió létrehozásához.

Miután a React-alkalmazás készen áll, állítson be egy olyan webszervert, mint például az Nginx, amely mind a React-felületet, mind a Django-háttérrendszert kiszolgálja. A megfelelő szerverkonfiguráció biztosítja, hogy az alkalmazás hatékonyan működjön, és zökkenőmentes felhasználói élményt nyújtson.

Az élesítés előtt alaposan tesztelje az alkalmazást a termelési környezetben. Ez a lépés segít az esetleges problémák azonosításában és megoldásában, biztosítva, hogy az alkalmazás megbízhatóan működjön a bevezetés után.