Choerodon UI Pro 入门指南

认识 Choerodon UI

Choerodon UI 分Basic和Pro。

Basic是一组基于 Ant Design Components 3.x 实现符合谷歌 Material Design 设计体系的基础组件，满足习惯 antd 开发模式的人员。

Pro自研 DataSet 数据源，基于 DataSet 结合组件，实现数据驱动，符合低代码理念，专为中后台企业项目提高开发效率而生。

Choerodon 中文译为 “猪齿鱼”，Choerodon UI 缩写 C7N UI，主要服务于猪齿鱼开源多云技术平台及HZERO平台。

为什么使用 C7N UI Pro ？

开发效率极高

DataSet 可以理解为具有保存数据和部分行为的数据仓库，其余组件可理解为基于数据展示成行为的容器。

组件内封装大量基础和特定的功能代码。基础表单校验、增删改查接口请求等，可通过属性配置一行代码一步到位。定义好 DataSet，选好数据展现形式，即可实现界面快速开发。

前后端制定相关开发规范，极大提升开发效率，缩短开发时间。配置开放，接口灵活，复杂业务场景也可轻松应对，可扩展性强。

类型&扩展性

Pro 组件中提炼中后台应用的典型页面和场景，封装中台应用特有类型组件。

例如：

  1. * Lov (List of Value)
  2. * Lookup (Select 下拉快码)
  3. * ImageCrop (图片裁剪)
  4. * PerformanceTable (大数据表格)
  5. * ...

组件类型丰富，并考虑到中后台企业需求，丰富的全局配置，项目灵活度高。

课前准备

前置知识

如果你想回顾一下 JavaScript，你可以阅读这篇教程。注意，我们也用到了一些 ES6（较新的 JavaScript 版本）的特性。在这篇教程里，我们主要使用了箭头函数（arrow functions）、hook、let语句和 const 语句。你可以使用 Babel REPL 在线预览 ES6 的编译结果。

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。

如果您使用的是 VsCode 前端 IDE，可以参考这篇文档快速添加 c7n plugin，便利开发。

环境准备

你的本地环境需要安装yarn、git，并正确安装和配置了Node.jsv8 或以上。我们的技术栈基于ES2015+、React、UmiJS、mobx，提前了解和学习这些知识会非常有帮助。

以下文档引导教程结合create-react-app搭建项目进行实战教学。

C7N Pro 构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型。正在不断迭代优化中，发布敬请期待。

[

下一篇

Demo 界面搭建

](https://open-hand.gitee.io/choerodon-ui/choerodon-ui/zh/tutorials/demo-build)