Я немного побеспокоился с React, и мне это очень нравится. Это гораздо более подробный, чем Angular (ng-repeat с | фильтром бесценен), но хорошо.
Вещь, которая меня раздражает, заключается в том, как я должен использовать React с шаблонами Django. Должен ли я помещать все javascript в шаблоны вместе с разметкой "HTML".
Реализация Angular была довольно плавной. Я просто добавил некоторые атрибуты в класс формы /django form, а затем написал javascript в отдельном файле. Включите этот файл и сделайте это.
Как "использовать" реагировать? Каков правильный путь?
Спасибо заранее!
Поскольку вы хотите использовать 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), но, поверьте, он окупится в конечном итоге.
Итак, подводя итог:
{{ form.as_p }}
, даже если вы добавите атрибуты в поля, как в Angular. В этом контексте форма Django будет служить вам только для проверки стороны сервера данных.
Что делать, если вы считаете интерфейс и бэкэнд двумя разными независимыми объектами? Я имею в виду следующее:
Я думаю, что эта архитектура позволяет вам разделить вещи и не заниматься их интеграцией. Слишком сложная ситуация в экосистеме frontend/React, поэтому я считаю, что нужно учитывать простоту конфигурации.
Мне также было бы интересно узнать, как процесс развертывания будет искать эту архитектуру (какие инструменты использовать?), поэтому, пожалуйста, добавьте комментарии, если у вас есть предложения, и я обновлю ответ, чтобы предоставить полезную информацию для будущего читатели.
Я реализовал нечто похожее на то, что вы просите. Мой интерфейс полностью связан с реакцией, которая скомпилирована с помощью webpack, и мои шаблоны создаются в django.
Итак, я делаю следующее: -
Итак, django-webpack работает очень хорошо и помогает вам изолировать компиляцию за пределами django, чтобы заставить мысли работать красиво и масштабируемо.