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】实现的功能是一致的。
图2.1 React JSX独立文件方式
hPNMf2p4nP/F/t+txsdan4kq9M+McHKCN8wqjHNGxJSXskqiIwE2PZGIRoo820fW