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().