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

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!

Comments

[Clay Murray]

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]

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

[SteerClear90]

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]

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]

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

[Clay Murray]

Hell yeah! Glad I could help

[Henry Quinn]

React "app" or "component"?

[SteerClear90]

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