基于 React18 + TypeScript + Tailwind + Zustand 的低代码平台

中文 | English

一个使用 React，快速搭建页面的低代码平台

计划实现：

• 操作历史快照
• 支持生成 react 模板组件
• 生成组件大纲树
• 提供常见的表单和列表模板
• 在 sandbox 中执行自定义逻辑
• 基于 monaco-editor 自定义代码补全规则
• 使用 Schema 描述数据结构（因为 schema 可以生成校验函数）

模型驱动的视图

从最简单的结构来看，一个模型驱动的视图体系包含以下要素：

• 模型

  • 定义状态结构
  • 定义动作

• 视图

  • 订阅状态
  • 触发动作

这是很简单的一种渲染模式，可以适用于大多数的场景。

克隆项目

git clone https://github.com/pengxiaohua/react-lowcode

cd react-lowcode

pnpm install

• run

pnpm run dev

• build

pnpm build

技术栈

• 编程语言：TypeScript 5.x + JavaScript
• 构建工具：Vite 5.x
• 前端框架：React 18.x
• 状态管理：Zustand
• Tailwind CSS：Tailwindcss
• HTTP 工具：Axios
• Git Hook 工具：husky + lint-staged
• 代码规范：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
• 提交规范：Commitizen + Commitlint

• 自动部署：GitHub Actions

功能清单

• 动态添加页面
• 拖拽式生成组件
• service worker + indexeddb 实现无服务端的前端交互
• 数据源管理(支持导入 swagger JSON 生成数据模型及接口)
• 提供预置函数
• 更多组件的封装
• 其他...

提交规范

• feat 增加新功能
• fix 修复问题/BUG
• style 代码风格相关无影响运行结果的
• perf 优化/性能提升
• refactor 重构
• revert 撤销修改
• test 测试相关
• docs 文档/注释
• build 对构建系统或者外部依赖项进行了修改
• chore 依赖更新/脚手架配置修改等
• workflow 工作流改进
• ci 持续集成
• types 类型定义文件更改
• wip 开发中