阿里前端工程师靖鑫为大家带来react入门的相关讲解，本文介绍了React的基础知识，包括React语法、API及其生态。讲解了React的发展历程及基本的开发准则，了解其常用API以及dawn工程化方案，介绍了如何对组件进行拆分，对数据的增删改查等等。方便我们更加迅速的学习React，快速掌握组件化和搭建页面。
数十款阿里云产品限时折扣中，赶紧点击这里，领劵开始云上实践吧！
直播视频精彩回顾
本文介绍了React的基础知识，包括React语法、API及其生态。讲解了React的发展历程及基本的开发准则，了解其常用API以及工程化方案，介绍了如何对组件进行拆分，对数据的增删改查等等。在开发个人项目和公司项目的时候，可以通过做一些工程化的方案，快速的构建应用，而不用过多的了解配置，从而可以让初学者学习React更加迅速，快速掌握组件化，快速搭建页面。
以下是精彩内容整理：
React发展历程及其周边生态
React的发展历史如下表所示：
| 年份 | 事件 |
|---|---|
| 2010 | Facebook 开源了PHP 语言 的一种扩展叫—— XHP |
| 2011 | FaxJS ，它就是 React.js 早期的原型 |
| 2013 | React正式宣布开源 |
| 2014 | React Developer Tools |
| 2015 | Redux React Native单端->多端 |
| 2016 | Mobx React Storybook |
| 2017 | React Fiber |
不同于命令式编程的jQuery以及采用了数据双向绑定的Angular，React相对比较小巧，只专注与view层。React具有四个比较明显的特征：
- 高效：通过虚拟DOM和Diff算法，最大程度减少与DOM的交互和渲染。
- 组件化：页面开发拆分成一个个组件，提高可维护性和复用性
- 专注view：足够简单和清凉，不提供大而全的状态管理能力
- 单向数据流：自顶至下的数据流约定，降低了应用数据管理的复杂度
。
从hello world示例程序中可以看出，该程序最终导出的是一个App类。这个类实际上继承了React框架的component类，并重写了render方法，返回了一段用jsx写的内容。jsx实际上是Facebook在设计React 的时候，采用的类似xml的语法，来完成组件的声明，并用Babel进行转义，得到JavaScript文件。通过jsx语法，可以帮助我们更加简便的去编写组件。
React是需要依赖周边的生态，来实现状态管理、UI组件库、路由、请求、工程化等，从而支持大型应用的开发。
React开发环境的最底层是node，node是前端如此丰富的基石。Webpack和Babel都是基于node实现的，其中Webpack负责打包，Babel负责转义。Babel主要是用于将开发阶段编写的ES6，jsx等语法编译成浏览器所识别的语言。Persets就是相当于套餐，它会将ES6的内容编译成ES5时依赖的内容打包。我们写的代码都是基于ES6，Webpack Loaders会在读取到它将要引用这个文件的时候，不会先引进文件，它会先基于这个Loaders进行转换，然后将转换后的文件，打包在一起。由于我们还需要less，jsx，css的能力，但是React并没有将这些依赖包打包在一起，而是拆成一个个的包，开发者可能需要自己处理这些依赖，缺少一个依赖的话，项目可能跑不起来。
想要搭建一个React环境的话，实际上并不简单，其解决办法就是通过命令行来打包安装。其命令如下：
Create-React-app开发React的时候，并不需要配置。当我们开发一个React项目的时候，会初始化一个my-app的文件夹，进入这个文件夹之后，执行npm start，就可以启动项目了。其中npx这个工具是包含在npm里面的。npm start之后，会监听3001端口。
React是单项数据流，数据是由父组件传递给子组件的。子组件是通过Props来获得父组件的数据。页面是由数据组成的，这些数据就叫做State，可以通过State来维护数据。单向数据流意味着，父组件给子组件的数据是只读的，即使做了修改，视图也不会发生改变。这是需要State是自己维护的，修改State之后，UI组件才会自行渲染。
Dawn库
Dawn为阿里巴巴内部的前端构建和工程化工具，目前已开源。
用Dawn来做工程化的基础，其特点就是：
- 采用中间件技术，封装常用功能，易于扩展，方便重用。
- 支持pipeline让多个task协同完成构建任务。
- 简单/一致的命令行接口，易于开发人员使用。
- 支持基于中心服务管理中间件和工程模板。
- 支持搭建私有中心服务，并同意下发构建规划，易于团队统一管理
使用方法：
1.安装
npm install dawn -g
2.创建并初始化
Dn init -t front
3.开发并实时编译
dn dev
4.语法检查和测试
Dn test
5.构建和打包
Dn build
项目完成后就可以发布到CDN和团队其他的一些平台上面。
实战-TodoMVC
TodoMVC是github上开源的一个明星项目，由众多语言分别进行实现
TodoMVC可以实现添加ToDo，删除Todo，双击编辑Todo内容，批量完成，批量清除和状态筛选。
编写View层，对组件进行合理地拆分
输入框称为TodoAdd。列表称之为TodoList。底下部分称之为TodoStatus。
其中列表有很多重复的行组成的，包括很多的TodoItem，有分成很多的TodoContent（内容），TodoEdit（编辑），TodoSelect（选择框）。TodoStatus包括TodoCount（还有多少元素剩下来）和TodoFilter（筛选组件）。我们是将应用分成了很多的组件。
逐个分析功能点，对业务进行建模
add：TodoList是一个数组，要增加一项内容，Push方法并不会修改原数组，因为当State对应的字段更新的时候，才会重新渲染。推荐使用concat方法，它可以给一个数组追加一个元素，其返回是一个新的内容。
delete：推荐用filter方法，filter会对每一个model进行遍历，如果id匹配成功，就返回false，这意味着，在返回的数组里剔除掉匹配的id。如果不匹配，会保留id，返回结果也是一个新的数组，从而实现渲染的目的。
Toggle：想要改变一个TodoModel的值，如果使用TodoModel的complete 等于它的返回值，实际上组件是不会生效的，必须要改变属性。使用map方法会返回全新的数据。
Clear：就是清除掉数据里面已完成的内容，只需要改变一下过滤的依据就可以了。依据就是id互相匹配，所以采用filter方法。