reactjs - 为什么即使我的 client.js 没有使用 "react"也必须导入它

Question

我正在学习 React，当我没有在 client.js 中导入“React”时，我的代码无法工作，我对此感到有点困惑。理想情况下，当我在代码中没有使用“React”时，因此我不应该强制导入“react”模块。以下是代码片段。

布局.js:

import React from "react";

export  default class Layout extends React.Component {
  constructor () {
    super();
    this.name = "Dilip";
  }
  render () {
    return (
      <h1>Welcome {this.name} in React world !!</h1>
    )
  }
}

工作代码:

import React from "react";
import ReactDOM from "react-dom";

import  Layout from "./components/Layout"

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

不工作代码:

import ReactDOM from "react-dom";

import  Layout from "./components/Layout"

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

为什么当我删除导入“React”的代码时它不起作用？我没有在任何地方使用“React”，因此它应该可以工作。它在控制台中抛出以下错误。

Uncaught ReferenceError: React is not defined

注意:我正在关注video

Answer 1

@Matteo 错了。尽管 ReactDOM 确实依赖于 React，但它在代码中需要它本身。

您需要导入 React 的原因是 JSX 代码段:

<Layout/>

这只是语法糖:

React.createElement(Layout)

因此，在 JSX 编译之后，实际上需要 React。 ;)