从零实现一套低代码

从零实现一套低代码

从零实现一套低代码

基于React实现的低代码项目纯前端部分，通过拖拽组件生成UI，可视化属性，样式的配置。在线网址： http://www.xbuilder.top/（24年1月27号到期，看不了喽，可以在文章里的介绍查看）

等 79 人订阅共15篇文章创建于2024-01-12

从零实现一套低代码（保姆级教程） --- 【15】实现轮播图组件并增加容器子节点类型的控制

摘要接上一篇，我们继续实现另外一个比较常见的组件。轮播图，在一些官网的页面中，这个组件是非常常见的。如果你是第一次看到这一篇文章，建议先看一下第一节内容：从零实现一套低代码（保姆级教程） --

1年前
226
3
1

从零实现一套低代码（保姆级教程） --- 【15】实现轮播图组件并增加容器子节点类型的控制

从零实现一套低代码（保姆级教程） --- 【14】实现头像组件和徽标容器

前话文章开始前，先解决一下之前的某个错误。在InputComponent中，如果是弹窗类型的组件，我们点击按钮会把ModalComponent组件弹出来。同时，我们要把key传进去。为什么，因为

1年前
109
2
评论

从零实现一套低代码（保姆级教程） --- 【14】实现头像组件和徽标容器

从零实现一套低代码（保姆级教程） --- 【13】补充其余基础组件

摘要对于目前实现的低代码，单说前端部分，我们目前还欠缺的是事件系统，而事件系统会在后面的运行时项目来进行实现。目前，除了事件，前端的内容基本已经完成了。现在我们就来完善一下组件，因为我们现在只有不

1年前
147
2
评论

从零实现一套低代码（保姆级教程） --- 【13】补充其余基础组件

从零实现一套低代码（保姆级教程） --- 【12】实现左侧层级树并支持查看JSON

摘要目前，我们还有最后一个小模块没有实现，那就是左侧的数据。我们希望它能够展示整个页面的相关协议，其实也就是我们redux中管理的数据。我们希望能够通过可视化的方式看到它。因为有时候我们想知道一

1年前
165
2
评论

从零实现一套低代码（保姆级教程） --- 【12】实现左侧层级树并支持查看JSON

从零实现一套低代码（保姆级教程） --- 【11】实现Card卡片组件及属性样式配置

摘要我们通过十个篇章，把组件列表，画布区，属性面板，样式面板，容器组件这五个主要模块实现出来了。如果想继续添加组件，就按照之前的方式添加即可。对于数据录入这样的组件，或者一个按钮一个标签组件，这种

1年前
194
2
评论

从零实现一套低代码（保姆级教程） --- 【11】实现Card卡片组件及属性样式配置

从零实现一套低代码（保姆级教程） --- 【10】实现样式面板并支持Button组件的样式配置

摘要经过前面九篇文章的讲解和实现，目前我们的低代码已经初具雏形了。如果你是第一次看到这一篇文章，建议先看一下第一节内容：从零实现一套低代码（保姆级教程） --- 【1】初始化项目，实现左侧组件

1年前
284
5
评论

从零实现一套低代码（保姆级教程） --- 【10】实现样式面板并支持Button组件的样式配置

从零实现一套低代码（保姆级教程） --- 【9】实现Form组件并串通容器组件机制

摘要目前，我们的低代码项目，已经把基本的架子搭好了。后续我们会陆续添加一些其他的功能。如果你是第一次看到这一篇文章，建议先看一下第一节内容：从零实现一套低代码（保姆级教程） --- 【1】初始

1年前
606
11
2

从零实现一套低代码（保姆级教程） --- 【9】实现Form组件并串通容器组件机制

从零实现一套低代码（保姆级教程） --- 【8】补充数据录入组件，并实现分组

摘要目前，我们实现的这一套低代码已经具备基本的功能了。从组件，到画布区，再到可视化的属性配置。就是我们这套低代码现在组件有点少，只有三个组件。其实如果这三个组件，你已经实现了。那么如果你想根据an

1年前
697
7
评论

从零实现一套低代码（保姆级教程） --- 【8】补充数据录入组件，并实现分组

从零实现一套低代码（保姆级教程） --- 【7】实现Icon组件

摘要在上一篇中，我们在项目中引入了redux。所以改动比较大，也是最复杂的一个章节。那如果你已经对上一节掌握了，那后面也不会有更难的内容了。因为我们已经把一个整体的架子搭好了，后续只会在这个架子上

1年前
462
3
评论

从零实现一套低代码（保姆级教程） --- 【7】实现Icon组件

从零实现一套低代码（保姆级教程） --- 【6】在项目中使用redux状态管理

摘要在上一篇文章中的末尾，我们也完成了Input组件的属性面板配置。现在我们的低代码项目已经小有成就了。但是后面的内容还是不少的。如果你是第一次看到这篇文章，那么请移步到第一节：从零实现一套低代

1年前
431
2
2

从零实现一套低代码（保姆级教程） --- 【6】在项目中使用redux状态管理

从零实现一套低代码（保姆级教程） --- 【5】实现组件和属性面板的交互

摘要在上一篇中，我们简单实现了右侧属性面板。可以通过更改按钮文字，重新渲染Button组件。目前来到了本系列的第五章，本篇主要是实现Button组件的全部属性配置。如果你是第一次看本系列中的文章

1年前
592
6
4

从零实现一套低代码（保姆级教程） --- 【5】实现组件和属性面板的交互

从零实现一套低代码（保姆级教程） --- 【4】实现右侧属性面板

摘要继画布区的实现之后，来到本系列的第四篇文章，如果你没有看过之前的文章，可以建议先看一下第一篇文章，里面介绍了要实现的项目，是否是你要学习的内容，再决定是否要学习这一些列的文章。从零实现一套低代

1年前
1.1k
9
评论

从零实现一套低代码（保姆级教程） --- 【4】实现右侧属性面板

从零实现一套低代码（保姆级教程） --- 【3】实现Button组件和画布区的拖拽

摘要本篇是这个系列的第三篇，如果你是第一次看到这个文章，那你应该会对低代码有那么一丢丢兴趣或者很有兴趣。从标题来看，也知道我这个系列就是实现一个低代码的项目。那如果你想知道，我实现的项目的样子是什

1年前
575
7
评论

从零实现一套低代码（保姆级教程） --- 【3】实现Button组件和画布区的拖拽

从零实现一套低代码（保姆级教程） --- 【2】实现画布区并展示组件

摘要在上一篇里，我们实现了左侧组件列表的展开。注意一点，在文章后面，我做了一点样式的优化，在github的提交里可以看到。目前的效果是这样：而这一篇文章，主要是为了实现画布区（当然是简单先实现出

1年前
589
5
4

从零实现一套低代码（保姆级教程） --- 【2】实现画布区并展示组件

从零实现一套低代码（保姆级教程） --- 【1】初始化项目，实现左侧组件列表

摘要低代码作为前端一个比较热门的方向，讨论度或者热度都算是拉满了。如果你想了解低代码，可以在网上找一些相关的网站。像阿里等公司都有开源的项目和在线体验。但是因为他们的代码比较牛逼，其实没有那么通

1年前
4.5k
32
12

从零实现一套低代码（保姆级教程） --- 【1】初始化项目，实现左侧组件列表