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

Question

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

10

reactjs.org有一篇关于如何将React JS添加到现有网站的优秀教程在这里，通过添加React JS代码作为脚本来实现。这对我很有效。我的疑问是，我们如何使用从npm下载的组件(例如：react-router、react-bootstrap等)？通常，在完整的React项目上工作时，我们只需使用npm安装它们并在React JS中导入它们，但我们如何安装这些组件或获取它们的脚本文件，就像我们获取React脚本文件一样呢？

- anwesh mohapatra

5个回答

3

我认为您也可以使用<script>标签添加这些库。

react-router: <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>

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

请查看相应库的文档。

- anunaki

1

https://cdnjs.com/ 托管了许多自由开源软件的网络库。搜索 react-router 将返回可在您的应用程序中使用的开发和压缩版本的链接。但是，就像 klugjo's answer 一样，我强烈建议您不要这样做，如果可能的话，请使用npm管理项目的模块。

- Paragalor

0

最简单的方法是使用Babel来包含你的带有JSX的组件。只需3个步骤：

添加React库
添加Babel
将所有带有JSX的脚本添加type="text/babel"

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="react">Component is loading</div>

<script type="text/babel">
class Test extends React.Component {
  render() {
    return <h2>Hi, this is the React component!</h2>;
  }
}

const root = ReactDOM.createRoot(document.querySelector('#react'));
root.render(<Test />);
</script>

- Eugene

-3

我强烈建议不要这样做，而是走标准路线：

使用create-react-app创建一个完整的React应用程序
使用npm安装您的模块
编写您的应用程序代码
构建应用程序并部署生成的捆绑包（create-react-app提供了所有必要的工具）

从像您提供的链接这样的CDN获取React适合快速概念验证，但不适合生产应用程序。

- klugjo

2

我知道这肯定更好，但是当我的网站大部分使用其他JS库构建，并且我只需要React用于独立页面时，我该怎么做呢？ - anwesh mohapatra

10

创建单页应用程序（SPA）；原帖的明确问题是如何在现有网站上创建ReactJS应用程序。这个答案不是一个合适的答案。 - rbtLong

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett DeWoody · Accepted Answer

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

首选方法

首选方法是使用像webpack、parcel或类似工具将您的代码和模块打包成一个单独的脚本。

Create your app.js file, using imports to load external components

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

Use webpack, parcel, or similar to bundle the app.js into a single bundled.js file
Load the bundled.js file into your page

代替方法

使用通用模块定义 (Universal Module Definition, UMD) 文件在 <script> 标签中加载某些组件也是可能的。这可以适用于简单的附加应用程序，但在大多数情况下不建议使用。我倾向于仅在原型设计想法或在 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>