title: How to Layout a Page w/ Multiple ReactJs Components on a Traditional Webpage
body: <p>I'm struggling with determining the best route to integrate various components of a single <code>React</code> app on a page within my traditional website. I've worked with React a bit, but they have always been self-contained pieces of content (meaning it fits nicely in one div in the HTML). But now I have a page where I need to sprinkle React into different sections. And each React piece will share various data.</p>
  
  <p>See the attached image. Dark green sections will be <code>React</code>. The rest is a traditional <code>PHP</code> page pulling in content from a <code>CMS</code>.</p>
  
  <p>I'm trying to figure out the best strategy for the <code>React</code> portion.</p>
  
  <p>Should I have multiple renders each going to an appropriate div?</p>
  
  <pre><code>ReactDOM.render(&lt;Section2 /&gt;, document.getElementById("react-app-div1"));
  ReactDOM.render(&lt;Section1 /&gt;, document.getElementById("react-app-div2"));
  </code></pre>
  
  <p>Since the React elements will all be sharing similar info, am I looking at <code>Redux</code> or <code>Context API</code> to manage that information?</p>
  
  <p>Or is there a better way? 
  Is this antithetical to React, and I should just get all the markup into the React app itself?</p>
  
  <p>I hope this question makes sense.</p>
  
  <p><a href="https://i.stack.imgur.com/YwWGU.gif" rel="nofollow noreferrer">image of sample layout</a></p>