为什么我的网页没有运行 React.js 或带有 CDN 的 JSX？

Question

所以我一直在学习 React，我正在尝试将它添加到我正在处理的网页中。 但是每当我尝试使用 React 或 JSX 代码时，什么都没有发生。 浏览器甚至不承认它。 这是我的index.html和index.js代码。

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Experimental Website</title>

        <!-- CSS file link -->
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2 id="test"></h2>

        <!-- React.js CDN links -->
        <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>

        <!-- Babel (remove later) -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <!-- JavaScript file link -->
        <src type="text/babel" src="index.js"></src>
    </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react';

let testVariable = <h2>Help me</h2>;

ReactDOM.render(
    testVariable,
    document.getElementById("test")
);

我究竟做错了什么？ 为什么 React 不能在浏览器中运行？

Answer 1

这行得通。

// index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Experimental Website</title>

        <!-- CSS file link -->
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <h1>Hello world!</h1>
        <div id="test"></div>

        <!-- React.js CDN links -->
        <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>

        <!-- Babel (remove later) -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <!-- JavaScript file link -->
        <!-- you had <src> here -->
        <script type="text/babel" src="index.js"></script>
    </body>
</html>

和，

// index.js
let testVariable = <h2>Help me</h2>;

ReactDOM.render(testVariable, document.getElementById('test'))

所以，你有<src>而不是<script>并且你也在使用没有模块的导入。 链接库会注入一个全局React和ReactDOM object，所以你对 go 很好。

快乐编码！

为什么我的网页没有运行 React.js 或带有 CDN 的 JSX？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-07-31 02:49:27

为什么我的网页没有运行 React.js 或带有 CDN 的 JSX？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-07-31 02:49:27

解决方案1
2 已采纳 2020-07-31 02:49:27