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