Here’s an example page rendered using this integration methodology. Thanks to name spacing in React along with its quite-impressive build tool, getting React content to appear inside a Django-rendered page is as simple as including the css and js optimized build bundles, and including a div in the html body with an id value that matches that specified in your src/index.js file which in this case is,
document.getElementById('reactjs-root'). Note the following:
- the page header and footer are generated by Django
- the Django debug toolbar is present on the righthand sidebar
- the page itself requires authentication which is managed by Django
- the black interior region is React-created content
Furthermore, as you can see from the html source to the right, the React content is being rendered normally, with the optimized css and js bundles created by React’s
npm run build added to the head section of the DOM, and the standard React hook added to the body element.
To verify that the build chain actually works I’ve modified frontend/src/App.js, adding one image and one line of text. Here’s a link to an archived copy of the complete Django template-rendered html that’s summarized on the right side of the illustration below.