Добавление реакции внутри проекта Django

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

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

Прямо сейчас у меня есть это в моем шаблоне Django:

<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>

И myapp.js имеет весь код React. Я знаю, что на самом деле это не взрослый современный способ JS делать вещи.

Теперь я хочу использовать React Bootstrap, но кажется, что единственный разумный способ сделать это - npm. Поэтому пришло время сделать переключатель, но я не совсем уверен, как это сделать.

Я запускал npm install react и npm install react-bootstrap из моего каталога static/js в Django. Это создало папку node_modules с различными файлами внутри.

Итак, три вопроса от путаного новичка:

  • Где я должен поместить код React для работы с этими модулями npm (следует ли использовать var React = require('react')?
  • Нужно ли мне каким-то образом скомпилировать этот код (используя webpack?)
  • Как мне интегрировать это с Django? Должен ли я скомпилировать все это в myapp.js и просто включить это в свой HTML-шаблон?

Ответы

Ответ 1

Я тоже делаю то же самое прямо сейчас - удаляюсь от встроенных тегов HTML script в require land. Вот учебник, который я следую, и вот моя файловая система пока. Я делаю это в Node, но он не должен отличаться для проекта Django, поскольку код внешнего интерфейса React отделен от любого внешнего сервера, кроме URL-адреса API.

Ваша папка node_modules содержит react-bootstrap. В myapp.js используйте require('react-bootstrap') для загрузки библиотеки, которая содержится в вашей папке node_modules.

  • Где я должен поместить код React для работы с этими модулями npm (следует ли использовать var React = require ('response')?

Вы можете поместить код в любом месте. Если ваша файловая система выглядит так:

project/
  react/
    myapp.js
  node_modules/
    react source code
    react bootstrap stuff

Тогда вы можете просто сделать var React = require('react'); в myapp.js.

  1. Мне нужно каким-то образом скомпилировать этот код (используя webpack?)

Да, я бы посоветовался с учебником по webpack, который я связал ранее, он должен объяснить, как скомпилировать весь ваш код React в один bundle.js. Здесь также есть еще один хороший учебник. Этот файл bundle.js содержит весь исходный код вашего requires. Поэтому, если ваш myapp.js выглядит примерно как

var React = require('react');
var ReactBootstrap = require('react-bootstrap');

то bundle.js теперь содержит все JavaScript-код React и response-bootstrap вместе с исходным кодом myapp.js.

  1. Как мне интегрировать это с Django? Должен ли я скомпилировать все это в myapp.js и просто включить это в свой HTML-шаблон?

Я только делал работу над Nodejs, но мой код React до сих пор не коснулся какого-либо кода Node, и я не думаю, что он коснется любого кода Django (опять же я никогда не делал Django, поэтому я может быть неправильным). Все, что вам нужно сделать, это скомпилировать с помощью webpack, который выплевывает bundle.js. Вы помещаете это bundle.js в свой HTML и загружаете myapp.js.

Ответ 2

Код ReactJS по-прежнему является JS-кодом. Несмотря на то, что при кодировании требуется синтаксис /import/other module based, в браузере вы по-прежнему загружаете JS-код тегом script.

Проблема заключается в том, как разрешить script, сгенерированный webpack (bundle.js), работать с другим "VanillaJS" script. Например, если вы только пишете отдельный компонент, используя React, как небольшую таблицу. И его данные (реквизит/состояние) будут зависеть от другого элемента/события, написанного в VanillaJS, например, для прослушивателя кликов при визуализации кнопки с помощью шаблона django. Тогда возникает вопрос, как они общаются друг с другом.

До сих пор я знаю:

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