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

Question

因此 reactjs.org 有一个很好的教程，介绍如何将 React js 添加到现有网站 HERE通过将 react js 代码添加为脚本。这对我来说效果很好。我的疑问是我们如何使用从 npm 下载的组件？(例如:react-router、react-bootstrap 等)通常当我们处理一个完整的 react 项目时，我们只需使用 npm 安装它们并在 react 中导入它们js，但是我们如何安装这些组件或获取它们的脚本文件，就像我们获取 React 脚本文件一样？

Answer 1

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

首选方法

首选方法是使用 webpack、parcel 或类似的 bundler 将您的代码和模块捆绑到一个脚本中。

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

   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) 文件加载某些组件。标签。这可能适用于简单的附加应用程序，但在大多数情况下可能不推荐使用。我倾向于仅在制作原型(prototype)想法或在 Stack Overflow 上演示解决方案时使用这些。

像这样:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

<div id="littleApp"></div>