如何在现有网站上添加 React Js？

Question

所以 reactjs.org 有一个很好的教程，介绍如何通过将 react js 代码添加为脚本来将 react js 添加到现有网站HERE。这对我来说效果很好。我的疑问是我们如何处理从 npm 下载的组件？（例如：react-router、react-bootstrap 等） js，但是我们如何安装这些组件或获取它们的脚本文件，就像我们得到 react 脚本文件一样？

Answer 1

该过程将类似于 React 站点上描述的过程。在他们的示例中，他们实现了一个简单的单组件 ( <LikeButton />) 应用程序，没有外部依赖项。要使用外部组件/模块，您需要将它们捆绑到您的应用程序中，或者将它们作为脚本加载。

首选方法

首选方法是使用诸如 webpack、parcel 或类似的打包器将您的代码和模块打包到单个脚本中。

1. 创建您的app.js文件，使用imports 加载外部组件

   import React from 'react';
   import Button from '@material-ui/core/Button';
   
   const LittleApp = () => (
     <Button variant="contained" color="primary">
       Hello World
     </Button>
   );
   
   ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));
   
   

2. 使用 webpack、parcel 或类似工具将它们捆绑app.js到一个bundled.js文件中

3. 将bundled.js文件加载到您的页面中

替代方法

还可以使用<script>标签中的通用模块定义 (UMD) 文件加载某些组件。这可能适用于简单的附加应用程序，但在大多数情况下可能不推荐。我倾向于仅在原型设计想法或在 Stack Overflow 上演示解决方案时使用这些。

像这样的东西：

import React from 'react';
import Button from '@material-ui/core/Button';

const LittleApp = () => (
  <Button variant="contained" color="primary">
    Hello World
  </Button>
);

ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

const LittleApp = () => {
  return (
    <div>
      <MaterialUI.Button variant="contained" color="primary">
        Hello World
      </MaterialUI.Button>
    </div>
  )
}

ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

Answer 2

<script>我认为您也可以使用添加这些库。反应路由器：<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>

反应引导：<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin />

检查相应库的文档。