添加对静态 html 的反应

Posted 2023-02-22

技术标签:

【中文标题】添加对静态 html 的反应【英文标题】：Adding react to static html 【发布时间】：2020-03-15 20:50:30 【问题描述】：

我想在静态 html 页面的其中一个 div 中添加一个 React 组件。我这样做而不是将整个页面转换为 React，因为我的网页的几个部分只需要 React。我按照https://reactjs.org/docs/add-react-to-a-website.html 上的说明进行操作。我的问题是：

可以这样做，还是建议我完全在 React 中实现我的网站？我按照前面提到的页面告诉我的做了，但是当我在浏览器上显示它时，我使用 React 的部分没有得到实现（我的 IDE 是 WebStorm）。是否有我必须运行才能编译的特定脚本（如使用 React 框架时的 yarn start）？

【问题讨论】：

你能分享你的代码吗？需要看看你是如何实现你的组件的。 【参考方案1】：

查看这个最小的示例。您需要包含 3 个脚本

react.development.js（反应库） react-dom.development.js（react lib 与 dom 交互） babel.min.js（将 react JSX 转换为浏览器兼容的 JS）

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        
        <!-- Don't use this in production: -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
          function HelloWorld(props)
            return <h1>`Hello, world! $props.name`</h1>;
          
          ReactDOM.render(
            <HelloWorld name="James"/>,
            document.getElementById('root')
          );
    
        </script>
      </body>
    </html>

注意：这是尝试 React 的好方法，但不适合生产环境。它在浏览器中使用 Babel 慢慢编译 JSX，并使用 React 的大型开发版本。

阅读此部分以了解使用 JSX 的生产就绪设置：https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

在较大的项目中，您可以使用集成的工具链包含 JSX：https://reactjs.org/docs/create-a-new-react-app.html

你也可以在没有 JSX 的情况下使用 React，在这种情况下你可以删除通天塔：https://reactjs.org/docs/react-without-jsx.html

来源：https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

【讨论】：

【参考方案2】：

javascript

【讨论】：

包含一些流程示例供用户参考会有所帮助。

以上是关于添加对静态 html 的反应的主要内容，如果未能解决你的问题，请参考以下文章

从 django 静态文件提供服务并上传到 heroku 时无法找到反应静态文件