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

Поскольку вы хотите использовать 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