Это текстовый документ, который размечен специальным ситнаксисом для вставки кода в него.

Аутентификация

Это процесс, организованный на сайте, который проверяет, является ли пользователь тем кем он себя представляет серверу.

Это библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов, в частности, для одностраничных приложений. React позволяет разработчикам создавать компоненты, которые могут эффективно обновлять и рендерить при изменении данных.

Джанго фреймворк

Это высокоуровневый веб-фреймворк на языке программирования Python, который позволяет разработчикам создавать веб-приложения быстрее и с меньшими затратами на время благодаря своим мощным инструментам и встроенным функциям. Он был разработан для упрощения разработки сложных веб-сайтов и предоставляет множество «из коробки» функций

Когда следует использовать встроенный стиль, а когда CSS?

Используйте встроенные стили для динамических свойств стилей. Альтернатива CSS обеспечивает больше преимуществ, таких как автоматическое добавление префиксов, улучшенная отладка, медиа-запросы, ключевые кадры.

Мое приложение некорректно отображается на сервере?

Если это не работает, в 99% случаев это проблема конфигурации. Отсутствующее свойство, неправильный порядок вызовов или отсутствующий компонент — серверный рендеринг строго относится к конфигурации. Лучший способ выяснить, что не так, — сравнить свой проект с уже работающей настройкой. Ознакомьтесь с эталонными реализациями по частям.

Я не переношу язык шаблонов Django. Мне обязательно его использовать?

Я думаю, что этот шаблонизатор — лучшее, что когда-либо было, но я знаю, что выбор языка шаблонов — это почти религия. В Django нет ничего, что требовало бы использования языка шаблонов, так что если вы привязаны к Jinja2, Mako или чему-то еще, то это нормально.

Удалить все

ЗАГРУЗКА ...

Содержание

Как создать django проект и настроить его для работы с реактом(react js) ч. 1

03.08.2024

02.10.2025

6 минут

1267

Теги:

Реакт

Бэкенд

Парсер поисковой выдачи серия

Джанго

Питон

Вступление

В этой статье, я покажу тебе, как интегрировать React в Django проект. Идея такой интеграции заключается в том, чтобы дать Джанге отрендерить свои шаблоны, чтобы после этого наше Реакт приложение перехватило отрендеренную страницу и модифицировало её.

Если ты хочешь пропустить базовую установку и настройку, переходи сразу к установке Реакта. Так же ты можешь установить уже готовый базовый проект для этой главы. Если хочешь.

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

Мы начнём с создания главной директории:

mkdir SearchResultParser cd SearchResultParser

Теперь создадим и активируем виртуальное окружение, если для windows то:

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

Если для linux, то:

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

После активации окружения, установим сам django и начнём новый проект. Назовём его Website.

pip install django django-admin startproject Website cd Website

Если всё сделано верно, мы сможем запустить наш базовый проект и убедиться в этом. Вот так:

python ./manage.py runserver

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

Теперь нужно установить парочку новых питоновских пакета, для корректной работы с API нашего сайта. Вот эти пакеты

django-cors-headers: для активации так называемого Cross-Origin Resource Sharing (CORS) для общения React приложения и Django API.
djangorestframework: это Django приложение, которое позволит нам с лёгкостью построить АПИ для нашего сайта.

Установим их и создадим наше первое приложение:

pip install djangorestframework django-cors-headers python ./manage.py startapp Backend

Отредактируй settings.py файл в своём любимом редакторе. В моём случае это будет NeoVim. Теперь подключим приложение Backend к нашему проекту.

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' ]

Создай файл urls.py, для linux:

touch Backend/urls.py

Для windows:

Get-Item Backend/urls.py

Вставь следующий контент в urls.py . Он находится в папке Website:

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)), ]

Мы импортировали роутеры для REST фреймворка и представления из ранее созданного приложения Backend, а потом подключили. А сейчас создадим временную модель, В файле 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

Подключим нашу временную модель к админке django, в файле 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)

Чтобы REST фреймворк работал, ему нужен сериализатор для модели. Он конвертирует django модели в JSON файлы и в таком виде отправляет через запросы. Открой(Создай) файл Backend/serializers.py и вставь следующее содержимое:

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

Последнее, что нам осталось сделать, так это сделать класс-представление для нашей временной модели, BackendModel. Открой файл 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()

Создаём миграции, применяем их, а так же создадим суперпользователя. Он в будущем пригодится:

python ./manage.py makemigrations python ./manage.py migrate python ./manage.py createsuperuser

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

Настало время для создания Frontend приложения. Это приложение и будет содержать наше react приложение. Но сначала нужно создать django приложение, настроить и подключить его. Всё, как всегда:

python ./manage.py startapp Frontend

В файле 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', ]

А в файле Frontend/urls.py подключим представления:

from django.urls import path from .views import main urlpatterns = [ path('', main, name='main') ]

Которое создадим в Frontend/views.py:

from django.shortcuts import render def main(request): return render(request, 'Frontend/app.html')

Теперь создадим шаблон по указанному адресу. И директории тоже:

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

Теперь подключим созданный ранее urls.py файл в Website/urls.py

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

Настало время установить React. Не переживай, это просто если ты знаешь что нужно устанавливать) Зайдём в Frontend приложение и создадим несколько статических директорий там:

cd Frontend mkdir static mkdir static/js #Для скриптов mkdir static/img #Для картинок mkdir static/css # Для стилей mkdir src mkdir src/components # Для ReactJS компонентов

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

На данном шаге настройка и подготовка Frontend приложения Django завершена, перейдём к установке необходимых пакетов для react. Я надеюсь npm уже установлен?

npm init -y

Устанавливай пакеты один за другим. Нам необходимы следующие пакеты:

webpack для объединения всего нашего JS кода
babel для перевода наших JS и CSS файлов в специфичный для каждого отдельного браузера.
react для разработки фронтенда

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 не сможет с этим справиться одновременно.

После установки необходимых пакетов нужно настроить Babel. Создай файл настройки; назови его babel.config.json. И вставь следующий конфигурационный код:

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

Теперь настроим webpack пакет, но сначала создадим настроечный файл. Назови этот файл webpack.config.js. И вставь следующий конфигурационный код:

Теперь, немного пошаманим в файле package.json. Если быть конкретней, то мы добавим два скрипта для управления работой npm:

{ "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 компонент

После того как мы всё настроили давай напишем немного react кода. В папке Frontend/src, создай файл index.js, а в папке Frontend/src/components, создай файл App.js. Теперь вставим временный код в созданный файл 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 />);

Подключим созданный компонент в src/index.js:

import App from './components/App';

И в конце концов, вставим код для нашего шаблонного файла templates/Frontend/app.html:

{% 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>

Теперь всё настроено. Давай проверим работает ли? Запустим сервер django и сервер webpack через ранее созданный скрипт:

python ./manage.py runserver npm run dev

Если всё сделано правильно, ты увидишь что-то вроде этого

Заключение

Всё начинается с того что Django отрисовывает шаблон. После чего React перехватывает эту страницу, находит элемент по id “app” и отрисовывает наш h1 тег. Теперь мы имеем готовый фулстек приложение готовое чтобы его доделали (❁´◡`❁)

Если ты пропустил всё что было выше и хочешь просто готовое-к-использованию решение, то ты можешь скачать его здесь. Это архив с настроенной структурой директорий и готовыми зависимостями. Всё что тебе остаётся сделать, так это скачать, создать виртуальное окружение, установить все необходимые python и npm пакеты.

В следующей статье, я покажу базовую раскладку и интерфейс для нашего проекта. И как её сделать при помощи реакта.

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

Неправильная структура проекта

Ошибка: Неправильная организация каталога проекта, что приводит к путанице и трудностям в управлении кодовыми базами 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 для всех соответствующих маршрутов.

Разработка фронтенда сайта на React с бэкендом на Django | SearchResultParser ч. 2

Следующая статья

Как использовать React с Django API. Django сервер для React сайта, как сделать

Предыдущая статья

Не забудь поделиться, лайкнуть и оставить комментарий)

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

Другое

Использованные термины

Django шаблон ⟶ Это текстовый документ, который размечен специальным ситнаксисом для вставки кода в него.
Аутентификация ⟶ Это процесс, организованный на сайте, который проверяет, является ли пользователь тем кем он себя представляет серверу.
Реакт ⟶ Это библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов, в частности, для одностраничных приложений. React позволяет разработчикам создавать компоненты, которые могут эффективно обновлять и рендерить при изменении данных.
Джанго фреймворк ⟶ Это высокоуровневый веб-фреймворк на языке программирования Python, который позволяет разработчикам создавать веб-приложения быстрее и с меньшими затратами на время благодаря своим мощным инструментам и встроенным функциям. Он был разработан для упрощения разработки сложных веб-сайтов и предоставляет множество «из коробки» функций

Релевантные вопросы

Когда следует использовать встроенный стиль, а когда CSS? Используйте встроенные стили для динамических свойств стилей. Альтернатива CSS обеспечивает больше преимуществ, таких как автоматическое добавление префиксов, улучшенная отладка, медиа-запросы, ключевые кадры.
Мое приложение некорректно отображается на сервере? Если это не работает, в 99% случаев это проблема конфигурации. Отсутствующее свойство, неправильный порядок вызовов или отсутствующий компонент — серверный рендеринг строго относится к конфигурации. Лучший способ выяснить, что не так, — сравнить свой проект с уже работающей настройкой. Ознакомьтесь с эталонными реализациями по частям.
Я не переношу язык шаблонов Django. Мне обязательно его использовать? Я думаю, что этот шаблонизатор — лучшее, что когда-либо было, но я знаю, что выбор языка шаблонов — это почти религия. В Django нет ничего, что требовало бы использования языка шаблонов, так что если вы привязаны к Jinja2, Mako или чему-то еще, то это нормально.