Jak stworzyć prostą aplikację przy użyciu Django i React

Jak stworzyć prostą aplikację przy użyciu Django i React

Chcesz stworzyć aplikację internetową z solidnym backendem i dynamicznym frontendem? Połączenie Django, frameworka w języku Python, z Reactem, biblioteką JavaScript, to świetny sposób, aby to osiągnąć. Django zajmuje się zadaniami backendowymi, takimi jak zarządzanie bazą danych i tworzenie API, podczas gdy React tworzy responsywny, interaktywny interfejs użytkownika.

Kluczowe kroki:

1. Skonfiguruj środowisko:
   • Zainstaluj Python 3.x dla Django oraz Node.js dla React.
   • Użyj środowisk wirtualnych do zarządzania zależnościami Pythona.
   • Sprawdź, czy instalacje przebiegły pomyślnie, korzystając z polecenia python --version, node --version, oraz npm --version.
2. Zorganizuj swój projekt:
   • Utwórz osobne foldery dla zaplecza Django i interfejsu użytkownika React.
   • Użyj django-admin startproject do konfiguracji backendu oraz npx create-react-app do inicjalizacji frontendu.
3. Zbuduj backend:
   • Utwórz aplikacje Django, zdefiniuj modele i wygeneruj migracje.
   • Użyj Django REST Framework do utworzenia punktów końcowych API.
   • Skonfiguruj django-cors-headers w celu umożliwienia komunikacji między frontendem a backendem.
4. Tworzenie frontendu:
   • Wykorzystaj komponenty React do zarządzania zadaniami i interakcjami z użytkownikami.
   • Zainstaluj bibliotekę Axios do obsługi żądań API i zintegruj ją z punktami końcowymi Django.
   • Dopasuj wygląd aplikacji za pomocą CSS, aby uzyskać przejrzysty interfejs użytkownika.
5. Podłącz i przetestuj:
   • Uruchom Django na localhost:8000 , a React na localhost:3000.
   • Przetestuj punkty końcowe API za pomocą narzędzi takich jak Postman lub bezpośrednio w przeglądarce.
   • Upewnij się, że ustawienia CORS są prawidłowe, aby zapewnić płynną komunikację.

Ta konfiguracja pozwala na wydajne tworzenie aplikacji typu full-stack z wyraźnym rozdzieleniem między backendem a frontendem. Wykonaj poniższe kroki, aby stworzyć skalowalną, interaktywną aplikację internetową.

Projekt Django i React dla początkujących – stwórz aplikację do notatek typu full-stack

Wymagania dotyczące konfiguracji i instalacji

Zanim zaczniesz tworzyć aplikację w Django i React, konieczne jest skonfigurowanie środowiska programistycznego wraz z niezbędnymi narzędziami i zależnościami. Ta podstawa pomoże Ci płynnie tworzyć, integrować i testować komponenty Django i React w miarę postępów w pracy.

Wymagania systemowe i narzędzia

Aby rozpocząć pracę, komputer programisty musi mieć zainstalowany Python 3.x dla Django oraz Node.js dla React. W szczególności Django 5.0 wymaga Pythona 3.x, natomiast React działa z Node.js w wersji 12 lub nowszej.

Instalacja Pythona: Python można pobrać bezpośrednio z oficjalnej strony internetowej lub skorzystać z menedżera pakietów systemu. Użytkownikom systemu macOS ułatwia to Homebrew brew install python. Użytkownicy systemu Windows powinni pobrać instalator ze strony python.org, natomiast użytkownicy systemu Linux mogą zainstalować go za pomocą poleceń takich jak apt install python3 w systemie Ubuntu lub podobnych poleceń w innych dystrybucjach.

Konfiguracja Node.js i npm: Node.js jest dostarczany w pakiecie z npm (Node Package Manager). Potrzebna jest wersja npm 6 lub nowsza, przy czym wersja 7.5.4 jest sprawdzonym wyborem. Pobierz Node.js ze strony nodejs.org, co automatycznie zapewni dostęp do npm.

Wirtualne środowiska w Pythonie: Korzystanie z wirtualnych środowisk jest kluczowe dla zarządzania zależnościami specyficznymi dla projektu bez konfliktów. Można użyć wbudowanego venv lub narzędzi takich jak pipenv lub virtualenvwrapper , aby uzyskać więcej funkcji. Jeśli korzystasz z systemu Windows, pakiet virtualenvwrapper-win pakiet zapewnia podobną funkcjonalność.

Aby sprawdzić, czy instalacje przebiegły pomyślnie, uruchom w terminalu następujące polecenia:

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

Tworzenie struktury projektu

Dobrze zorganizowana struktura projektu jest niezbędna do utrzymania oddzielności i łatwości zarządzania kodem backendu i frontendu. Zacznij od utworzenia głównego katalogu dla projektu:

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

W tym katalogu utwórz dwa foldery: jeden dla backendu Django, a drugi dla frontendu React. Takie rozdzielenie pozwala na niezależne utrzymywanie i wdrażanie każdej z części.

Skonfiguruj wirtualne środowisko Pythona w katalogu projektu:

python -m venv venv

Aktywuj środowisko wirtualne:

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

Ten krok gwarantuje, że wszystkie zależności Pythona dla Twojego projektu są odizolowane.

Instalacja wymaganych pakietów

Gdy środowisko jest już gotowe, nadszedł czas na zainstalowanie niezbędnych pakietów zarówno dla Django, jak i React.

Pakiety zaplecza Django: Gdy środowisko wirtualne jest aktywne, zainstaluj Django i biblioteki pomocnicze za pomocą pip:

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

• Django obsługuje logikę po stronie serwera, zarządzanie bazą danych oraz routing adresów URL.
• Django REST Framework upraszcza proces tworzenia interfejsów API typu RESTful, ułatwiając tworzenie punktów końcowych dla frontendu React.
• Django-cors-headers umożliwia Cross-Origin Resource Sharing (CORS), co jest niezbędne do komunikacji między frontendem React (działającym na porcie 3000) a backendem Django (działającym na porcie 8000).

Konfiguracja interfejsu użytkownika React: Aby skonfigurować środowisko React, użyj narzędzia create-react-app narzędzia. Polecenie to inicjuje projekt React i instaluje wszystkie niezbędne zależności:

npx create-react-app frontend

Spowoduje to utworzenie nowego projektu React w katalogu frontend katalogu, wraz z niezbędnymi pakietami, narzędziami programistycznymi i skryptami kompilacji.

Dodatkowy pakiet frontendu: Po skonfigurowaniu projektu React przejdź do katalogu frontend katalogu i zainstaluj Axios, bibliotekę służącą do wysyłania żądań HTTP do API Django:

cd frontend
npm install axios

W tym momencie Twoje środowisko programistyczne jest w pełni wyposażone w Python 3.x, Django, Node.js, React oraz wszystkie niezbędne narzędzia. Wirtualne środowisko Pythona zapewnia izolację zależności backendu, podczas gdy npm oddzielnie zarządza pakietami JavaScript. Teraz jesteś gotowy, aby rozpocząć tworzenie aplikacji full-stack!

Tworzenie backendu za pomocą Django

Skonfiguruj backend w Django wraz z modelami bazy danych, punktami końcowymi API oraz integracją z frontendem opartym na React.

Tworzenie projektu i aplikacji Django

Zacznij od utworzenia projektu Django, który obejmuje ustawienia, konfiguracje bazy danych oraz opcje specyficzne dla aplikacji. W ramach tego projektu zbudujesz aplikację Django – pakiet w języku Python przeznaczony do konkretnych zadań, takich jak zarządzanie danymi użytkowników lub treścią.

Przejdź do katalogu głównego projektu (gdzie skonfigurowano środowisko wirtualne) i utwórz projekt Django:

django-admin startproject backend .

To polecenie generuje pliki projektu bezpośrednio w bieżącym katalogu, co pozwala uniknąć tworzenia dodatkowego folderu. Zauważysz nowe pliki, takie jak manage.py (do uruchamiania poleceń Django) oraz katalog backend katalog zawierający pliki takie jak settings.py, urls.py, asgi.pyoraz wsgi.py.

Następnie utwórz aplikację obsługującą konkretną funkcjonalność. Na przykład system zarządzania zadaniami:

python manage.py startapp tasks

Spowoduje to utworzenie tasks katalog z niezbędnymi plikami, takimi jak models.py, views.py, admin.pyoraz folder migrations folder. Należy unikać konfliktów nazw z nazwami wbudowanymi, takimi jak „django” lub „test”.

Zarejestruj aplikację w ustawieniach projektu, dodając ją do INSTALLED_APPS listy w 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
]

Konfiguracja modeli i serializatorów

Zdefiniuj strukturę danych za pomocą modeli Django. Na przykład prosty Task model dla aplikacji do zarządzania zadaniami można dodać w 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

Model ten zawiera pola takie jak CharField dla krótkiego tekstu, TextField dla dłuższych treści, BooleanField dla wartości „prawda/fałsz” oraz DateTimeField dla znaczników czasu. Klasa Meta klasa określa opcje, takie jak domyślna kolejność.

Zastosuj model do bazy danych, uruchamiając migracje:

python manage.py makemigrations tasks
python manage.py migrate

Aby przekonwertować dane modelu na format JSON, użyj serializatorów Django REST Framework. W tasks/serializers.py, zdefiniuj serializator dla Task modelu:

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

Framework ModelSerializer automatycznie generuje pola i metody na podstawie modelu. Wyraźne wymienienie pól gwarantuje, że nie ujawnisz przypadkowo poufnych danych.

Tworzenie punktów końcowych API

Django REST Framework upraszcza tworzenie interfejsów API. W przypadku standardowych operacji CRUD należy używać ViewSets z routerami, aby uzyskać przejrzystą strukturę zgodną z REST.

W tasks/views.py, utwórz widoki API:

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

Funkcja ModelViewSet automatycznie obsługuje wyświetlanie listy, tworzenie, pobieranie, aktualizowanie i usuwanie zadań.

Skonfiguruj routing adresów URL w 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)),
]

Dodaj te adresy URL do głównego backend/urls.py :

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

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

Konfiguracja nagłówków CORS

Aby umożliwić frontendowi React (działającemu na porcie 3000) komunikację z backendem Django (na porcie 8000), skonfiguruj Cross-Origin Resource Sharing (CORS). Bez tego przeglądarki blokują żądania międzydomenowe ze względów bezpieczeństwa.

Zaktualizuj plik backend/settings.py , aby uwzględnić konfigurację CORS:

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

W celu szybkiego przetestowania można użyć CORS_ALLOW_ALL_ORIGINS = True, jednak bezpieczniejsze jest określenie dozwolonych źródeł.

Testowanie punktów końcowych API

Przed zintegrowaniem interfejsu użytkownika opartego na React należy przetestować punkty końcowe API, aby upewnić się, że działają zgodnie z oczekiwaniami. Uruchom serwer deweloperski Django:

python manage.py runserver

Uzyskaj dostęp do API pod adresem http://127.0.0.1:8000/api/tasks/. Skorzystaj z przeglądalnego API, aby przetestować operacje, takie jak żądania GET i POST.

Alternatywnie można przeprowadzić testy za pomocą cURL lub 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"}'

W celu przeprowadzenia testów automatycznych dodaj przypadki testowe w 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

Po skonfigurowaniu backendu możesz połączyć go z frontendem React.

Tworzenie interfejsu użytkownika za pomocą React

Aby stworzyć atrakcyjny interfejs dla backendu opartego na Django, użyjesz Reacta do zarządzania interakcjami użytkownika – od przeglądania zadań po dodawanie nowych.

Konfiguracja projektu React

Zacznij od skonfigurowania frontendu React za pomocą narzędzia Create React App. Przejdź do katalogu głównego projektu (gdzie znajduje się backend Django) i uruchom:

npx create-react-app frontend
cd frontend

To polecenie konfiguruje aplikację React wraz z niezbędnymi plikami, takimi jak package.json, src/App.js, oraz public/index.html. Zawiera on również narzędzia, takie jak webpack do pakowania, Babel do kompilacji kodu JavaScript oraz serwer deweloperski do testowania.

Następnie zainstaluj Axios do obsługi żądań HTTP kierowanych do Twojego API Django:

npm install axios

Axios upraszcza wywoływania API, zarządzając parsowaniem JSON i oferując lepszą obsługę błędów niż wbudowana fetch() . Obsługuje również funkcje takie jak przechwytywacze żądań i odpowiedzi.

Struktura folderów powinna teraz wyglądać następująco:

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

Aby sprawdzić, czy wszystko działa, uruchom serwer deweloperski React:

npm start

Spowoduje to uruchomienie aplikacji pod adresem http://localhost:3000, wyświetlając domyślną stronę powitalną Reacta. Pozostaw ten serwer uruchomiony podczas programowania — automatycznie odświeża się po wprowadzeniu zmian.

Tworzenie komponentów React

Stwórzmy komponent TaskList komponent do wyświetlania zadań pobranych z Twojego API Django. Dodaj poniższy kod do pliku 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;

Następnie utwórz TaskForm komponent do dodawania nowych zadań. Dodaj to do 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;

Aby zastosować podstawowe style, utwórz plik src/App.css plik i dodaj:

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

Zarządzanie stanem i integracja z API

Hooki Reacta, takie jak useState i useEffect ułatwiają zarządzanie stanem i interakcję z backendem Django. Aby scentralizować wywołania API, utwórz plik usługi 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;

Na koniec zintegruj wszystko w 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
}

Dzięki tej konfiguracji frontend React jest gotowy do interaktywnego wykonywania zadań, jednocześnie płynnie komunikując się z backendem Django.

Łączenie Django i React

Teraz, gdy zarówno backend, jak i frontend działają, następnym krokiem jest zapewnienie płynnej komunikacji między nimi. Obejmuje to konfigurację punktów końcowych API, zarządzanie żądaniami oraz rozwiązywanie ewentualnych problemów związanych z integracją.

Konfiguracja adresów URL API w React

Aplikacja React musi wiedzieć, gdzie znajdują się punkty końcowe API Django. W tym celu należy zaktualizować plik src/services/api.js plik, wprowadzając konfigurację dostosowaną do danego środowiska:

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;

W środowisku produkcyjnym dodaj plik .env do katalogu głównego projektu React o następującej treści:

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

Ta konfiguracja gwarantuje, że Twoja aplikacja React będzie mogła płynnie współpracować z backendem Django, niezależnie od tego, czy pracujesz w lokalnym środowisku programistycznym, czy wdrażasz aplikację do środowiska produkcyjnego. Po skonfigurowaniu punktów końcowych API możesz już pobierać dane z backendu i przetwarzać je.

Pobieranie danych z backendu

Po skonfigurowaniu API możesz wykonywać operacje CRUD w celu zarządzania danymi między Reactem a Django. Zaktualizuj src/App.js , aby obsługiwać te operacje:

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;

Ten kod obsługuje tworzenie zadań, aktualizacje, usuwanie oraz zarządzanie błędami. Interfejs użytkownika aktualizuje się natychmiast, zapewniając płynne działanie, a błędy są elegancko obsługiwane poprzez cofnięcie zmian lub wyświetlenie odpowiednich komunikatów.

Testowanie i debugowanie połączenia

Jedną z najczęstszych przeszkód podczas łączenia Django i Reacta jest radzenie sobie z błędami CORS (Cross-Origin Resource Sharing). Powstają one, ponieważ przeglądarki blokują żądania między różnymi źródłami ze względów bezpieczeństwa. Podczas tworzenia aplikacji React zazwyczaj działa na localhost:3000, podczas gdy Django działa na localhost:8000, co powoduje sytuację międzydomenową.

Aby rozwiązać problemy związane z CORS, upewnij się, że skonfigurowałeś nagłówki CORS w ustawieniach Django zgodnie z opisem w sekcji „Konfiguracja nagłówków CORS”. Po wprowadzeniu zmian uruchom ponownie serwer Django, aby je zastosować.

Oto kilka typowych błędów żądań API i sposoby ich rozwiązania:

• HTTP 400 (Bad Request): Zazwyczaj oznacza to, że w treści żądania brakuje niektórych wymaganych danych lub są one nieprawidłowo sformułowane. Na przykład w listopadzie 2023 r. firma FintanMi napotkała błąd 400 podczas tworzenia społeczności w projekcie opartym na Django REST Framework i React, ponieważ w żądaniu brakowało pola owner w żądaniu brakowało jednego z pól. Zawsze dokładnie sprawdzaj, czy Twój frontend wysyła wszystkie wymagane pola oczekiwane przez modele Django.
• HTTP 405 (Method Not Allowed): Błąd ten występuje, gdy punkt końcowy API nie obsługuje używanej metody HTTP. Na przykład firma FintanMi zgłosiła błąd 405 podczas próby usunięcia wpisu, co udało się rozwiązać poprzez aktualizację widoku Django z generics.RetrieveUpdateAPIView na generics.RetrieveUpdateDestroyAPIView w celu dodania obsługi DELETE requests.

Uruchamianie i testowanie aplikacji

Po połączeniu backendu Django z frontendem React nadszedł czas na uruchomienie obu serwerów deweloperskich i przetestowanie aplikacji. Wymaga to jednoczesnego uruchomienia dwóch serwerów i upewnienia się, że wszystko działa płynnie.

Uruchamianie serwerów deweloperskich

Aby uruchomić aplikację Django-React, potrzebne będą dwa okna terminala – po jednym dla każdego serwera. Taka konfiguracja pozwala backendowi i frontendowi działać niezależnie, komunikując się jednocześnie za pośrednictwem wywołań API.

Uruchamianie serwera backendu Django:

1. Otwórz pierwsze okno terminala i przejdź do katalogu głównego projektu Django.

2. Uruchom wirtualne środowisko Python:

   source venv/bin/activate
   

3. Uruchom serwer deweloperski Django:

   python manage.py runserver
   

   Serwer będzie dostępny pod adresem http://127.0.0.1:8000/.

Uruchamianie serwera frontendu React:

1. Otwórz drugie okno terminala i przejdź do katalogu projektu React:

   cd frontend
   

2. Uruchom serwer deweloperski React:

   npm start
   

   Spowoduje to automatyczne otwarcie okna przeglądarki pod adresem http://localhost:3000/.

Gdy oba serwery będą już działać, możesz rozpocząć testowanie funkcjonalności swojej aplikacji.

Testowanie pełnej funkcjonalności aplikacji

Gdy serwery już działają, a CORS i punkty końcowe API są poprawnie skonfigurowane, nadszedł czas na sprawdzenie przepływu danych między frontendem a backendem.

Weryfikacja API backendu:

• Przetestuj punkty końcowe API Django bezpośrednio, odwiedzając stronę:

  http://localhost:8000/api/tasks
  

  Powinien wyświetlić się interfejs API Django REST Framework z możliwością przeglądania, w którym można wykonywać operacje CREATE i READ.

• Wejdź do panelu administracyjnego Django pod adresem:

  http://localhost:8000/admin
  

  Zaloguj się przy użyciu danych logowania superużytkownika, aby tworzyć, edytować lub usuwać zadania. Możesz również przetestować operacje UPDATE i DELETE, odwiedzając:

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

Testowanie integracji frontendu z backendem:

• Otwórz swoją aplikację React pod adresem http://localhost:3000 i sprawdź, czy ładuje się poprawnie, wyświetlając zadania z backendu Django.
• Przetestuj każdą operację CRUD za pośrednictwem interfejsu React:
  • Dodaj nowe zadanie i sprawdź, czy pojawia się ono zarówno w interfejsie użytkownika React, jak i w backendzie.
  • Edytuj istniejące zadanie i upewnij się, że zmiany zostały zapisane.
  • Usuń zadanie i sprawdź, czy zostało usunięte zarówno z interfejsu użytkownika, jak i z bazy danych.

Jeśli Twoja aplikacja zawiera filtry lub inne funkcje, przetestuj je dokładnie, aby upewnić się, że zadania są wyświetlane zgodnie z oczekiwaniami.

Rozwiązywanie typowych problemów

Jeśli podczas testowania napotkasz jakiekolwiek problemy, oto kilka typowych rozwiązań, które warto wypróbować.

Błędy połączenia z API:

• Upewnij się, że oba serwery działają na odpowiednich portach: Django na http://localhost:8000 , a React na http://localhost:3000.
• Skorzystaj z narzędzi programistycznych przeglądarki (zakładka „Sieć”), aby zidentyfikować kody statusu HTTP, takie jak 404 lub 500.

• Sprawdź ustawienie proxy ustawienie w pliku package.json :

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

  Jeśli wprowadzisz zmiany, uruchom ponownie serwer React.

Problemy z uruchomieniem serwera:

• Jeśli serwer Django się nie uruchamia, sprawdź, czy nie brakuje migracji:

  python manage.py makemigrations
  python manage.py migrate
  

• W przypadku problemów z serwerem React spróbuj ponownie zainstalować zależności:

  npm install
  

Problemy z przepływem danych:

• Skorzystaj z narzędzi programistycznych przeglądarki, aby sprawdzić żądania sieciowe i błędy konsoli.
• Dodaj instrukcje debugowania, takie jak console.log() w React lub print instrukcje w widokach Django, aby prześledzić przepływ danych.
• Sprawdź dokładnie, czy adresy URL API w Twojej aplikacji React dokładnie odpowiadają wzorcom adresów URL w Django, łącznie z końcowymi ukośnikami (np. /api/tasks/).

Podsumowanie i kolejne kroki

Stworzyłeś aplikację internetową łączącą Django i React, co stanowi solidne wprowadzenie do programowania full-stack. Projekt ten podkreśla kluczowe koncepcje, takie jak oddzielenie backendu od frontendu, wykonywanie operacji CRUD oraz zarządzanie żądaniami międzydomenowymi przy użyciu ustawień CORS. W trakcie pracy korzystałeś z Django REST Framework do tworzenia interfejsów API oraz używałeś hooków Reacta do zarządzania stanem – umiejętności, które pozwalają na płynną integrację tych dwóch potężnych narzędzi.

Rozwój aplikacji na wyższy poziom

Istnieje wiele możliwości rozszerzenia funkcjonalności Twojej aplikacji. Możesz na przykład dodać uwierzytelnianie JWT przy użyciu Django REST Framework, aby zabezpieczyć dane użytkowników i dostęp do API. Pozwoliłoby to na oferowanie funkcji dostosowanych do konkretnych użytkowników oraz spersonalizowanych doświadczeń.

Jeśli Twoja aplikacja wymaga aktualizacji w czasie rzeczywistym, rozważ użycie Django Channels w celu włączenia obsługi WebSocket. Jest to idealne rozwiązanie dla funkcji takich jak pulpity nawigacyjne na żywo, systemy czatu lub powiadomienia, dzięki czemu Twoja aplikacja stanie się bardziej dynamiczną i interaktywną platformą.

W miarę rozwoju aplikacji coraz ważniejsza staje się zaawansowana wizualizacja danych. Łącząc możliwości renderowania Reacta z wydajnym pobieraniem danych z backendu, będziesz w stanie skutecznie przetwarzać i wyświetlać złożone zbiory danych.

Przygotowanie do wdrożenia do środowiska produkcyjnego

Przygotowując aplikację do wdrożenia produkcyjnego, skup się na wdrożeniu, bezpieczeństwie i wydajności. Chociaż obecna konfiguracja świetnie sprawdza się podczas lokalnego programowania, środowiska produkcyjne wymagają dodatkowych kroków. Obejmują one konfigurację zmiennych środowiskowych, optymalizację bazy danych oraz wdrożenie solidnych mechanizmów obsługi błędów.

Ulepszenia te opierają się na umiejętnościach, które już opanowałeś – takich jak projektowanie API, architektura oparta na komponentach oraz integracja full-stack. Opanowując te zaawansowane techniki, będziesz dobrze przygotowany do realizacji projektów na poziomie korporacyjnym i dalszego rozwoju jako programista stron internetowych.

Często zadawane pytania

Jakie są zalety wykorzystania Django w backendzie i Reacta w frontendzie podczas tworzenia aplikacji internetowej?

Wykorzystanie Django w backendzie i Reacta w frontendzie stanowi doskonałe połączenie do tworzenia nowoczesnych aplikacji internetowych. Django zapewnia solidny framework wyposażony w narzędzia usprawniające tworzenie backendu, podczas gdy React doskonale sprawdza się w budowaniu dynamicznych i interaktywnych interfejsów użytkownika.

Takie połączenie sprzyja wyraźnemu rozdzieleniu obowiązków, co pomaga utrzymać porządek w kodzie i ułatwia jego rozbudowę w miarę upływu czasu. Struktura Reacta oparta na komponentach zachęca do ponownego wykorzystywania elementów interfejsu użytkownika, a framework REST w Django upraszcza proces tworzenia interfejsów API, zapewniając płynną komunikację między frontendem a backendem. Razem oferują szybkie, wydajne i zorientowane na użytkownika podejście do tworzenia aplikacji.

Jak rozwiązać problemy związane z CORS podczas łączenia frontendu React z backendem Django?

Aby rozwiązać problemy związane z CORS między frontendem React a backendem Django, przydatnym rozwiązaniem jest pakiet django-cors-headers . Najpierw zainstaluj go za pomocą pip. Następnie w pliku settings.py , dodaj 'corsheaders' do listy INSTALLED_APPS . Następnie umieść 'corsheaders.middleware.CorsMiddleware' na samym początku listy MIDDLEWARE , aby zapewnić prawidłową kolejność wykonywania modułów pośredniczących.

Podczas tworzenia oprogramowania można uprościć sprawę, ustawiając CORS_ORIGIN_ALLOW_ALL = True w pliku settings.py. Pozwala to na przyjmowanie żądań z dowolnego źródła. Jednak w środowisku produkcyjnym znacznie bezpieczniej jest zdefiniować konkretne zaufane domeny za pomocą ustawienia CORS_ALLOWED_ORIGINS . Takie podejście pomaga zapewnić wyższy poziom bezpieczeństwa.

Dzięki tej konfiguracji aplikacja React może płynnie współpracować z interfejsami API Django, zachowując zgodność z wymaganiami CORS.

Jak przygotować aplikacje Django i React do wdrożenia w środowisku produkcyjnym?

Aby przygotować aplikację Django i React do środowiska produkcyjnego, zacznij od dostosowania ustawień Django w celu zapewnienia bezpiecznej konfiguracji. Obejmuje to ustawienie DEBUG na False oraz określenie ALLOWED_HOSTS w celu kontrolowania, które domeny mogą uzyskać dostęp do aplikacji. Zmiany te są niezbędne do ochrony aplikacji w środowisku produkcyjnym.

Następnie wybierz niezawodną platformę hostingową dla backendu Django i plików statycznych. Upewnij się, że infrastruktura jest przystosowana do obsługi ruchu i wymagań na poziomie produkcyjnym. W przypadku frontendu React użyj odpowiednich narzędzi do kompilacji, aby wygenerować zoptymalizowaną kompilację produkcyjną.

Gdy aplikacja React będzie gotowa, skonfiguruj serwer WWW, taki jak Nginx, aby obsługiwał zarówno frontend React, jak i backend Django. Prawidłowa konfiguracja serwera zapewnia wydajne działanie aplikacji i płynne doświadczenie użytkowników.

Przed uruchomieniem aplikacji w środowisku produkcyjnym należy ją dokładnie przetestować. Ten krok pomaga zidentyfikować i rozwiązać wszelkie problemy, zapewniając niezawodne działanie aplikacji po jej uruchomieniu.