基于 Zion 平台现有能力之上，通过编写 React 组件代码的方式扩展自定义组件的能力，如动态表单与即时验证、数据驱动的图表、复杂动画与过渡效果、交互式地图与数据可视化等。点击查看B站教学视频

先决条件

用户对 FunctorZ 平台有一定了解和实践，同时拥有一定的前端知识，拥有一定的 TypeScript 知识，并能够自己编写符合自己业务需求的 React 组件代码。对 React 感兴趣，请参考免费教学视频与文档：React 从入门到项目实战教程，React 官方中文文档

开始使用

functorz 也可以安装到本地全局，安装后对应的命令为 zvm。

# 本地全局安装
npm i -g functorz

在自己的工作目录下运行如下命令。

# signin 账号 密码 --platform=平台（目前仅支持 functorz, momen。默认为 functorz）
functorz signin ouyangchao@functorz.com doushizhutou --platform=functorz

等待命令执行完成。

继续运行如下命令。

# create 项目名
functorz create test21

等待命令执行完成。该步命令会创建一个模板项目，并且在平台上注册一个代码组件项目。一个代码组件项目中可以包含多个代码组件。注意此时还没有发布任何版本。

到代码组件项目目录中，安装依赖。

cd test21
npm install

一个典型的代码组件库项目的基本结构如下所示。

其中 src/components 是声明和编辑代码组件主要目录。每个自定义组件必须符合下述规则。

组件必须有一个目录在 src/components 下，该目录名称必须为组件名，该目录下必须至少包含 index.ts 和组件名.tsx。其中 index.ts 用于导出组件，组件名.tsx 用于编写业务逻辑。
src/components/组件名/组件名.tsx 下声明的组件的属性类型声明必须 export 4 个 interface，分别是 [组件名PropData]， [组件名StateData]，[组件名Event]，以及 [组件名Prop]。且该 4 个 interface 符合如下约定。
[组件名PropData] 用于声明从外部宿主项目需要传入的数据，目前支持的类型包括 string, number, boolean。
[组件名StateData] 用于声明从代码组件内部暴露给外部宿主项目的状态，其类型必须为 State，其中 State 需要从 zvm-code-context 包中引入。
[组件名Event] 用于声明代码组件内部除外外部的事件，其属性的类型必须为 EventHandler。EventHandler 需要从 zvm-code-context 包中引入。
[组件名Prop] 固定包含上述 3 个类型的属性，且名称分别 propData, propState 和 event。

可以参考模板项目中的示例代码。请严格遵循上述约定，否则不保证能够正确识别相关组件和对应的声明。

运行如下命令发布项目。

# 必须在项目的目录下运行
functorz publish

发布成功，此时可以前往平台的任意无代码项目中的左边栏配置新发布的代码组件库。

在任意无代码项目中，左边栏点击对应图标，在弹窗中找到刚发布的代码组件项目，并勾选。

此时左边栏最下方新增新发布的代码组件。

新配置或更改代码组件项目后，一定要同步数据库或者预发布才能在运行时正常使用。点击左上角对应图标按钮。

配置的属性根据编辑代码时声明的属性类型解析而成，所以一定要严格遵守约定。