SteerClear90

Posted on Jun 27, 2019

How can a react app be rendered in different non react webpages?

#react

I have a react app that does not include redux. The react app only has a small chatbox window that opens up in a modal. I want to render this react app in a few non-react websites some of which use normal js and some use jQuery. How can it be included?

My application is using webpack and babel. I am not using redux.

I am new to React and newer to this community. Thanks for helping!

Top comments (8)

Clay Murray • Jun 27 '19 • Edited

Just need to wrap your React code with some exported functions to set it up. I explored it a bit in something I wrote here: dev.to/dropconfig/using-react-with... but that's with another framework. With jquery you can still do it.

You will want your entrypoint for webpack to be the main script file.

And then you can include it in your html with a script tag.

And the hooks we'll have in our index.js (or whatever it gets named)

import MyReactComponent from "./MyReactComponent";

function init(node){
  ReactDOM.render(<MyReactComponent />, node);
}

window.initMyReactThing = init;

Then our Jquery can mount it

const reactParent = $("#react-parent");

initMyReactThing(reactParent[0])

SteerClear90 • Jun 27 '19

Got what you meant. Let me try it over the weekends. Thanks for giving me a direction.

SteerClear90 • Jun 27 '19

I can think of a couple of ways but what according to you would be the best practice to transfer data to and fro?

Clay Murray • Jun 27 '19 • Edited

Oh if you rename init to render and pass whatever props you want and react should re-render properly.

function render(node, props){
   ReactDOM.render(<MyReactComponent  {...props} />, node);
}

then any change in jquery

renderMyReactThing(reactParent[0], {some: "data"});

SteerClear90 • Jun 27 '19

I just tried out with my bundle.js file and seems to work well. Thanks a lot!!

Clay Murray • Jun 27 '19

Hell yeah! Glad I could help

Henry Quinn • Jun 27 '19

React "app" or "component"?

SteerClear90 • Jun 27 '19

I am creating a bundle of my react project. Hence, mentioned it as app and not as a component. Hope I made sense!

DEV Community

How can a react app be rendered in different non react webpages?

Top comments (8)

Read next

React Memo vs useMemo

2024 Cheat Sheet Collection

Switch Vs. If else

Essential React js Shorthand Techniques