Question

我按照有关创建React应用程序的书中的指南进行操作。这是本书中的第一个例子，我完全按原样复制了它，但页面不会渲染。

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="UTF-8" />
        <title> Pro MEAN Stack </title>
        <script src=
            "https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
        </script>
        <script src=
            "https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
        </script>
        <script src=
            "https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
        </script>
    </head>

    <body>
        <div id="contents"></div> <!-- this is where the component will appear -->

        <script type="text/babel">
            var contentNode = document.getElementById('content');
            var component = <h1> Hello World </h1>; // A simple JSX component
            ReactDOM.render(component, contentNode); // Render the conponent
        </script>
    </body>

</html>

这是控制台所说的，

react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED

我不知道此时该怎么做。

之前，我从未使用过React

Answer 1

您应该将cdn链接更新为有效链接，请使用以下命令：

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

contents =＆gt;含量
使用react的优先方法是使用某种模块捆绑器，如webpack。如果webpack看起来像是一个喧嚣，你可以使用create-react-app立即启动并运行完整的响应应用程序。这很棒。

Answer 2

修复cdnjs的链接，你拼错它。您还要创建一个ID为“content s ”的div，然后选择ID为“content”的元素。

Answer 3

以下示例有效：

＆＃13;

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>ReactJS Hello World</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script src=
            "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
        </script>
    </head>

    <body>
        <div id="content"></div>

        <script type="text/babel">
            var contentNode = document.getElementById('content');
            var component = <h1> Hello World </h1>; // A simple JSX component
            ReactDOM.render(component, contentNode); // Render the conponent
        </script>
    </body>
</html>

＆＃13;

<强>参考

React＆＃39; Hello World＆＃39;没有加载

3 个答案: