JSX 是一种在React中使用的语法，它可以让我们在JavaScript中编写类似于HTML的结构，以便更容易地构建用户界面。但是，这并不是JavaScript原生支持的语法，因此需要使用Babel等工具将它转换为JavaScript代码。在让Babel编译器转换JSX语法时，我们会发现它会自动加入React，这是为什么呢？
为什么需要加入React？
首先，我们需要了解JSX能够被转换为什么样的JavaScript代码。下面是一个简单的例子，它将一段JSX代码转换为相应的JavaScript代码：
-- ----- ----- ------- - ---------- ------------ -- --------------- ----- ------- - ------------------------- ----- ------- ---------
可以看出，JSX代码被转换为了调用React.createElement函数的JavaScript代码。这个函数是React提供的一个工具函数，用于创建React元素。因此，为了让这段代码能够正确地执行，我们需要在代码中引入React。
但是，如果我们在代码中手动添加import React from "react";语句，会很麻烦，特别是当项目中有很多文件需要使用React时。因此，Babel编译器会为我们自动添加import React from "react"语句，以方便我们的代码编写。
示例代码
为了演示这个过程，我们可以使用babel-cli来编译一个包含JSX代码的文件。首先需要安装babel-cli和babel-preset-react：
--- ------- -- --------- ------------------
然后，我们创建一个测试文件test.jsx，内容如下：
----- ------- - ---------- ------------
为了使用Babel编译这个文件，我们需要创建一个.babelrc文件，配置Babel的相关设置：
- ---------- --------- -
最后，我们使用下面的命令来编译文件：
----- --------
编译后生成的JavaScript代码如下：
---- -------- --- ------- - ------------------------- ----- ------- ---------
可以看到，Babel编译器自动为我们添加了var element = React.createElement("h1", null, "Hello, world!");中的React引入语句。
总结
在使用Babel编译器将JSX代码转换为JavaScript代码时，Babel会自动添加import React from "react";语句，以方便我们的代码编写。这个过程是由于JSX需要调用React提供的工具函数React.createElement来创建React元素。因此，为了让代码能够正确执行，需要在代码中引入React。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6469aa8d968c7c53b0984f54