从react到xflow

从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图等