Question

我不知道为什么该页面没有显示任何内容：

<!DOCTYPE html>
<html>
    <head>
        <script src="react-0.14.3.js"></script>
        <script src="react-dom-0.14.3.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <script type="text/jsx">
            console.log("Hi Rect!");
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById('container')
            );
        </script>
    </body>
</html>

我将“ react-0.14.3.js”和“ react-dom-0.14.3.js”放置在保存此HTML页面的同一目录中。

Answer 1

没有Babel，您将无法在浏览器中使用JSX。要解决此问题，请在head中添加脚本并将script的类型更改为text/babel。如果您想在本地使用Babel，只需转到脚本url并下载文件。我还更新了您的React版本（您一定要这样做）。

反应CDN链接（也可以从那里下载文件）：https://reactjs.org/docs/cdn-links.html

在开发过程中，请使用开发react脚本。在生产过程中，切换到生产版本。确切的链接可以与其他CDN链接一起找到。

<!DOCTYPE html>
<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <script type="text/babel">
            console.log("Hi React!");
            ReactDOM.render(
                <h1>Hello World</h1>,
                document.getElementById('container')
            );
        </script>
    </body>
</html>

Documentation on how to add Babel to browser (source for answer)，只需单击“原型”下的“在浏览器中”

Babel Standalone文档：https://babeljs.io/docs/en/babel-standalone

注意：如果您正在为Babel使用本地文件，请将<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />添加到您的头部。有关为什么可以找到更多信息，here和here

Answer 2

这是没有Babel时的工作方式。对于现实世界的应用程序，您当然需要Babel。

        <script>
            console.log("Hi React!");
            const template=React.createElement("h1",null,"Hello World");
            const container=document.getElementBy('container');
            ReactDOM.render(template,container)
        </script>

空表示属性的对象。如果您具有h1元素的id属性

<h1 id="me">Hello World</h1>
React.createElement("h1",{id:"me"},"Hello World")

这就是React在后台工作的方式。事实是Babel是一个编译器，但是默认情况下它不会编译任何东西。我们必须添加插件和预设，以便对我们的代码进行任何形式的更改。像babel-preset-env，babel-preset-react

ReactDOM.render没有渲染页面

2 个答案: