為什么我的網頁沒有運行 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