Add React app build to my existing website div

Question

Is it possible to add a build index.html of a React app to a div in my HTML/ColdFusion website?

I built a chatbot in React using hooks. Bellow is my App.js which imports my ChatBot.js component.

import './App.css';
import MyChatBot from './ChatBot';

function App() {
  return (
    <div className="App">
      <MyChatBot/>
    </div>
  );
}

export default App;

It is working. I have a ColdFusion/HTML website where I would like to include this "chatbot" or the generated index.html from npm run build to a div

<!-- ColdFusion Website here --->
<div id="myChatBot"></div>

The idea is to have the React application inside that div. Is it possible?

Thank you.

Answer 1

Yes, you can. You just need to pass the element ( where you want to mount the react app ) to ReactDOM.render method. Then bundle your react app using a bundler, say webpack, and include that bundle via script tag or via the current build process in your app's html.

HTML

<!-- Website Markup --->
<div id="myChatBot"></div>

<!-- Include React bundle --->
<script src="bundle.js"></script>

React

import ReactDOM from "react"
import App from "./App"

ReactDOM.render(<App/>, document.getElementById("myChatBot"))