0

I'm struggling with determining the best route to integrate various components of a single React 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.

See the attached image. Dark green sections will be React. The rest is a traditional PHP page pulling in content from a CMS.

I'm trying to figure out the best strategy for the React portion.

Should I have multiple renders each going to an appropriate div?

ReactDOM.render(<Section2 />, document.getElementById("react-app-div1"));
ReactDOM.render(<Section1 />, document.getElementById("react-app-div2"));

Since the React elements will all be sharing similar info, am I looking at Redux or Context API to manage that information?

Or is there a better way? Is this antithetical to React, and I should just get all the markup into the React app itself?

I hope this question makes sense.

image of sample layout

Tamara Koliada
  • 1,200
  • 2
  • 14
  • 31
xpersonas
  • 227
  • 3
  • 9
  • This answer might help you: https://stackoverflow.com/a/31303179/784060 – Joshua Vega Feb 22 '19 at 17:09
  • Yes thank you. As far as state, what would be the recommendation? A choice made in will influence
    . Would this be where Redux comes in? Or possibly React's Context API?     – xpersonas Feb 22 '19 at 18:04

0 Answers0