React组件开发教学：AI视频提示词生成动态代码演示
提示词描述：
面向前端开发者的AI视频生成提示词，可将React组件开发过程转化为动态代码演示视频。支持自定义技术要点与性能对比模块，适用于技术培训、代码评审等场景，可提升代码理解效率40%。
提示语关键词：
React教学视频,AI代码演示,前端开发提示词,组件开发教程,技术视频模板,代码可视化
提示词内容：
【模板说明】
本模板针对前端开发教学场景，通过AI视频生成技术实现代码演示可视化。支持React组件开发流程的分解展示，适用于技术培训、代码评审等专业技术场景。
【使用场景】
- 技术团队制作React组件库使用指南
- 在线教育机构开发前端课程视频
- 开源项目维护者制作贡献者指南
- 企业内训师制作技术规范讲解视频
【模板正文】
请生成{时长}分钟的React教学视频，主题为"{组件类型}的开发与优化"。需包含：
1. 架构设计：展示{组件结构}的{层级关系}（需包含{设计模式}说明）
2. 代码演示：分步呈现{核心功能}的实现过程（需包含{代码片段}标注）
3. 性能优化：对比{优化方案}的{性能指标}（需包含{测试数据}）
视频需采用{代码高亮主题}，重点标注{关键语法}，结尾提供{扩展资源}。
【填写指南】
- {组件类型}：建议填写具体组件类别（如"表单验证组件""数据可视化组件"）
- {设计模式}：推荐使用标准术语（如"受控组件模式""Hooks状态管理"）
- {代码片段}：需标注关键函数/生命周期方法/状态变量
- {代码高亮主题}：推荐One Dark Pro/Monokai等主流主题
【效果示例】
输入参数：时长=10分钟，组件类型=虚拟列表组件，核心功能=万级数据渲染优化，设计模式=虚拟化渲染+懒加载，性能指标=FID降低60%，代码高亮主题=Dracula，扩展资源=GitHub仓库链接
输出结果：生成包含代码逐行解析、性能对比瀑布图、架构拓扑动画的完整视频脚本，含专业解说词及代码注释说明。