react
首先React采用声明范式，通过对DOM的模拟，最大限度地减少与DOM的交互。并且它可以与已知的库或框架很好地配合。
React 开发不一定使用 JSX ，但我们建议使用它。代码更加容易得到复用，能够很好的应用在大项目的开发它实现了单向响应的数据流，从而减少了重复代码。
下面构建React组件的时候，使用了es6的语法，最终用webpack打包。第一步：划分UI ComponentReact是模块化、组件化的。这里第一步要做的就是将应用划分成各个组件。
第二步：构建静态版的React应用也说明了各个组件的职责。接下来我们分步完成我们的应用，首先我们做一个静态版的React，只用于render UI组件，但并不包含任何交互。需要注意的是，静态版的应用，数据由父组件通过props属性向下传递，state属性是用不到的，记住，state仅仅为动态交互而生。本应用的组件相对较多，不妨采用这样的方式，从子组件开始。
第三步：编译并打包在使用之前，要先经过’编译’，这个过程我们是使用Babel完成的。安装依赖项在这里，首先执行以下命令，安装开发依赖并自行安装其中的依赖项。安装开发依赖项后，接下来就是使用webpack打包了，在解析文件的时候会自动使用babel对文件进行编译。将第二步中的所有组件都放到当前目录下的src目录中，目录结构可以参考源代码，然后执行以下命令。接下来在浏览器中打开html，静态版的React已经生成了，只是还没有动态交互而已。
第四步：添加STAFF类在STAFF中我们实际上创建了2个类，为了实现更好的’封装性’，我们将每一中包含了该人员的所有信息，在本应用中包含他的姓名、年龄、性别、身份、个人描述等，实践中我们可以加入类似入职时间，福利薪酬，个人经历等信息。另外还有一个key值，它是一个类变量，这个值是唯一标识该staffItem用的。在第二步，我们在js中伪造了一些数据，现在我们也把它搬到STAFF中。毕竟React不是存数据用的。然后重新编译打包。再次在浏览器打开html文件，再次在浏览器打开html文件，不过它已经变得更加模块化了，结构也更加漂亮。
第五步：完成新增人员功能真正让React动起来，从新增人员逻辑开始，这个功能比较纯粹，和其他业务耦合度不高。重新打开js，加入部分代码。我们在提交的按钮上绑定了点击事件。点击提交按钮后，执行函数。重新编译打包生成js文件。再次在浏览器中打开html文件，试试新添加的人员添加功能吧！
第六步：完成关键字搜索功能类似第五步新人员的添加，我们首先给StaffHeader中的搜索输入框绑定一个onChange事件，每当搜索内容改变时，触发该函数。逐步完善。依据关键字的搜索功能至此也完成了。作为示例，第五步以及第六步完成了添加人员以及关键字搜索功能。随后随着功能的不断添加，最终代码的实现会有微小的调整。实现的方法大同小异，请大家对照源码，依照上面的方法逐步完整整个应用。我相信你实现了每一个细节之后，对面入门React一定会有十分大的帮助。