Python Django: Front End на React

---

Предполагается ваше предыдущее знакомство с основами 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().

Читайте также:

• Python Django и OSRM: маршрут на интерактивной онлайн-карте
• Django REST Framework: REST API на Python с нуля
• Python Django: контактная форма с автоматической отправкой Email

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Dibya Darshan Khanal: How to Integrate React App with Django