react项目案例_基于自然流布局的H5编辑器brick design 项目篇

最新推荐文章于 2024-10-11 07:06:48 发布

weixin_39779530

最新推荐文章于 2024-10-11 07:06:48 发布

阅读量398

点赞数

文章标签： react项目案例

本文链接：https://blog.csdn.net/weixin_39779530/article/details/111617819

版权

brick design是一个通用的React库，采用模块化设计，包括core库、redux-bridge、react库等多个子库。它使用TypeScript编写，利用yarn workspaces和lerna进行项目管理。core库作为状态管理和数据处理中心，redux-bridge库负责状态分发和连接，而react库则包含React框架下的关键组件。此外，还有针对不同功能的库如react-web和render，以及未来的code-generator库，用于实现代码到可视化的双向转换。

摘要由CSDN通过智能技术生成

开源地址：

brick-design/react-visual-editorgithub.com

知乎视频www.zhihu.com

项目简介

brick design设计之初目标是作为一个通用的库，可以让使用者以react组件的形式集成到项目中，项目根据brick design中中各功能模块的不同拆分成了多个库，各个库通过core库与redux-bridge库关联，实现插拔式结构，需要哪个功能库就添加那个，整个brick design库是一个开放式的设计，你可以在原有的功能基础上扩展实现自己想要的功能。

项目目录结构

brick-design                       
├─ docs                     
├─ examples
│  └─ react-example
├─ packages
│  ├─ core
│  ├─ react
│  ├─ react-web
│  ├─ redux-bridge
│  ├─ render 
│  └─ code-generator  
├─ scripts
├─ .eslintignore
├─ .eslintrc
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ .travis.yml 
├─ .umirc.js 
├─ babel.config.js
├─ commitlint.config.js
├─ lerna.json
├─ tsconfig.base.json
├─ tsconfig.jest.json
├─ tsconfig.json                          
└─ package.json

因为brick-design 包含了多个库项目，由于各项目之间又相互关联，所以项目使用了yarn workspaces来做多项目管理，使用lerna做项目关联与版本管理，jest做单元测试，其中打包工具使用的是rollup，项目整体使用TypeScript编写。

下边主要介绍一下各个主要目录：

docs 文档集

docs项目文档目录（目前还未写完文档），使用dumi来做文档项目的构建。

examples 案例集

这个目录主要包含了，关于brick design的案例，目前只有react-example的单独项目案例该案例使用create-react-app创建，是一个独立可运行的项目，examples中的案例除了作为展示brick design的，同时也是在开发中调试brick design功能模块的工具。

packages 库集

packages包含了brick design的所功能模块库，也是开发中的重点，目前包含了6个库，packages中每个库都是单独的一个项目，下边分别介绍一下。

core库

core库顾名思义，核心库，是brick design的状态管理中心与数据处理中心，所有涉及到页面json的操作，都属于core库管理，技术实现上core库是一个纯redux 封装，core库单独封装的目的是为了实现core库的通用性，因为core库不依赖任何前端框架，所以理论上可以用在任何支持reudx的前端框架中，比如在Rax中使用实现Rax的可视化页面编辑。

redux-bridge 库

redux-bridge库见名知意，该库的主要功能就是提供core库的状态分发和core库与其他功能模块的连接，是一个简版的react-redux，与react-redux的不同在与redux-bridge采用的声明式获取状态，并且不依赖任何前端框架，是一个纯函数，主要提供react hook形式的调用方式，可以通过配置参数来让其支持不同的框架，目前支持React 和 Rax。

react 库

react 库的取名是为了区分框架，对，前边对core库与redux-bridge 库的介绍应该也看出了brick design目标不只是支持React，后期也会支持Rax、React-Native等，react库主要包含了brick design在react框架中实现可视化编辑的画板组件与组件树组件，该库整体基于React Hook编写，react库是除了core以外最核心的库，也是brick design的灵魂所在。

react-web库

react-web库主要包含brick design 的中除组件树与画板以外的其他功能库，其中包括选择组件面板组件、属性配置面板组件、样式配置面板组件、以及属性配置和样式配置相关的定制输入组件。目前这个库还未重构，其中大部分组件依赖antd组件库,库中组件大部分是一些功能型组件，该库可以不依赖使用，使用者可以依照react库文档，实现相应的功能组件，或者扩展功能组件等。