2.2 JSX独立文件

JSX可以在页面中通过直接定义（见【代码1-5】）的方式实现，也可以通过引入外部定义好的JSX独立文件方式来实现。

下面尝试将【代码1-5】以独立文件的方式进行改写，来实现React JSX代码的应用。

【代码2-1】（详见源代码目录import.js文件）

关于【代码2-1】的说明：

●第01~11行定义了一段完整的JSX代码，实现了一个虚拟DOM对象，具体内容如下：

► 第02行代码获取了层（<div id='id-div-react'>）标签元素的对象（divReact），该标签元素定义在下面的【代码2-2】页面文件中。

► 第04~09行代码通过const关键字定义了一个常量（reactSpan），该常量使用小括号包含了通过<span>、<h3>和<p>标签定义的元素组合，这段代码的定义方式就是JSX语法形式。

► 第11行代码调用React DOM对象的render()方法，将JSX代码渲染到页面中进行显示。

下面再看一下HTML页面文件的具体代码：

【代码2-2】（详见源代码目录ch02-react-jsx-import.html文件）

关于【代码2-2】的说明：

●第13行代码中定义了一个层（<div id='id-div-react'>）标签元素。

●在第14行代码中，通过<script>标签引入了JSX独立文件，其中“src”属性定义了JSX独立文件的路径，另外“type”属性定义为通过Babel方式（"text/babel"）进行解析。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图2.1所示。如图中的标识所示，页面中显示了通过React JSX独立文件方式渲染的效果，与【代码1-5】实现的功能是一致的。