ReactJS з Django - реальне використання

Я трохи возився з React, і мені це дуже подобається. Це набагато детальніше, ніж Angular (ng-повторення з | фільтром безцінне), але добре.

Річ, яка мене хвилює, полягає в тому, як я повинен використовувати React із шаблонами Django. Чи слід розміщувати весь javascript у шаблонах разом із розміткою "HTML".

Реалізація Angular була досить простою. Я просто помістив деякі атрибути в шаблон / шаблон форми django, а потім написав javascript в окремий файл. Включіть цей файл, і все готово.

Як "використати" реакцію? Який правильний шлях?

Спасибі заздалегідь!

Оскільки ви хочете використовувати React разом із шаблонами Django, я припускаю, що код React впливатиме лише на певні частини вашої сторінки. Наступні пояснення написані на основі цього припущення.

Перш за все, вам не потрібно розміщувати весь шаблон JS у шаблоні - насправді це було б безлад.

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

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

Тепер вам потрібно React.render()зателефонувати, щоб зробити програму React десь у існуючому макеті сторінки. Вам потрібно буде використовувати порожній елемент HTML із певним іменем / класом як точку монтування програми.

Але тут є застереження: ви не можете отримати доступ до модулів 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), але, повірте, це довго окупається.

Отже, підсумовуючи:

1. Напишіть код React в окремі файли JS
2. Використовуйте Webpack (використовуючи модулі CommonJS), щоб об’єднати ваш код React
3. Включіть набір у ваші шаблони Django
4. Візуалізуйте код React, використовуючи клейовий код у шаблонах Django

Що, якби ви розглядали інтерфейс та серверну систему як дві різні незалежні сутності? Я маю на увазі наступне:

1. Django повинен бути лише API і відповідати json-даними
2. Інтерфейс повинен бути лише статичними файлами, що обслуговуються nginx
3. Можливо, вам доведеться мати справу з CORS , щоб дозволити спілкування між ними. Одним із варіантів було б дозволити передпольотні запити з вашого інтерфейсу, а іншим варіантом було б встановити проксі-сервер nginx. Це окреме питання, і вам потрібно його шукати, якщо вам потрібна додаткова інформація.

Я думаю, що ця архітектура дозволяє тримати речі окремо і не мати справу з їх інтеграцією. В екосистемі frontend / React справи вже занадто складні, тому я думаю, що потрібно враховувати простоту конфігурації.

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

Я реалізував щось подібне до того, про що ви просите. Мій інтерфейс повністю на реакторі, який компілюється за допомогою webpack, а мої шаблони створюються в django.

Тому я роблю наступне: -

1. Використовуйте response-router та реагуйте на створення коду .jsx / .js.
2. Скомпілюйте за допомогою webpack.
3. Використовуйте django-webpack

Отже, django-webpack працює дуже добре і допомагає вам ізолювати компіляцію поза django, щоб отримати думки, які працюють у приємній та масштабованій формі.