將 React 添加到 HTML（無需安裝 create-react-app）

Question

我正在嘗試按照官方 React 文檔了解如何將 React 添加到網站。

在文件 main.html 中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Add React in One Minute</title>
      </head>
    <body>
        <div id="root"></div>
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <!-- Load our React component. -->
        <script src = "states_clock.js"> </script>
    </body>
</html>

在文件 states_clock.js

// states_clock.js
'use strict';

const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

兩個文件都在同一個文件夾中。 當我在 chrome 中打開 html 頁面時，我收到錯誤消息：

Uncaught SyntaxError: Unexpected token '<' (at states_clock.js:11:7)

<被抱怨的是js文件中的div 。

Answer 1

這個：

class Clock extends React.Component {
  render() {
    return (
      <div>

不是 JavaScript 語法 - 它是 JSX 語法。

當你這樣做

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

就像使用任何普通腳本標記一樣，您是在告訴瀏覽器將其解釋為標准 JavaScript 文件並將其運行，這不起作用，因為它不是。 將屬性type="text/babel"添加到 script 標簽，這樣它就不會以 JavaScript 的形式運行，這樣 Babel Standalone 就會看到它是一個要處理的腳本標簽。

<script src="states_clock.js" type="text/babel"></script>

你也可以內聯編寫 JSX，如下所示：

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id='root'></div> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> 'use strict'; const domContainer = document.getElementById('root'); const root = ReactDOM.createRoot(domContainer); class Clock extends React.Component { render() { return ( <div> <h1>Hello, world.</h1> <h2>It is {this.props.date.toLocaleTimeString()};</h2> </div> ). } } function tick() { root;render(<Clock date={new Date()} />), } setInterval(tick; 1000) </script>

Answer 2

所以，多虧了 ChrisG 的評論，我明白我們不應該在這部分教程中使用 JSX。

本着這種精神，這是我的解決方案：

'use strict';
const e = React.createElement;
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);

class Clock extends React.Component {

    render() {
        return e('div', null, e("h1", null, "Hello, world!"),
                    e("h2", null, "It is ", this.props.date.toLocaleTimeString(), "."));
    };
}

function tick() {
  root.render(e(Clock, {date: new Date()}, null))
}

setInterval(tick, 1000);

PS：這是將 JSX 代碼轉換為非 JSX 代碼的有用鏈接。

將 React 添加到 HTML（無需安裝 create-react-app）

問題描述

2 個解決方案

解決方案1
2 2022-07-25 20:36:04

解決方案2
0 2022-07-25 21:10:28

將 React 添加到 HTML（無需安裝 create-react-app）

問題描述

2 個解決方案

解決方案1 2 2022-07-25 20:36:04

解決方案2 0 2022-07-25 21:10:28

解決方案1
2 2022-07-25 20:36:04

解決方案2
0 2022-07-25 21:10:28