特别加餐|用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
收起评论