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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值