Як створити простий додаток за допомогою Django та React

Хочете створити веб-додаток з потужним бекендом і динамічним фронтендом? Поєднання Django, фреймворку Python, з React, бібліотекою JavaScript, є чудовим способом досягти цього. Django виконує бекенд-завдання, такі як управління базами даних та створення API, в той час як React створює адаптивний, інтерактивний користувацький інтерфейс.

Основні кроки:

1. Налаштуйте середовище:- Встановіть Python 3.x для Django та Node.js для React.

   • Використовуйте віртуальні середовища для керування залежностями Python.
   • Підтвердіть встановлення за допомогою python --version, node --version та npm --version.

2. Організуйте свій проект:- Створіть окремі папки для бекенду Django та фронтенду React.

   • Використовуйте django-admin startproject для налаштування бекенда і npx create-react-app для ініціалізації фронтенда.

3. Створіть бекенд:- Створюйте Django-додатки, визначайте моделі та генеруйте міграції.

   • Використовуйте Django REST Framework для створення кінцевих точок API.
   • Налаштуйте django-cors-headers, щоб забезпечити зв'язок між фронтендом і бекендом.

4. Розробляти фронтенд:- Використовуйте React-компоненти для управління завданнями та взаємодією з користувачами.

   • Встановіть Axios для запитів до API та інтегруйте його з кінцевими точками Django.
   • Стилізуйте додаток за допомогою CSS для чистого користувацького інтерфейсу.

5. Підключіться і протестуйте:- Запустіть Django на localhost:8000 та React на localhost:3000.

   • Протестуйте кінцеві точки API за допомогою таких інструментів, як Postman або безпосередньо в браузері.
   • Переконайтеся в правильності налаштувань CORS для безперебійного зв'язку.

Таке налаштування дозволяє ефективно створювати повностековий додаток з чітким поділом між бекендом і фронтендом. Виконайте ці кроки, щоб створити масштабований, інтерактивний веб-додаток.

Django та React-проект для початківців - створення додатку для нотаток на повному стеку

Вимоги до налаштування та встановлення

Перш ніж ви почнете створювати свій додаток на Django та React, дуже важливо налаштувати середовище розробки з необхідними інструментами та залежностями. Цей фундамент допоможе вам створювати, інтегрувати та тестувати компоненти Django та React без проблем.

Системні вимоги та інструменти

Для початку вам знадобиться Python 3.x для Django та Node.js для React. Зокрема, Django 5.0 вимагає Python 3.x, тоді як React працює з Node.js версії 12 або вище.

Встановлення Python: Ви можете завантажити Python безпосередньо з його офіційного сайту або скористатися менеджером пакетів вашої системи. Для користувачів macOS Homebrew спрощує процес за допомогою brew install python. Користувачам Windows слід завантажити інсталятор з python.org, в той час як користувачі Linux можуть встановити його за допомогою команд на кшталт apt install python3 на Ubuntu або аналогічних команд для інших дистрибутивів.

НалаштуванняNode.js та npm: Node.js постачається в комплекті з npm (Node Package Manager). Вам знадобиться npm версії 6 або вище, надійним вибором є версія 7.5.4. Завантажте Node.js з nodejs.org, який автоматично включить npm.

Віртуальні середовища Python: Використання віртуальних середовищ є ключем до управління специфічними для проекту залежностями без конфліктів. Ви можете використовувати вбудований модуль venv або такі інструменти, як pipenv або virtualenvwrapper для отримання додаткових можливостей. Якщо ви користуєтеся Windows, пакунок virtualenvwrapper-win надає подібні можливості.

Щоб підтвердити встановлення, виконайте ці команди у вашому терміналі:

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

Створення структури проекту

Добре організована структура проекту необхідна для того, щоб ваш бекенд і фронтенд код були відокремленими і керованими. Почніть зі створення головного каталогу для вашого проекту:

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

Усередині цього каталогу створіть дві папки: одну для бекенду Django, а іншу для фронтенду React. Такий поділ дозволяє вам підтримувати і розгортати кожну частину незалежно.

Налаштуйте віртуальне середовище Python в каталозі проекту:

python -m venv venv

Активуйте віртуальне середовище:

• На macOS/Linux: джерело venv/bin/activate
• У Windows: venv\Scripts\activate

Цей крок гарантує, що всі залежності Python для вашого проекту будуть ізольовані.

Встановлення необхідних пакунків

Коли ваше середовище готове, настав час встановити необхідні пакети для Django та React.

Пакети Django Backend: Поки ваше віртуальне середовище активне, встановіть Django та допоміжні бібліотеки за допомогою pip:

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

• Django відповідає за логіку на стороні сервера, керування базами даних та маршрутизацію URL-адрес.
• Django REST Framework спрощує процес побудови RESTful API, полегшуючи створення кінцевих точок для вашого React-фронтенду.
• Django-cors-headers дозволяє використовувати Cross-Origin Resource Sharing (CORS), що є важливим для комунікації між вашим фронтендом React (що працює на порту 3000) та бекендом Django (що працює на порту 8000).

Налаштування фронтенду React: Щоб налаштувати середовище React, скористайтеся інструментом create-react-app. Ця команда ініціалізує React-проект та встановлює всі необхідні залежності:

npx create-react-app frontend

Це створить новий React-проект у директорії фронтенду з необхідними пакетами, інструментами розробки та скриптами збірки.

Додатковий фронтенд-пакет: Після налаштування вашого React-проекту перейдіть до каталогу frontend і встановіть Axios, бібліотеку для створення HTTP-запитів до вашого Django API:

cd frontend npm install axios

На цьому етапі ваше середовище розробки повністю обладнане Python 3.x, Django, Node.js, React і всіма необхідними інструментами. Віртуальне середовище Python гарантує ізоляцію ваших бекенд-залежностей, в той час як npm обробляє ваші JavaScript-пакети окремо. Тепер ви готові почати створювати свій повностековий додаток!

Створення бекенду за допомогою Django

Створіть бекенд Django з моделями баз даних, кінцевими точками API та інтеграцією для фронтенду React.

Створення проекту та додатку Django

Почніть зі створення проекту Django, який включає в себе налаштування, конфігурації баз даних і специфічні для додатку опції. Усередині цього проекту ви створите додаток Django - пакет Python, призначений для виконання конкретних завдань, таких як управління даними користувача або контентом.

Перейдіть до кореневого каталогу вашого проекту (де налаштовано віртуальне середовище) і створіть проект Django:

django-admin startproject backend .

Ця команда створить файли проекту безпосередньо в поточному каталозі, уникаючи створення додаткової папки. Ви побачите нові файли, такі як manage.py (для запуску команд Django) і каталог backend, що містить файли settings.py, urls.py, asgi.py і wsgi.py.

Далі створіть додаток для виконання певного функціоналу. Наприклад, систему управління завданнями:

python manage.py startapp tasks

Це створить каталог завдань з основними файлами, такими як models.py, views.py, admin.py, а також папку міграцій. Переконайтеся, що ви уникаєте конфліктів імен із вбудованими іменами на кшталт "django" або "test".

Зареєструйте додаток у налаштуваннях вашого проекту, додавши його до списку INSTALLED_APPS у 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', # Зареєструйте ваш додаток ]

Налаштування моделей та серіалізаторів

Визначте структуру даних за допомогою моделей Django. Наприклад, просту модель Task для додатку керування завданнями можна додати в 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

Ця модель включає такі поля, як CharField для короткого тексту, TextField для довшого вмісту, BooleanField для значень true/false і DateTimeField для міток часу. Клас Meta визначає такі параметри, як порядок за замовчуванням.

Застосуйте модель до вашої бази даних за допомогою міграцій:

python manage.py завдання міграцій python manage.py migrate

Щоб перетворити дані моделі в JSON, використовуйте серіалізатори Django REST Framework. В task/serializers.py визначте серіалізатор для моделі Task:

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]

ModelSerializer автоматично генерує поля та методи на основі моделі. Явне перерахування полів гарантує, що ви ненавмисно не розкриєте конфіденційні дані.

Створення кінцевих точок API

Django REST Framework спрощує створення API. Для стандартних CRUD-операцій використовуйте ViewSets з маршрутизаторами для чистої, REST-орієнтованої структури.

У task/views.py створіть представлення 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] # Тільки для розробки

ModelViewSet автоматично обробляє список, створення, пошук, оновлення та видалення завдань.

Налаштуйте маршрутизацію URL-адрес в 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)), ]

Включіть ці URL-адреси в основний файл backend/urls.py:

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

Налаштування заголовків CORS

Щоб дозволити вашому фронтенду React (що працює на порту 3000) взаємодіяти з бекендом Django (на порту 8000), налаштуйте Cross-Origin Resource Sharing (CORS). Без цього браузери блокують перехресні запити з міркувань безпеки.

Оновіть файл backend/settings.py, щоб додати налаштування CORS:

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # Додайте це зверху '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 для розробки CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", # сервер розробки React "http://127.0.0.1:3000", ] CORS_ALLOW_CREDENTIALS = True

Для швидкого тестування ви можете використовувати CORS_ALLOW_ALL_ORIGINS = True, але безпечніше вказувати дозволене походження.

Тестування кінцевих точок API

Перш ніж інтегрувати фронтенд React, протестуйте кінцеві точки API, щоб переконатися, що вони працюють належним чином. Запустіть сервер розробки Django:

python manage.py runserver

Отримайте доступ до API за адресою http://127.0.0.1:8000/api/tasks/. Використовуйте браузерний API для тестування таких операцій, як GET і POST запити.

Або протестуйте за допомогою cURL або Postman:

# Тестовий GET-запит для отримання списку завдань curl -X GET http://127.0.0.1:8000/api/tasks/ # Тестовий POST-запит для створення завдання curl -X POST http://127.0.0.1:8000/api/tasks/ \ -H "Content-Type: application/json" \ -d '{"title": "Test Task", "description": "Це тестове завдання"}'

Для автоматизованого тестування додайте тестові кейси в task/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): # Додайте сюди свої твердження та логіку тесту pass

Коли бекенд створено, ви готові підключити його до фронтенду React.

Створення інтерфейсу за допомогою React

Щоб створити привабливий інтерфейс для вашого бекенду Django, ви будете використовувати React для управління взаємодією з користувачами - від перегляду завдань до додавання нових.

Створення React-проекту

Почніть з налаштування вашого фронтенду React за допомогою Create React App. Перейдіть до кореневої директорії вашого проекту (де знаходиться бекенд Django) і запустіть його:

npx create-react-app frontend cd frontend

Ця команда створить React-додаток з основними файлами, такими як package.json, src/App.js та public/index.html. Вона також включає такі інструменти, як webpack для компонування, Babel для компіляції JavaScript та сервер розробки для тестування.

Далі встановіть Axios для обробки HTTP-запитів до вашого Django API:

npm install axios

Axios спрощує виклики API, керуючи розбором JSON і пропонуючи кращу обробку помилок, ніж вбудована функція fetch(). Він також підтримує такі функції, як перехоплювачі запитів та відповідей.

Ваша структура папок тепер має виглядати так:

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

Щоб переконатися, що все працює, запустіть сервер розробки React:

npm start

Це запустить додаток за адресою http://localhost:3000, відобразивши стандартну вітальну сторінку React. Тримайте цей сервер запущеним під час розробки - він автоматично перезавантажується, коли ви вносите зміни.

Створення React-компонентів

Давайте створимо компонент TaskList для відображення завдань, отриманих з вашого Django API. Додайте наступне до src/components/TaskList.js:

import React from 'react'; const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => { return ( <div className="task-list"> <h2>Ваші завдання</h2> {tasks.length === 0 ? ( <p>Немає доступних завдань. Створіть своє перше завдання!</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" > Видалити </button> </div> </li> ))} </ul> )} </div> ); }; експортуємо стандартний TaskList;

Далі створіть компонент TaskForm для додавання нових завдань. Додайте його до 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); } finally { setIsSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="task-form"> <h2>Додати нове завдання</h2> <div className="form-group"> <input type="text" placeholder="Назва завдання" value={title} onChange={(e) => setTitle(e.ціль.value)} disabled={isSubmitting} required /> </div> <div className="form-group"> <textarea placeholder="Опис завдання (необов'язково)" value={description} onChange={(e) => setDescription(e.target.value)} disabled={isSubmitting} rows="3" /> </div> <button type="submit" disabled={isSubmitting || !title.trim()}> {isSubmitting ? 'Додавання...' : 'Додати завдання'} </button> </form> ); }; експортуйте стандартну TaskForm;

Для базового стилю, створіть файл src/App.css і додайте:

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

Керування станом та інтеграція з API

Хуки React, такі як useState та useEffect, дозволяють легко керувати станом та взаємодіяти з вашим бекендом Django. Щоб централізувати виклики API, створіть службовий файл 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}/`), }; експортуємо дефолтний api;

Нарешті, інтегруйте все в 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); } }; // Додаткові методи для додавання, оновлення та видалення завдань будуть тут }

З таким налаштуванням ваш React-фронтенд готовий до інтерактивної обробки завдань та безперешкодної взаємодії з вашим Django-бекендом.

Поєднання Django та React

Тепер, коли ваш бекенд і фронтенд запущені і працюють, наступний крок - забезпечити безперебійну комунікацію між ними. Це включає в себе налаштування кінцевих точок API, управління запитами та вирішення будь-яких проблем інтеграції.

Налаштування URL-адрес API в React

Ваш React-додаток повинен знати, де знаходяться кінцеві точки API Django. Щоб досягти цього, оновіть файл src/services/api.js конфігураціями, специфічними для вашого середовища:

import axios from 'axios'; // Визначити базову URL-адресу API на основі середовища 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 секундний таймаут }); 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}/`), }; експортуємо стандартний api;

Для продуктивної роботи додайте .env-файл до кореня вашого React-проекту з наступним вмістом:

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

Таке налаштування гарантує, що ваш React-додаток зможе безперешкодно взаємодіяти з бекендом Django, незалежно від того, чи ви перебуваєте в локальному середовищі розробки, чи розгортаєте його на продакшн. Налаштувавши кінцеві точки API, ви можете отримувати дані з бекенду та маніпулювати ними.

Отримання даних з бекенда

Після налаштування конфігурації API ви можете виконувати CRUD-операції для управління даними між React і Django. Оновіть 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(() =&)gt; { fetchTasks(); }, []); const fetchTasks = async () => { try { setLoading(true); setError(null); const response = await taskAPI.getTasks(); setTasks(response.data); } catch (err) { setError('Не вдалося завантажити завдання. Будь ласка, перевірте ваше з'єднання.'); console.error('Помилка завантаження завдань:', err); } finally { setLoading(false); } }; const handleAddTask = async (taskData) => { try { const response = await taskAPI.createTask(taskData); setTasks(prevTasks => [...prevTasks, response.data]); } catch (err) { console.error('Помилка додавання завдання:', err); throw err; // Повторний виклик, щоб дозволити TaskForm обробити помилку } }; 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('Помилка оновлення завдання:', err); } }; const handleDeleteTask = async (taskId) => { if (!window.confirm('Ви впевнені, що хочете видалити це завдання?')) { return; } try { await taskAPI.deleteTask(taskId); setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId)); } catch (err) { console.error('Помилка видалення завдання:', err); } }; if (loading) { return <div className="loading">Завантаження завдань...</div>; } return ( <div className="App"> <header className="App-header"> <h1>Менеджер завдань</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;

Цей код відповідає за створення, оновлення, видалення та обробку помилок. Інтерфейс оновлюється миттєво, що забезпечує безперебійну роботу користувача, а помилки виправляються шляхом відміни змін або показу відповідних повідомлень.

Тестування та налагодження з'єднання

Однією з найпоширеніших перешкод при з'єднанні Django і React є робота з помилками CORS (Cross-Origin Resource Sharing - спільне використання ресурсів різного походження). Вони виникають через те, що браузери блокують запити між різними джерелами з міркувань безпеки. Під час розробки React зазвичай працює на localhost:3000, в той час як Django працює на localhost:8000, створюючи перехресний сценарій.

Щоб вирішити проблеми з CORS, переконайтеся, що ви налаштували заголовки CORS у налаштуваннях Django, як описано в розділі "Налаштування заголовків CORS". Після внесення змін перезапустіть ваш сервер Django, щоб вони вступили в силу.

Нижче наведено декілька поширених помилок запитів до API та їх вирішення:

• HTTP 400 (поганий запит): Зазвичай це означає, що деякі необхідні дані відсутні або неправильно сформовані в корисному навантаженні запиту. Наприклад, у листопаді 2023 року FintanMi зіткнувся з помилкою 400 при створенні спільноти в проєкті Django REST Framework і React, оскільки в запиті було відсутнє поле власника. Завжди перевіряйте, що ваш фронтенд надсилає всі необхідні поля, які очікуються моделями Django.
• HTTP 405 (метод не дозволений): Це відбувається, коли кінцева точка API не підтримує використовуваний метод HTTP. Наприклад, FintanMi повідомив про помилку 405 при спробі видалити пост, яка була вирішена шляхом оновлення подання Django з generics.RetrieveUpdateAPIView на generics.RetrieveUpdateDestroyAPIView, щоб включити підтримку запитів DELETE.

Запуск і тестування додатку

Коли ваш бекенд Django і фронтенд React підключені, настав час запустити обидва сервери розробки і протестувати додаток. Це передбачає одночасний запуск двох серверів і перевірку того, що все працює без збоїв.

Запуск серверів розробки

Для запуску вашого Django-React додатку вам знадобиться два вікна терміналу - по одному для кожного сервера. Таке налаштування дозволяє бекенду та фронтенду працювати незалежно, взаємодіючи за допомогою викликів API.

Запуск Django Backend Server:

1. Відкрийте перше вікно терміналу і перейдіть до кореневого каталогу вашого проекту Django.

2. Активуйте віртуальне середовище Python:

   source venv/bin/activate
   

3. Запустіть сервер розробки Django:

   python manage.py runserver
   

   Сервер буде доступний за адресою http://127.0.0.1:8000/.

Запуск React Frontend Server:

1. Відкрийте друге вікно терміналу і перейдіть до каталогу вашого React-проекту:

   cd frontend
   

2. Запустіть сервер розробки React:

   npm start
   

   Це автоматично відкриє вікно браузера за адресою http://localhost:3000/.

Після того, як обидва сервери запущені, ви можете почати тестування функціональності вашого додатку.

Тестування повної функціональності додатку

Коли сервери запущені і працюють, а кінцеві точки CORS і API налаштовані належним чином, настав час перевірити потік даних між фронтендом і бекендом.

Перевірка бекенд API:

• Протестуйте кінцеві точки API Django безпосередньо, відвідавши цю сторінку:

  http://localhost:8000/api/tasks
  

  У вас повинен відобразитися доступний для перегляду інтерфейс API Django REST Framework, де ви можете виконувати операції CREATE і READ.

• Отримайте доступ до інтерфейсу адміністратора Django за адресою:

  http://localhost:8000/admin
  

  Увійдіть за допомогою своїх облікових даних суперкористувача, щоб створювати, редагувати або видаляти завдання. Ви також можете протестувати операції UPDATE і DELETE, відвідавши

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

Тестування інтеграції фронтенд-бекенд:

• Відкрийте ваш React-додаток на http://localhost:3000 і переконайтеся, що він завантажується коректно, відображаючи завдання з бекенду Django.
• Протестуйте кожну CRUD-операцію через інтерфейс React:- Додайте нову задачу і перевірте, чи відображається вона як в інтерфейсі React, так і в бекенді.
  • Відредагуйте існуюче завдання і переконайтеся, що зміни збереглися.
  • Видаліть завдання і перевірте, чи воно зникло з фронтенду та бази даних.

Якщо ваш додаток містить фільтри або інші функції, ретельно протестуйте їх, щоб переконатися, що завдання відображаються належним чином.

Вирішення поширених проблем

Якщо ви зіткнулися з будь-якими проблемами під час тестування, ось кілька найпоширеніших способів їх усунення.

Помилки з'єднання з API:

• Переконайтеся, що обидва сервери працюють на відповідних портах: Django на http://localhost:8000 і React на http://localhost:3000.

• Використовуйте інструменти розробника браузера (вкладка "Мережа") для визначення кодів статусу HTTP, таких як 404 або 500.

• Перевірте налаштування проксі у файлі package.json вашого React-проекту:

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

  Якщо ви внесли зміни, перезапустіть React-сервер.

Проблеми із запуском сервера:

• Якщо сервер Django не запускається, перевірте наявність відсутніх міграцій:

  python manage.py makemigrations python manage.py migrate
  

• Якщо проблеми з сервером React, спробуйте перевстановити залежності:

  npm install
  

Проблеми з потоком даних:

• Використовуйте інструменти розробника браузера для перевірки мережевих запитів та помилок консолі.
• Додайте налагоджувальні оператори, такі як console.log() в React або оператори виводу в Django-візуалізаціях, щоб відстежувати потік даних.
• Перевірте, щоб URL-адреси API у вашому React-додатку точно відповідали шаблонам URL-адрес Django, включно з кінцевими слешами (наприклад, /api/tasks/).

Підсумки та наступні кроки

Ви створили веб-додаток, який поєднує Django і React, що дає вам ґрунтовне уявлення про повностекову розробку. Цей проект висвітлює такі важливі концепції, як відокремлення бекенду від фронтенду, виконання CRUD-операцій та управління перехресними запитами за допомогою налаштувань CORS. Також ви працювали з Django REST Framework для створення API та використовували хуки React для управління станами - навички, які дозволяють легко інтегрувати ці два потужні інструменти.

Виведення вашого додатку на новий рівень

Існує багато можливостей для розширення функціональності вашого додатку. Наприклад, ви можете додати JWT-аутентифікацію за допомогою Django REST Framework, щоб захистити дані користувачів і доступ до API. Це дозволить вам запропонувати користувачеві специфічні функції та персоналізований досвід.

Якщо ваш додаток потребує оновлень в реальному часі, скористайтеся Django Channels, щоб увімкнути підтримку WebSocket. Це ідеально підходить для таких функцій, як живі інформаційні панелі, чат-системи або сповіщення, перетворюючи ваш додаток на більш динамічну та інтерактивну платформу.

По мірі зростання вашого додатку, розширена візуалізація даних стає важливою. Поєднуючи можливості рендерингу React з ефективним бекендом для отримання даних, ви зможете ефективно обробляти та відображати складні набори даних.

Підготовка до виробництва

Готуючи свій додаток до виробництва, зосередьтеся на розгортанні, безпеці та продуктивності. Хоча поточні налаштування чудово підходять для локальної розробки, виробничі середовища вимагають додаткових кроків. Вони включають налаштування змінних середовища, оптимізацію бази даних та впровадження надійних механізмів обробки помилок.

Ці вдосконалення ґрунтуються на навичках, які ви вже розвинули, таких як розробка API, архітектура на основі компонентів та інтеграція повного стеку. Оволодівши цими передовими методами, ви будете добре підготовлені до роботи над проектами корпоративного рівня і продовжуватимете зростати як веб-розробник.

Часті запитання

Які переваги використання Django для бекенда і React для фронтенда при створенні веб-додатків?

Використання Django для бекенда і React для фронтенда створює міцну суміш для розробки сучасних веб-додатків. Django надає надійний фреймворк з інструментами, які спрощують розробку бекенда, в той час як React блищить у створенні динамічних та інтерактивних користувацьких інтерфейсів.

Таке поєднання сприяє чіткому розподілу обов'язків, що допомагає тримати кодову базу організованою та легше розширювати її з часом. Компонентна структура React заохочує повторне використання елементів інтерфейсу, а REST Framework від Django спрощує процес створення API, забезпечуючи безперебійну комунікацію між фронтендом та бекендом. Разом вони пропонують швидкий, ефективний та орієнтований на користувача підхід до розробки додатків.

Як вирішити проблеми CORS при підключенні фронтенду React до бекенду Django?

Для вирішення проблем CORS між фронтендом React та бекендом Django, зручним рішенням є пакет django-cors-headers. Спочатку встановіть його за допомогою pip. Потім у вашому файлі settings.py додайте 'corsheaders' до списку INSTALLED_APPS. Після цього додайте 'corsheaders.middleware.CorsMiddleware' на самий верх списку MIDDLEWARE, щоб забезпечити правильний порядок виконання проміжного програмного забезпечення.

Під час розробки ви можете спростити завдання, встановивши CORS_ORIGIN_ALLOW_ALL = True у вашому settings.py. Це дозволить виконувати запити з будь-якого джерела. Однак у виробничому середовищі набагато безпечніше визначити конкретні довірені домени за допомогою параметра CORS_ALLOWED_ORIGINS. Такий підхід допомагає підтримувати більш високий рівень безпеки.

З такою конфігурацією ваш React-додаток може безперешкодно взаємодіяти з вашими Django API, залишаючись при цьому сумісним з вимогами CORS.

Як я можу підготувати мій Django та React-додаток до розгортання на виробництві?

Щоб підготувати ваш Django і React-додаток до виробництва, почніть з налаштування налаштувань Django для безпечної роботи. Це включає в себе встановлення DEBUG у значення False та вказівку ALLOWED_HOSTS, щоб контролювати, які домени можуть отримати доступ до вашого додатку. Ці зміни є важливими для захисту вашого додатку в реальному середовищі.

Далі виберіть надійну хостингову платформу для вашого бекенду і статичних файлів Django. Переконайтеся, що ваша інфраструктура здатна впоратися з трафіком і вимогами виробничого рівня. Для фронтенду React використовуйте відповідні інструменти для створення оптимізованої виробничої збірки.

Коли ваш React-додаток буде готовий, налаштуйте веб-сервер, наприклад, Nginx, для обслуговування як фронтенду React, так і бекенду Django. Правильна конфігурація сервера гарантує ефективну роботу вашого додатку та безперебійну роботу користувачів.

Перед запуском ретельно протестуйте ваш додаток у виробничому середовищі. Цей крок допоможе виявити і вирішити будь-які проблеми, гарантуючи надійну роботу вашого додатку після його запуску.