添加对静态的反应 html

Question

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

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

Answer 1

是的，没关系。不，您的整个网站不需要使用 React。
它应该按照您链接的教程中的描述工作，您不需要编译任何东西。在前端项目中由 yarn 或 npm 调用的脚本通常将 javascript 模块捆绑在一起并从现代版本的 EcmaScript 转译（我们不称其为编译，因为没有机器代码作为输出）到较旧的已建立版本大多数浏览器都能理解的 EcmaScript。但是对于你的小例子，none 这真的很重要。为了确定您的代码为何不起作用，查看它会有所帮助。

Answer 2

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

react.development.js (the react lib)

react-dom.development.js (react lib to interact with dom)

babel.min.js (converts react JSX into browser compatible 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

添加对静态的反应 html

Adding react to static html

html

javascript

frontend

webstorm

reactjs