React js不渲染你好世界答案

【问题标题】：React js not rendering hello worldReact js不渲染你好世界
【发布时间】：2017-12-03 02:57:51
【问题描述】：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div class="root"></div>
        <script type="text/babel">
            ReactDOM.render(
                    <h1>Hello,World!</h1>,
                    document.getElementById('root')
            );
        </script>
    </body>
</html>

上面的代码只产生一个空白页面，查看控制台我没有看到任何错误。

【问题讨论】：

标签： javascript reactjs react-dom

【解决方案1】：

您的元素有一个名为 root 的 class。你需要一个带有id 的元素，称为root：

<div id="root"></div>

DEMO

编辑：您还需要添加 babel-standalone 模块（请参阅 this previous SO answer）。

【讨论】：

将其更改为“id”。还是没有效果。事实上，我上课的原因是尝试各种设置，因为 id dint 首先是工作。
如果您查看演示，它可以工作。还有其他事情出错了。您是否在控制台中收到任何错误？你是如何翻译这个的？你是用 webpack 还是其他方式？
我的 sn-p 与 codepen 完美配合，但在我的本地浏览器上却无法使用。
Is this link any use?看起来您可能还需要包含 babel-standalone 脚本。
你才是真正的mvp。

【解决方案2】：

你说document.getElementById('root') 但你的元素是一个类。您的元素的 id 应为 root：<div id="root"></div>。

【讨论】：

【解决方案3】：

     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script type="text/babel">
      const element=<h1>Hello,World</h1>;
        ReactDOM.render(
                element,
                document.getElementById('root')
        );
    </script>

运行上面的代码，你代码的主要问题是你使用了 babel 并且没有添加 js 依赖。此外，你在 js 中通过 id 获取元素，但在 html 中定义了类名。

【讨论】：