Как создать простой проект на Django DRF и React

Создание веб-приложения на Django DRF и React может показаться сложной задачей, но если разбить процесс на шаги, он становится вполне понятным. В этой статье мы создадим базовый проект, где бэкенд работает на Django DRF, а фронтенд — на React.

1. Настройка Django DRF (бэкенд)

Установка Django и Django REST Framework

Создадим виртуальное окружение и установим нужные зависимости:

python -m venv venv
source venv/bin/activate  # Для Linux/Mac
venv\Scripts\activate  # Для Windows
pip install django djangorestframework

Создание Django-проекта

django-admin startproject backend
cd backend
python manage.py startapp api

Добавляем в settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'api',
]

Создание модели и API

Редактируем models.py:

from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

Применяем миграции:

python manage.py makemigrations
python manage.py migrate

Создаем serializers.py:

from rest_framework import serializers
from .models import Item

class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = '__all__'

Создаем views.py:

from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer

class ItemViewSet(viewsets.ModelViewSet):
    queryset = Item.objects.all()
    serializer_class = ItemSerializer

Добавляем маршруты в urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from api.views import ItemViewSet

router = DefaultRouter()
router.register(r'items', ItemViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Запускаем сервер:

python manage.py runserver

Бэкенд готов! Теперь создадим фронтенд на React.

2. Настройка React (фронтенд)

Создание React-проекта

В корне создаем фронтенд:

npx create-react-app frontend
cd frontend
npm install axios react-router-dom

Создание API-запросов

Создадим src/api.js:

import axios from 'axios';

const API_URL = 'http://127.0.0.1:8000/api/items/';

export const getItems = async () => {
    const response = await axios.get(API_URL);
    return response.data;
};

Компонент списка элементов

Создадим src/components/ItemList.js:

import React, { useEffect, useState } from 'react';
import { getItems } from '../api';

const ItemList = () => {
    const [items, setItems] = useState([]);
    
    useEffect(() => {
        getItems().then(data => setItems(data));
    }, []);

    return (
        <div>
            <h2>Items List</h2>
            <ul>
                {items.map(item => (
                    <li key={item.id}>{item.name}: {item.description}</li>
                ))}
            </ul>
        </div>
    );
};

export default ItemList;

Настройка маршрутов

Редактируем src/App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ItemList from './components/ItemList';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<ItemList />} />
            </Routes>
        </Router>
    );
};

export default App;

Запуск React-приложения

npm start

Теперь фронтенд и бэкенд работают вместе. Вы можете развернуть их на сервере и использовать для создания более сложных приложений!