使用 JSX 的运行 HTML 页面时的空白页面

Question

我正在学习 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 文件时，它给我一个空白页面。

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

Answer 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">

使用 JSX 的运行 HTML 页面时的空白页面

Blank page when running HTML page with JSX

html

javascript

jsx

reactjs

使用 JSX 的 运行 HTML 页面时的空白页面

Blank page when running HTML page with JSX

html

javascript

jsx

reactjs

使用 JSX 的运行 HTML 页面时的空白页面