如何将 React 应用程序添加到现有网站

Question

I create a small React application using npx create-react-app my-app . I would like to add this React application to my existing website in a specific <div> .

My website: <div id="reactApp"></div>

In React, I have index.js as

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  //document.getElementById('root')
  document.getElementById('reactApp')
);

reportWebVitals();

Then, I build the application npm run build . It generates the following files (image below) in static folder. Do I need to add all these.css and.js files to my main website to make it work?

Answer 1

Convert your project my-app to a web component and then add it to the other react application (you can add it to any other web application).

More details on how to create web components can be found here https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1