React.js merging with html

Question

Me and my friend are currently working on a small project, we are just starting our journey as programmers and have intermediate knowledge of html, CSS and JavaScript. In our project we want to develop a chat system as a part of our project we found a Udemy course on that but it uses react as the technology I wanted to ask that can we create one webpage in html and other in react and merge them as a single website?

Answer 1

I wanted to ask that can we create one webpage in html and other in react and merge them as a single website?

Yes, you can do that, for two reasons:

1. Separate pages of a site can use completely different client-side libraries, frameworks, etc. if you want (or none at all), and

2. More importantly: You can use React for only one part of a page. You tell React what DOM element to mount its top-level component in. It doesn't have to be document.body (in fact, it often isn't). Typically this is done via the ReactDOM.render call — the second argument says what element to put the top-level React component in.

Answer 2

You can put multiple react components in different <div> you assigned with existing html, css and js content.

 const App1 = () => ( <div> <h2>The React App 1</h2> </div> ); const App2 = () => ( <div> <h2>The React App 2</h2> </div> ); ReactDOM.render(<App1 />, document.querySelector("#react-app-1")); ReactDOM.render(<App2 />, document.querySelector("#react-app-2"));

 body { background: #20262E; padding: 20px; font-family: Helvetica; color: #fff; }.react-app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react-app-1" class="react-app"></div> <div> <h2>What is Lorem Ipsum?</h2> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="react-app-2" class="react-app"></div>