React 入门实例（前半部分）

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

React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React

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

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。而且目前市场上有很多成熟的react UI框架，比如说蚂蚁金服技术团队开发并维护的antd，还是蛮优秀的，感兴趣的同学可以抽空看下。

React Native

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

React.js

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

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

一、安装

React 的安装包，可以到官网下载。不过，React Demos已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。

$ git [email protected]:ruanyf/react-demos.git

如果你没安装 git， 那就直接下载zip 压缩包。

github

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

需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。Demo13是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。

二、HTML 模板

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

demo1

上面代码有两个地方需要注意。首先，最后一个标签的 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 节点。

ReactDOM.render

上面代码将一个h1标题，插入example节点（查看demo01），运行结果如下。

demo1

三、JSX 语法

 HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看Demo02）。

JSX语法

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

解析结果

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看demo03）。

示例

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

渲染结果

四、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看demo04）。

组件

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

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

XXXX

，而不能写

我是1

我是二

错误实例

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

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

渲染实例

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

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

---

弹性盒子布局

---

声明：文章在攥写的过程中部分参考“阮一峰”先生的《React入门》文章，若侵权请私信删除。