从react到xflow
注意：xflow 1.0版本已经停止维护，2.0版本目前没有任何文档，也不太推荐使用
0、学习目标
可以使用react框架构建出前端web页面，并且使用xflow插入流程图
1、为什么要使用react？
优点：使用react（vue）框架开发前端页面比手搓html，css，js开发速度更快，且可用的第三方组件很多，效率高
缺点：有一定的上手成本
2、开发工具和环境准备：
nodejs，webstorm
3、前置知识准备：
语言：html、css、js、ts，ES6、JSX、TSX
环境：nodejs，yarn
打包：webpack
4、快速启动一个react
启动一个helloworld项目：https://blog.csdn.net/qq_40432886/article/details/117294503
5、使用组件加速开发
使用react后，复杂的页面被分为了多个小模块和可复用的组件，但是简单的button，form还是需要我们自己来写，所以使用别人已经写好的组件可以加速开发效率。
例如使用ant design中的button，icon等组件，需要什么就复制到自己的代码中即可
6、使用模板开发
虽然使用组件可以加速开发，但是其实很多网页都是相似的，区别很小，例如企业管理中台后台等系统的界面，
所以ant design pro直接提供了网页模板，一键启动一个后台管理系统，稍微改动一下即可定制化
7、网页如何添加流程图、ER图
有时候网页有特殊的需求，例如添加一个可视化流程图，DAG图等，我们同样可以使用别人开发好的组件继承到我们的网页中，
使用Xflow就可以很方便的在网页中集成流程图等
8、快速使用Xflow
介绍：XFlow 是 AntV 旗下, 基于 X6 图编辑引擎、面向 React 技术栈用户的图编辑应用级解决方案, 旨在让复杂的图编辑应用开发简单高效。
xflow官网： https://xflow.antv.vision/docs/tutorial/intro/getting-started/
ant design：https://ant-design.antgroup.com/components/overview-cn/
ant design pro：https://pro.ant.design/zh-CN/docs/getting-started/
可以参考这篇文章快速跑一个demo：
https://segmentfault.com/a/1190000042081353
使用前的前置知识：
语言：html、css、ts，ES6
环境：nodejs，yarn
打包：webpack
框架：react
脚手架：umi，ant design ，ant design pro
图可视化/图编辑：Xflow/X6
需求：基于react，使用ant design构建前端页面，并且使用Xflow组件插入流程图DAG图等