现在最热门的前端框架，毫无疑问是。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。

我学习 React 时，感觉相当难上手，与同类型的Vue同样属于主流的前端框架，但是后者相对来说更容易上手，学习起来成本相对来说少很多。但是那为什么大家还趋之若鹜的去用React开发项目呢，肯定是React有一些独特或者难以替代的特性。

下面大家一起来试着去了解这个火了很久的前端框架-----React

一、安装

下面要讲解的12个例子在各个Demo子目录，每个目录都有一个index.html文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。

二、HTML 模板

使用 React 的网页源码，结构大致如下。

上面代码有两个地方需要注意。首先，最后一个标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

$ babel src--out-dir build

上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

三、JSX 语法

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以   <   开头），就用 HTML 规则解析；遇到代码块（以     {    开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。

四、组件

上面代码中，变量HelloMessage就是一个组件类。模板插入时，会自动生成HelloMessage的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的render方法，用于输出组件。

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错，也就是说外层标签必须只有一个<div>XXXX</div>，而不能写<div>我是1</div><div>我是二</div>

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如，就是HelloMessage组件加入一个name属性，值为John。组件的属性可以在组件类的this.props对象上获取，比如name属性就可以通过this.props.name读取。上面代码的运行结果如下。

添加组件属性，有一个地方需要注意，就是class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是 JavaScript 的保留字。

本次仅仅讲述了部分React特性，下次技术分享会会继续把这块完善，并结束。