ReactJS с Django - реальное использование

Ответ 1

Поскольку вы хотите использовать React вместе с шаблонами Django, я предполагаю, что код React затронет только определенные части вашей страницы. На основе этого предположения написаны следующие пояснения.

Прежде всего, вам не нужно ставить все JS-код в шаблон - на самом деле это будет беспорядок.

Вы можете создать отдельный процесс сборки на основе JS с помощью Webpack (ознакомьтесь с этим способом). Это улучшает ваши возможности кода на стороне клиента, позволяя вам использовать модули CommonJS в браузере, которые вы можете напрямую извлечь из npm, включая React.

Webpack в свою очередь будет генерировать пакет (или несколько пакетов, в зависимости от характера вашего приложения и конфигурации Webpack), которые вам нужно будет включать в ваши шаблоны Django с помощью тегов <script>, как обычно.

Теперь вам нужно сделать вызов React.render(), чтобы сделать ваше приложение React где-то в существующем макете страницы. Вам нужно будет использовать пустой элемент HTML с определенным именем id/class в качестве точки монтирования для приложения.

Но здесь идет оговорка: вы не можете получить доступ к модулям CommonJS непосредственно из шаблонов браузера или Django. Итак, либо вы,

• выведите React и ваше приложение в объект window или
• создать модуль с кодом клей для обработки инициализации приложения и выставить этот метод для объекта window.

В любом случае вам нужно будет вызвать код инициализации непосредственно из шаблонов (проверьте пример кода клея, а вызов для инициализации приложения).

Этот шаг инициализации также позволяет передавать переменные, доступные в шаблонах Django, в JS-код.

Последний шаблон Django будет выглядеть примерно так:

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

И код клея:

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

Я знаю, что все это может показаться подавляющим в начале (даже больше по сравнению с несколькими шагами, которые у вас были с Angular), но, поверьте, он окупится в конечном итоге.

Итак, подводя итог:

• Запись кода React в отдельных файлах JS
• Используйте Webpack (используя модули CommonJS) для связывания кода React
• Включить пакет в ваши шаблоны Django
• Измените код React с помощью кода клея в шаблонах Django

Ответ 2

Что делать, если вы считаете интерфейс и бэкэнд двумя разными независимыми объектами? Я имею в виду следующее:

• Django должен быть только API и отвечать данными json
• Интерфейс должен быть только статическими файлами, обслуживаемыми nginx
• Возможно, вам придется иметь дело с CORS, чтобы обеспечить связь между ними. Один из вариантов заключается в том, чтобы разрешить запросы перед полетом из вашего интерфейса, а другой вариант - настроить прокси-сервер nginx. Это отдельная проблема, и вам нужно найти ее, если вам нужна дополнительная информация.

Я думаю, что эта архитектура позволяет вам разделить вещи и не заниматься их интеграцией. Слишком сложная ситуация в экосистеме frontend/React, поэтому я считаю, что нужно учитывать простоту конфигурации.

Мне также было бы интересно узнать, как процесс развертывания будет искать эту архитектуру (какие инструменты использовать?), поэтому, пожалуйста, добавьте комментарии, если у вас есть предложения, и я обновлю ответ, чтобы предоставить полезную информацию для будущего читатели.

Ответ 3

Я реализовал нечто похожее на то, что вы просите. Мой интерфейс полностью связан с реакцией, которая скомпилирована с помощью webpack, и мои шаблоны создаются в django.

Итак, я делаю следующее: -

• Используйте реактивный маршрутизатор и реагируйте на создание кода .jsx/.js.
• Скомпилируйте с помощью webpack.
• Используйте django-webpack

Итак, django-webpack работает очень хорошо и помогает вам изолировать компиляцию за пределами django, чтобы заставить мысли работать красиво и масштабируемо.