Как подключить ReactJS 18 версии к API на Django REST Framework: полное руководство

19.03.2023

0 586 1 minute read

ReactJS 18 — это последняя версия фреймворка для создания интерактивных пользовательских интерфейсов, а Django REST Framework — мощный инструмент для создания API на Python. В этой статье мы рассмотрим, как подключить ReactJS 18 к API на Django REST Framework.

Настройка Django REST Framework: мы рассмотрим, как создать Django проект, настроить базу данных и установить Django REST Framework.
Создание API: мы научимся создавать API на Django REST Framework для получения данных в формате JSON.
Настройка ReactJS 18: мы расскажем о том, как создать новый проект на ReactJS 18, установить необходимые зависимости и настроить его для работы с Django REST Framework.
Создание интерфейса: мы научимся создавать интерфейс с помощью ReactJS 18, который будет взаимодействовать с API на Django REST Framework.

Примеры кода:

Настройка Django REST Framework:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
}

Создание API:

from rest_framework import generics
from .models import MyModel
from .serializers import MyModelSerializer

class MyModelList(generics.ListCreateAPIView):
    queryset = MyModel.objects.all()
    serializer_class = MyModelSerializer

class MyModelDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = MyModel.objects.all()
    serializer_class = MyModelSerializer

Настройка ReactJS 18:

import { createServer } from 'miragejs';

createServer({
  routes() {
    this.namespace = '/api';
    this.get('/mymodels', () => ({
      mymodels: [
        { id: 1, name: 'My Model 1' },
        { id: 2, name: 'My Model 2' },
        { id: 3, name: 'My Model 3' },
      ],
    }));
  },
});

Создание интерфейса:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/mymodels').then(response => {
      setData(response.data.mymodels);
    });
  }, []);

  return (
    <div>
      <h1>My Models</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

С помощью этой статьи вы сможете быстро и легко подключить ReactJS 18 к API на Django REST Framework и создать мощное приложение, в котором данные будут передаваться между клиентской и серверной частями в режиме реального времени.