Question

这是我的第一个使用React.js的项目，我按照以下步骤创建了一个Hello World（https://facebook.github.io/react/docs/hello-world.html）

我在头标记中导入React.js，但为什么我的代码不起作用？ index.html只是空白页

的index.html

<html>
    <title>
        My first project using React.js
    </title>
    <head>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    </head>
    <body>
        <div id="root">
        </div>
        <script>
        ReactDOM.render(
            <h1>Hello world!</h1>,
            document.getElementById('root')
        );
        </script>
    </body>
</html>

Answer 1

因为您忘记提供babel的引用，请使用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

并指定脚本的类型type=text/babel。

检查工作代码：

<!DOCTYPE html>
<html>
    <title>
        My first project using React.js
    </title>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    </head>
    <body>
        <div id="root"/>
        <script type='text/jsx'>
            ReactDOM.render(
                <h1>Hello world!</h1>,
                document.getElementById('root')
            );
        </script>
    </body>
</html>

为什么我无法在div中呈现文本

1 个答案: