使用 JSX 运行 HTML 页面时出现空白页面答案

【问题标题】：Blank page when running HTML page with JSX使用 JSX 运行 HTML 页面时出现空白页面
【发布时间】：2016-10-06 17:46:57
【问题描述】：

我正在关注 Lynda 上的教程，当他们第一次向我们介绍 JSX 时，他们使用以下示例代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
        <title>My First React File</title>
    </head>
    <body>
        <div id='react-container'></div>
        <script>
            ReactDOM.render(<ul>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>,
                document.getElementById('react-container'))
        </script>

    </body>
</html>

但这似乎对我不起作用。当我在包含上述代码的浏览器中运行 HTML 文件时，它给了我一个空白页。

有人可以指出我在这里做错了什么吗？

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

根据the React docs，您需要：

告诉浏览器 JSX 不是 JavaScript
将 JSX 转换为 JavaScript

所以添加到头部：

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

并将您的 JSX 脚本标记更改为：

<script type="text/babel">

【讨论】：