Источник: Nuances of Programming
Предполагается ваше предыдущее знакомство с основами Python-фреймворка Django и JavaScript-фреймворка React. Если вы впервые устанавливаете Django или React, то сперва прочитайте указанные в окончании руководства статьи.
1. Создание проекта Django
Начнем с нового виртуального окружения. Создайте папку внутри базового каталога, затем установите виртуальную среду при помощи следующей команды:
virtualenv env
Активация виртуального окружения на Windows:
Source env/Scripts/activate
А также на Linux и macOS:
source env/lib/activate
Пришло время следующей командой установить Django как Python-пакет:
pip install django
Теперь создайте проект Django, назовите его Backend:
django-admin startproject Backend
3. Создание приложения React
После инициализации Django-проекта необходимо создать приложение React в том же каталоге (точнее, в базовом каталоге). Для начала установите в систему Node.js.
После успешной установки Node.js на вашей платформе, выполните следующую команду для создания нового React-приложения:
npx create-react-app frontend
Когда создастся фронтенд-приложение, запускайте:
npm run build
Вышеизложенная команда создает директорию с главным файлом фронтенд-приложения index.html, также в директории будут храниться статические элементы, изображения и некоторые необходимые для работы json-файлы.
3. Настройка Django для совместной работы с React
Теперь пришло время настроить конфигурацию бэкенда, то есть, проекта Django. В файле settings.py должна быть указана константа TEMPLATES:
import os
TEMPLATES = [
...
]
А внутри константы TEMPLATESсодержится список директорий, DIRS:
TEMPLATES = [
‘DIRS’: [
os.path.join(BASE_DIR, ‘frontend/build’)
]
]
Также сообщите приложению Django, что нужно отрисовывать шаблоны из React-приложения frontend: добавьте в самый конец файла конфигурации Django settings.py следующее:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘frontend/build/static’)
]
Работа с файлом settings.py завершена, теперь нужно указать правильный URL доступа к странице на основе шаблона index.html. Создайте файл views.py в директории проекта или приложения Django, напишите в нем следующую функцию:
from django.http import request
from django.shortcuts import render
def index(request):
return render(request, ‘index.html’)
Следом добавьте соответствующий представлению путь в список urlpatterns из файла urls.py:
from .views import index
urlpatterns = [
path('', index),
path('admin/', admin.site.urls)
]
Все готово, запускайте проект или приложение Django с помощью команды:
python3 manage.py runserver
В результате ваших трудов веб-приложение работает на Django в части backend, но на React — в части frontend. Для изменения прелоадера React-приложения смените HTML внутри App.js, который находится сразу после return().
Читайте также:
Перевод статьи Dibya Darshan Khanal: How to Integrate React App with Django