I was working a web page that needed some dynamic parts but most of its content was static and for that reason making a webapp doesn’t sound like the most efficient approach.
It was basically a static web page with 3 dynamic components so i decided to try with React.render
ReactDOM.render(<Component1 />, domEl1);
ReactDOM.render(<Component2 />, domEl2);
ReactDOM.render(<Component3 />, domEl3); this actually works but then i learnt about contexts and redux and this wasn’t simple anymore because these concepts are implemented like container components to create the context
<Context>
<Component1 />
<Component2 />
<Component3 />
</Context>applying this to the solution above
ReactDOM.render(<Context><Component1 /></Context>, domEl1);
ReactDOM.render(<Context><Component2 /></Context>, domEl2);
ReactDOM.render(<Context><Component3 /></Context>, domEl3);I didn’t verify if this works, it simply looks not right. Searching for an answer i found this post which shows how to keep a unique context while rendering each component to its respective node, all done with portals
function Page() {
const portal1 = ReactDOM.createPortal(
<Component1 />,
domEl1
);
const portal2 = ReactDOM.createPortal(
<Component2 />,
domEl2
);
const portal3 = ReactDOM.createPortal(
<Component3 />,
domEl3
);
return (
<Context>
{portal1}
{portal2}
{portal3}
</Context>
)
}
ReactDOM.render(
<Page />,
document.getElementById('root')
)pretty simple and works, now i have to improve the loading placeholders while React loads and load them faster.
