如何在我的 html 文件中显示 es6 组件？

Question

我想在我的 html 文件中显示 Root 组件。我知道如何使用ReactDOM.render(<Root/>, document.getElementById('app')) 来处理es5，但是es6 呢？

这是我的 html 文件：

<div id="app"></div>

这是我的 js 文件：

import React, { Component } from 'react';

class Root extends Component {
    render() {
        return(
            <div>
                <h1>Testing</h1>
            </div>
        );
    }
}

ReactDOM.render(<Root/>, document.getElementById('app'));

我在es5 方式之上的尝试，因为我不太确定如何在es6 中实现这一点，这显然行不通。

注意：我的项目中没有使用create-react-app。我只是在create-react-app 环境之外尝试，而是在其他环境中尝试。我手动安装了 Babel 和所有其他东西。

我该怎么做才能让它发挥作用？

Answer 1

您似乎缺少 React DOM 的导入语句，因为您需要它来将组件从 React 渲染到 DOM，除非您从单独的文件中导入这些组件。

import ReactDOM from "react-dom"

在你的第一个 import 语句之后添加。