Question

我一直在遵循https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx上的“向网站添加反应”指南，但是由于某些原因，它似乎无法正常工作。

无效的代码：

index.html：

    <html>
    <head>

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

    <!-- Load React component. -->
    <script src="test.js"></script>

    </head>

    <body>

    <div id="root"></div>

    </body>

    </html>

test.js：

    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
    );

上面的代码将产生一个空白页面，但是当我将反应代码添加到index.html页面上时，如下所示：

   <script>
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
    );
   </script>

它确实起作用。

我尝试替换

    <script src="test.js"></script>

使用

    <script src="/test.js"></script>

和

    <script src="./test.js"></script>

但这仍然行不通。

另外，当我检查空白页面上的元素时，它确实表明它已加载test.js

有人可以告诉我我在做什么错吗？

Answer 1

the guide说：

现在，您可以通过添加<script>在任何type="text/babel"标签中使用JSX 属性。

因此您需要<script src="test.js" type="text/babel"></script>。

Answer 2

您甚至可以只使用React.creatElement API而不添加文本/边框，这是Redux的作者，Reactjs核心团队的一部分的作者 Dan Abramov 推荐的。

以下是有效的代码sanbox：React with no build config

从单独的js文件添加反应不起作用

2 个答案: