特别加餐｜用ChatGPT开发一个看板项目
宋一玮
你好，我是宋一玮，欢迎来到 React 应用开发专栏。
最近两三个月，以 ChatGPT 为代表的生成式 AI 技术突飞猛进，终于真正威胁到了前端工程师的地位（笑）。有不少同学希望了解 AI，尤其是生成式 AI 对前端开发工作和前端工程师意味着什么，我个人也在关注相关领域的进展，正好趁着这次加餐的机会，跟你交流一下我的想法。
通过这次加餐，我们将主要交流以下三点。
了解如何利用 ChatGPT 生成一个基本可用的 React 看板项目。
了解如何利用 ChatGPT 修改现有代码和编写单元测试。
探讨 ChatGPT 对前端开发意味着什么。
在开始正式内容前，我假设你已经学习了本专栏的大部分或全部内容，或是对 React 应用开发有一定了解。当然，如果你已经有 ChatGPT 的使用经验就更好了。
用 ChatGPT 从零开始生成一个 React 看板项目
说是从零开始，其实我们还是会借助 Create React App（CRA）这款脚手架工具来搭建项目。考虑到脚手架工具足够成熟足够自动化，用 AI 来代替它意义不大。
我选择的模型是 GPT-4，首次使用的提示语（Prompt）如下。
我需要用 React.js 18 实现一个单页应用。
这个应用总体是上中下三行布局，页头显示“我的看板”标题，页脚显示一行版权信息。中间的内容区域分成左中右三列，每列都是一个任务列表，从左到右依次是“待处理”、“进行中”、“已完成”列表。用户可以向“待处理”列表添加新的任务；“待处理”列中的每个任务都有一个“开始”按钮，点击这个按钮会把对应的任务移动到“进行中”列表中；“进行中”中的每个任务都有一个“完成”按钮，点击这个按钮会把对应的任务移动到“已完成”列表中。
请提供对应的 JSX 和 CSS 代码。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
生成式AI技术在前端开发中的应用日益突出。本文以ChatGPT为例，展示了如何利用其生成一个基本可用的React看板项目。作者提供了使用GPT-4的提示语，并展示了ChatGPT生成的React组件代码和CSS样式。通过对话交互，ChatGPT展示了对英文提示语的响应能力。文章还指出，ChatGPT在训练模型时涵盖了诸如Redux、Immer、TypeScript等主流技术栈，展示了其在开发大中型React Web应用时的潜力。此外，文章还介绍了如何利用ChatGPT对话上下文修改生成的代码，以及为React组件生成单元测试。作者强调了AI工具在软件工程师手上更灵活、更具扩展性、可维护性。最后，文章提出了对前端工程师的思考，强调了学好前端技术知识的重要性。整体而言，本文通过实际示例展示了ChatGPT在前端开发中的应用潜力，同时提醒读者在使用AI工具的同时，仍需深入学习前端技术知识。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《现代 React Web 开发实战》，新⼈⾸单¥59
《现代 React Web 开发实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(2)
- 最新
- 精选
coderHOW最近就是学习新的领域的时候，使用GPT可以很快的了解流程写出demo来，未来基础功能和配置相关的工作使用合适的prompt可以用AI生成符合的最基本产品了，我们就做更精细的工作来修改代码满足需求作者回复: 你好，coderHOW，我非常赞同你的观点，我也是在最近在ChatGPT的辅助下，使用自己之前并不熟悉的Python Notebooks技术做了不少数据分析的工作，这让我进一步确定，AI会成为我们今后研发工作中的得力助手。
2023-05-22归属地：广东2
AI悦创能不能多更新这个系列？公司需要说基于 gpt ，结合公司知识库、数据库实现智能客服啥的。SOS。望作者回复作者回复: 你好，AI悦创，抱歉我这么晚才回复。GenAI这个话题很大，且并不限于前端领域，这个专栏是涵盖不了的。极客时间上已经开设了很多GenAI相关的专栏，推荐你去看看，尤其是徐文浩老师的专栏《AI 大模型之美》https://time.geekbang.com/column/intro/100541001 ，我自己也在学。
2023-07-26归属地：福建1
收起评论