'Gradually add react elements to a Django project using Create React App and yarn build

I have a project using Django as backend and raw HTML, CSS and JS. I have tons of templates and I want to start migrating some parts of the frontend website to React.

I started creating one single landing page in react using the official tutorial and until here everything went well, just a bit tedious having to build and manually move static js and css created to django templates:

  • yarn build
  • go to django static folder and replace minified js and css files by the new ones
  • go to django templates (html) and replace new reference to new files

But then I wanted to create a new independent component not related to the landingpage I created and i culdn't find the best approach to do it without duplicating react create app folder.

The goal is to do yarn build and have one single js and css file per independent element.

For example, if I have: index.js Element1.js Element2.js ...

After doing yarn build, I have:

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

The colser I've been to this, is having in my index.js file one render per independent element, but then it creates only one single js and css file and it requires to have both div ids (elem1 and elem2) in the django template, causing error if one of them is not present:

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

The only single way I could achieve the desired result is duplicating the folder project for each element, meaning duplicating all node modules, src files ... and going in each folder doing yarn build:

enter image description here

Could you please be so kind indicating the best approach? Maybe modifying build command and creating some bash scripts?

Thank you very much!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source