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 и создать мощное приложение, в котором данные будут передаваться между клиентской и серверной частями в режиме реального времени.
