ReactDOM.render 没有渲染页面答案

【问题标题】：ReactDOM.render is not rendering the pageReactDOM.render 没有渲染页面
【发布时间】：2019-07-10 16:04:50
【问题描述】：

我不知道为什么此页面没有显示任何内容：

<!DOCTYPE html>
<html>
    <head>
        <script src="react-0.14.3.js"></script>
        <script src="react-dom-0.14.3.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <script type="text/jsx">
            console.log("Hi Rect!");
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById('container')
            );
        </script>
    </body>
</html>

我已将“react-0.14.3.js”和“react-dom-0.14.3.js”放在保存此 HTML 页面的同一目录中。

【问题讨论】：

浏览器本身不支持 React 的 JSX（你的 <h1>Hello World</h1>）；以上是语法错误。要么使用没有 JSX 的 React，要么使用浏览器内的 babel 转换。甚至更好：获取节点、npm 和 create-react-app。
你需要使用 React.createElement 而不是 JSX。浏览器不支持。
也....如果您刚刚开始，请从当前版本的 React (16.8.6) 开始，而不是旧版本。

标签： javascript html reactjs

【解决方案1】：

你不能在没有 Babel 的浏览器中使用 JSX。要解决此问题，请在head 中添加脚本并将script 的类型更改为text/babel。如果你想在本地使用 Babel，只需转到脚本 url 并下载文件。我还更新了你的 React 版本（你绝对应该这样做）。

React CDN 链接（您也可以从那里下载文件）：https://reactjs.org/docs/cdn-links.html

在开发过程中，使用开发反应脚本。在生产期间，切换到生产版本。可以通过其他 CDN 链接找到确切的链接。

<!DOCTYPE html>
<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <script type="text/babel">
            console.log("Hi React!");
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById('container')
            );
        </script>
    </body>
</html>

Documentation on how to add Babel to browser (source for answer)，只需点击“原型”下的“在浏览器中”

Babel 独立文档：https://babeljs.io/docs/en/babel-standalone

注意：如果您使用 Babel 的本地文件，请将 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 添加到您的头部。更多关于为什么可以找到here和here

【讨论】：

感谢您的快速回复。但是，有一件事，如果我下载所有文件并将它们放在与 html 文件相同的目录中，那么 - script src="react.16.8.6.development.js"> 是 .不工作
但是，
文件名是否正确？如果您在浏览器中打开控制台，是否会显示任何错误？
将此添加到您的脑海中：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />。我用有关原因的信息更新了答案。
不工作