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

Question

我使用npx create-react-app my-app创建了一个小型 React 应用程序。 我想将此 React 应用程序添加到我现有网站的特定<div>中。

我的网站： <div id="reactApp"></div>

在 React 中，我有 index.js 作为

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();

然后，我构建应用程序npm run build 。 它在 static 文件夹中生成以下文件（下图）。 我是否需要将所有这些.css 和.js 文件添加到我的主网站以使其正常工作？

Answer 1

将您的项目 my-app 转换为 web 组件，然后将其添加到其他 React 应用程序（您可以将其添加到任何其他 web 应用程序）。

有关如何创建 web 组件的更多详细信息，请参见https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1