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页面时的空白页面

1 个答案: