前端工程化实战:AI驱动React组件库开发与文档自动生成
提示词描述:
专为前端开发团队打造,聚焦于企业级UI组件库的标准化建设。通过具体案例引导AI输出包含TypeScript类型定义、复杂交互逻辑及JSDoc文档的完整组件代码,帮助前端工程师统一代码规范,提升组件复用率,并大幅降低组件库文档的编写成本。
提示语关键词:
AI前端开发, React组件开发, ChatGPT写前端, UI组件库开发, 前端工程化提示词, TypeScript类型定义
提示词内容:
假设你是一位资深的前端架构师,精通React生态系统及前端工程化体系。我们团队正在从零构建一套企业级UI组件库,目前需要开发一个支持复杂交互的高级数据表格组件,并同步生成标准化的开发文档,以赋能整个研发团队的日常业务开发。
请以该高级数据表格组件为例,展示完整的开发流程。首先,提供组件的TypeScript类型定义,需涵盖基础属性、事件回调、插槽配置及自定义渲染函数的接口声明。其次,编写组件的核心实现代码,要求采用函数式组件与Hooks,实现虚拟滚动、列固定、动态排序及行内编辑等高级功能。最后,基于JSDoc规范,为该组件生成结构化的API文档,包含属性说明、默认值、类型及具体使用案例。
代码需具备高度的可测试性与主题定制能力,支持CSS变量注入与暗黑模式切换。文档部分需确保语义清晰、示例详实,能够显著降低其他开发者的接入成本。请确保所有代码均符合ESLint与Prettier的最高严格标准,无任何潜在的性能泄漏风险,并具备良好的无障碍访问特性。