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

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



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



Прямо сейчас у меня просто есть это в моем шаблоне 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 Bootstrap , но кажется, что единственный разумный способ сделать это-с npm. Так что пришло время переключиться, но я не совсем уверен, как это сделать.



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



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


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

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

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

542   2  

2 ответов:

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

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

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

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

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

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

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

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

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

Тогда bundle.js теперь содержит весь код JavaScript React и react-bootstrap, а также исходный код myapp.js.

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

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

11  
2015-04-18 04:41:27

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

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

Пока что решение, которое я знаю, таково:

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

0  
2017-05-06 17:56:53

Comments

    Ничего не найдено.
Click here to cancel reply.