Wrap existing HTML content in a React layout

shanemgrey 0
Viewed 31

I have a complex application serving almost everything from Django templates which render server side and result in HTML by the time React starts.

Everything, including the main content area should be styled and positioned by JS and CSS which I've done in React with MUI.

It's a typical responsive, mobile first, application menu layout with the sidebar to the left of the content on large viewports. This is what it would look like in HTML.

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="header"><!-- Header generated in React --></div>
  <div>
      <div id="sidebar"><!-- Sidebar generated in React --></div>
      <div id="main">{{ HTML Content Passed Through }}</div>
  </div>
  <div id="footer">{{ HTML Footer Passed Through }}</div>
</body>

Everything should be styled by react using CSS in JS through the MUI component library and style system.

The standard index.html in a 'create-react-app' generated project has just a single root. The layout works perfectly when done this way because the App.js pulls various components together to render everything.

But I haven't figured out how to retain and wrap the server rendered content with style and positioning.

How can I include the existing HTML content so that react will control the styling and positioning of everything?

Please ask clarifying questions if I failed to include useful details. Thank you.

material-ui templates django reactjs
1 Answers

I was unable to find a way of doing this in react. So I did the layout in pure css and added just enough JS to do a sliding left menu.

React could then be loaded and attach to the header and sidebar areas individually, while the django content block was able to fill the main area.

In this way there was no need for the javascript to "leave room" or "wrap" the html that would come in from django.

shanemgrey0
Related