1.3 第一个React应用

本节开始介绍第一个使用React框架开发Web前端应用，让读者一识React应用的庐山真面目。React应用开发涉及的内容比较广泛，我们还是从最简单、最基本的“Hello World”开始介绍。简单来讲，就是如何将传统意义的HTML网页内容，以React框架渲染的方式来实现。

首先，就是如何安装和使用React框架。React框架的安装和使用很简单，可以直接通过CDN方式获取React和ReactDOM的UMD版本引用，具体如下：

不过，上述版本仅用于开发环境，不适合生产环境。React压缩和优化之后的生产环境版本链接如下：

此外，还要引入Babel编译器所需的库文件，具体如下：

关于上面以CDN方式引入的一组库文件（react.js、react-dom.js和babel.js这3个脚本文件，文件名为泛指），具体描述如下：

●react.js是React框架的核心库。

●react-dom.min.js提供与DOM相关的功能。

●babel.min.js由Babel编译器提供，可以将ES6代码转为ES5代码，这样就能在不支持ES6的浏览器上执行React代码（请注意在生产环境中不建议使用）。

下面，开始第一个使用React框架实现“Hello World”应用的代码实例，具体如下：

【代码1-1】（详见源代码目录ch01-react-helloworld.html文件）

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

●第06行、07行和第09行代码，以CDN方式分别引用了React框架所需的三个库文件（react.development.js、react-dom.development.js和babel.min.js）。

●第12行代码通过<div id="root">标签元素定义了一个层，用于显示通过React框架渲染的文本内容。

●第14~17行代码通过调用React DOM对象的render()方法来渲染元素。

●第14行代码定义了要引入的元素节点<h1>。

●第15行代码获取了页面中要渲染的元素节点<div id="root">。

●然后，第14~17行代码通过ReactDOM.render()方法将<h1>元素节点渲染到页面的层<div id="root">元素节点中。

关于ReactDOM.render()方法的语法格式如下：

语法说明：

●element参数：必需，表示渲染的源对象（元素或组件）。

●container参数：必需，表示渲染的目标对象（元素或组件）。

●callback参数：可选，用于定义回调方法。

对于【代码1-1】中所使用渲染方法的方式（见第14~17行代码），看上去很直观，不过感觉逻辑性不太强。

下面，我们尝试将上述代码以如下的方式进行改写，或许会比较容易理解了，具体如下：

【代码1-2】（详见源代码目录ch01-react-ele-helloworld.html文件）

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

●第02行代码通过const关键字定义了一个常量（h1），描述了要引入的元素节点<h1>。由此可见，在React框架中变量的使用非常灵活，可以将元素节点直接定义为变量形式来使用。

●第03行代码获取了页面中要渲染的元素节点<div id="root">，保存在变量（root）中。

●第04行代码调用React DOM对象的render()方法，将h1元素节点渲染到root元素节点中。

可以看到，改写后的【代码1-2】逻辑性比较好，读者应该能够很容易分清渲染的源对象和目标对象，以及渲染方式。

下面分别使用Firefox浏览器运行测试【代码1-1】和【代码1-2】定义的HTML网页，二者的具体效果（相同的）如图1.1所示。页面中成功显示了通过React框架渲染出的文本内容（Hello, world!）。