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

Blank page when running HTML page with JSX

本文关键字：空白 JSX HTML 使用 运行      更新时间：2023-09-26

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

谁能指出我哪里做错了吗?

根据React文档，您需要:

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

所以添加到头部:

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

并将JSX脚本标签更改为:

<script type="text/babel">
相关文章：