antd官网 React+Antd 敏捷前端开发实践

首先，猜猜下面一页有多少行前端代码。

尝试分解页面，其中包括寻呼机、日期选择器、按钮集和各种过滤组件:

12行前端代码，所有代码之和不超过100行:

谁在用React+AntD开发中后场界面？

我们为什么选择React？

首先，虚拟DOM操作提高了运行性能

基于HTML的前端界面开发越来越复杂，其本质问题基本可以归结为如何高效地将来自服务器或用户输入的动态数据反映到复杂的用户界面上。来自Facebook的React框架完全是这个问题的解决方案。根据官方网站，它的出发点是:用随时间变化的数据构建大型应用程序。与传统的前端开发相比，React开辟了一条比较另类的途径，实现了前端接口的高效、高性能开发。前端渲染复杂度从O (n 3)降低到O(n)…

二、基于组件的开发思路，提高开发效率

可组合:一个组件易于与其他组件一起使用，或者嵌套在另一个组件中。一个复杂的UI可以拆分成几个简单的UI组件；

可重用:每个组件都有独立的功能，可以在多个UI场景中使用；

可维护性:每个小组件只包含自己的逻辑，更容易理解和维护；

可测试:因为每个组件都是独立的，所以单独测试每个组件显然比测试整个UI更容易。

我们为什么选择安特德？

经过大量的项目实践和总结，蚂蚁金服体验技术部沉淀出一个中后台蚂蚁设计构件库。目的是统一中台项目前端UI设计，屏蔽不必要的设计差异和实现成本，解放设计和前端R&D资源。

Ant Design是一种中文设计语言，致力于改善用户和设计师的体验。模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师的角色界限，全面提升了中台产品体验和R&D效率。告别CSS和各种风格。大家都是前端工程师。

怎么用？

1.下载并安装nodejs。

2.执行命令npm install react安装react。

3.执行命令npm install antd来安装antd。

执行命令npm install dva-cli安装dva。

5.执行命令dva new XXX创建一个应用程序，并自动初始化目录文件。

6.执行命令npm start启动应用，默认端口为8000。

如果使用webstrom之类的IDE，第一步之后就不需要任何命令了。

Antd官网:ant.desgin

React官网:facebook.github.io/react

Nodejs官网:nodejs.org

网站官方网站:jetbrains.com/webstorm

最后，猜猜这个k线图有多少行代码。