Интеграция React приложения в Django проект

Вступление

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

mkdir SearchResultParser
cd SearchResultParser    

python -m venv .venv
source ./.venv/Scripts/activate

python -m venv .venv
.venv\Scripts\Activate.ps1    

pip install django
django-admin startproject Website
cd Website

./manage.py runserver

Создание Backend приложения

pip install djangorestframework django-cors-headers

./manage.py startapp Backend

nvim Backend/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'Backend.apps.BackendConfig',
]

MIDDLEWARE = [
    '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',
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

touch Backend/urls.py           

Get-Item Backend/urls.py           

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from Backend import views

router = routers.DefaultRouter()
router.register(r'results', views.BackendModelView, 'result')

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

nvim Backend/models.py

from django.db import models

class BackendModel(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField()

    def _str_(self):
        return self.title

nvim Backend/admin.py

from django.contrib import admin
from .models import  BackendModel

class BackendModelAdmin(admin.ModelAdmin):
    list_display = ('title', 'description')

admin.site.register(BackendModel, BackendModelAdmin)

touch Backend/serializers.py           

Get-Item Backend/serializers.py           

nvim Backend/serializers.py

from rest_framework import serializers
from .models import BackendModel

class BackendModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = BackendModel
fields = ('id', 'title', 'description')

nvim Backend/views.py

from django.shortcuts import render
from rest_framework import viewsets
from .serializers import BackendModelSerializer
from .models import  BackendModel

class BackendModelView(viewsets.ModelViewSet):
    serializer_class = BackendModelSerializer
    queryset = BackendModel.objects.all()

./manage.py makemigrations

./manage.py migrate

./manage.py createsuperuser

Создание Frontend приложения

./manage.py startapp Frontend

nvim Website/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'Backend.apps.BackendConfig',
    'Frontend.apps.FrontendConfig',
]

MIDDLEWARE = [
    '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',
    'corsheaders.middleware.CorsMiddleware',
]

touch Frontend/urls.py           

Get-Item Frontend/urls.py           

nvim Frontend/urls.py

from django.urls import path
from .views import main

urlpatterns = [
    path('', main, name='main')
]

nvim Frontend/views.py

from django.shortcuts import render

def main(request):
    return render(request, 'Frontend/app.html')

mkdir Frontend/templates

mkdir Frontend/templates/Frontend

touch Frontend/templates/Frontend/app.html           

Get-Item Frontend/templates/Frontend/app.html           

nvim Website/urls.py

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from Backend import views

router = routers.DefaultRouter()
router.register(r'results', views.BackendModelView, 'result')

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

Установка и настройка React

cd Frontend
mkdir static

mkdir static/js

mkdir static/img

mkdir static/css

mkdir src
mkdir src/components

Почему я не добавил Frontend директорию в static, как это обычно делают? Дело в том, что наш сайт может содержать несколько приложений и чтобы у все их был доступ к реакту мы не создаём данную директорию.

npm init -y

npm i webpack webpack-cli --save-dev ;
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev ;
npm i react react-dom --save-dev ;
npm install @babel/plugin-proposal-class-properties ;
npm install react-router-dom;

Не пытайся объединить все команды из оболочки в одну. Node.js не сможет с этим справиться одновременно.

touch babel.config.json           

Get-Item babel.config.json           

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "10"
                }
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

touch webpack.config.js           

Get-Item webpack.config.js           

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/js"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "prod": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/preset-react": "^7.24.7",
    "babel-loader": "^9.1.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "react-router-dom": "^6.25.1"
  }
}

Создавая первый react компонент

touch src/index.js;
touch src/components/App.js;           

Get-Item src/index.js
Get-Item src/components/App.js           

import React from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
    return <h1>Rendered by Django, cooked by React</h1>;
};

export default App;

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

import App from './components/App';

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React with Django</title>
</head>
<body>
    <div id="app"></div>
    <script src="{% static 'js/main.js' %}"></script>
</body>
</html>

./manage.py runserver

npm run dev

Заключение

Общие ошибки, баги и недоразумения

• Неправильная структура проекта
  Ошибка: Неправильная организация каталога проекта, что приводит к путанице и трудностям в управлении кодовыми базами React и Django.
  Решение: Поддерживайте четкую и логичную структуру каталогов. Храните код для фронтенда и бэкенда в отдельных каталогах.
• Игнорирование проблем CORS
  Ошибка: Игнорирование настроек Cross-Origin Resource Sharing (CORS), что может привести к блокировке запросов.
  Решение: Настройте проект Django для обработки CORS. Используйте django-cors-headers, чтобы разрешить определенные источники запросов.
• Непоследовательная конфигурация среды
  Ошибка: Наличие конфликтующих или непоследовательных конфигураций среды, что приводит к проблемам в сборках разработки и производства.
  Решение: Убедитесь, что переменные среды определены последовательно. Используйте такие инструменты, как dotenv , для управления переменными среды как в React, так и в Django.
• Неправильная обработка статических файлов
  Ошибка: Неправильная настройка обработки статических файлов, что может привести к проблемам при обслуживании ресурсов React в Django.
  Решение: Правильно настройте Django для обслуживания статических файлов и убедитесь, что ресурсы React размещены в каталоге, который Django может обслуживать.
• Игнорирование конфликтов маршрутизации на стороне клиента
  Ошибка: Игнорирование потенциальных конфликтов между механизмами маршрутизации Django и React Router, что приводит к неработоспособным ссылкам или неправильной маршрутизации.
  Решение: Делегируйте клиентскую маршрутизацию React Router и убедитесь, что Django обслуживает приложение React для всех соответствующих маршрутов.

Внешние ссылки