React 组件未显示在 HTML 中答案

【问题标题】：React Component not displayed in HTMLReact 组件未显示在 HTML 中
【发布时间】：2021-12-04 23:30:33
【问题描述】：

我只是在学习 react 并不能显示我的组件。

我有一个包含以下代码的欢迎 html 文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://thymeleaf.org"><head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
<div class="root"></div>
<script  type = "text/babel" src= "App.js"> </script>
<script>
    import {Component} from "react";

    class App extends Component {
        render() {
            return(
                <h1>Hello everyone nice to see it finally works!!!</h1>)
        }
    }

    ReactDOM.render(<App />, document.querySelector(".root"));</script>
</body>
</html>

这是我的 App.js

import React, {Component} from 'react'

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            appVersion: ''
        }
    }

    render(){
        return(
            <h1>Hello everyone nice to see it finally works!!!</h1>
        )
    }

}

注意：在我的 App.js 不起作用后，我尝试使用 html 文件的内联组件，如您所见。但即使这样也无济于事。希望有人能给我提示。

【问题讨论】：

请尝试使用 npx create-react-app 这将为您提供项目的基本结构，并且最好使用带有功能组件的钩子，更容易。创建项目的 URL：reactjs.org/docs/create-a-new-react-app.html 和挂钩 reactjs.org/docs/hooks-reference.html

标签： javascript html reactjs frontend

【解决方案1】：

我认为将外部脚本 (<script src="...">) 与 in-browser-babel-transpiler 一起使用是行不通的（虽然不确定）。

两者都可以使用

JSX 和内联代码，或
没有 JSX 的外部脚本

最常见的方法是建立一个node.js项目，包括webpack、server、babel等，例如与create-react-app。

1。 JSX 和内联代码

在这里您不需要（也不能使用）import。
React 已通过 <script ...> 标记导入到全局范围内。要使用Component，您可以改用React.Component：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
<div class="root"></div>
<script type="text/babel">
    class App extends React.Component {
        render() {
            return(
                <h1>Hello everyone nice to see it finally works!!!</h1>
            );
        }
    }
    ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>

2。外部脚本，没有 JSX

由于CORS 的限制，导入<script src="app.js"> 显然只能在app.js 内没有JSX 的情况下工作（即没有babel-transpiler）：

// index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
<div class="root"></div>
<script src="app.js"></script>
<script type="text/babel">
    ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>

// app.js
class App extends React.Component {

    constructor( props ){
        super(props);
        this.state = {
            name: 'some name',
            appVersion: ''
        };
    }

    render(){
        return [
            React.createElement( 'h1', null, 'it works, but without JSX! ' ),
            React.createElement( 'p', null, 'Name: ' + this.state.name ),
        ];
    }
}

【讨论】：