Постепенное добавление элементов react в проект Django с помощью Create React App и yarn build

У меня есть проект, использующий Django в качестве бэкенда и необработанный HTML, CSS и JS. У меня есть тонны шаблонов, и я хочу начать перенос некоторых частей фронтенд-сайта на React.

Я начал создавать одну единственную целевую страницу на react, используя официальный учебник. и до этого момента все шло хорошо, только немного утомительно было создавать и вручную перемещать статические js и css, созданные в шаблонах django:

  • yarn build
  • перейдите в папку django static и замените минифицированные js и css файлы новыми
    • .
  • перейдите в django templates (html) и замените новые ссылки на новые файлы

Но потом я захотел создать новый независимый компонент, не связанный с созданной мной целевой страницей, и не нашел лучшего способа сделать это без дублирования папки react create app.

Цель состоит в том, чтобы сделать yarn build и иметь один единственный js и css файл на независимый элемент.

Например, если у меня есть: index.js Element1.js Element2.js ...

После выполнения сборки пряжи, у меня есть:

build/
     static/
            css/
                elem1.54aa3f3f.css
                elem2.jsby6syb.css
            js/
                elem1.54aa3f3f.js
                elem2.jsby6syb.js

Кольза, к которой я пришел, имеет в моем index.js файле по одному рендеру на независимый элемент, но тогда он создает только один единственный js и css файл и требует наличия обоих идентификаторов div (elem1 и elem2) в шаблоне django, вызывая ошибку, если один из них не присутствует:

ReactDOM.render(
  <React.StrictMode>
    <elem1 />
  </React.StrictMode>,
  document.getElementById("elem1")
);
ReactDOM.render(
  <React.StrictMode>
    <elem2 />
  </React.StrictMode>,
  document.getElementById("elem2")
);

Единственный способ, которым я могу достичь желаемого результата - это дублирование папки project для каждого элемента, то есть дублирование всех модулей node, src файлов ... и заход в каждую папку с помощью yarn build:

enter image description here

Не могли бы вы быть так любезны и указать лучший подход? Может быть, модификация команды build и создание некоторых bash скриптов?

Большое спасибо!

Вернуться на верх