与 ChatGPT 一起快速上手 TypeScript + React 前端应用开发

Created time
Mar 3, 2023 03:33 PM
date
Mar 3, 2023
slug
learn-react-with-ai
status
Published
summary
tags
编程
type
Post

背景

为了学习 gRPC 和 PostgreSQL，我开发了一个简单的笔记系统后端服务：具备基本增删改查功能，并且支持标签和属性。为了好玩，我决定把前端界面也做出来！
这个小项目的前端界面非常简单，但我对前端开发的了解不多，懒惰的我并不愿意为此学习一套全新的技术栈。某一天突发奇想，我不愿意做的事情，为什么不用 AI 帮忙呢？
想必诸君都已经尝试过使用 ChatGPT 来回答自己熟悉领域内的问题，当问题复杂到一定程度时，得到的答案会渐渐开始偏离现实。
然而我的需求太适合使用 AI 来辅助完成了：
notion image
关于我：
  • 后端程序员，对 Web 应用开发有经验。学生时代学习过 JavaScript，模糊地了解 Promise 大概是个啥。
  • 对编程有热情，求真意愿强。不会对 AI 吐出来的文本不假思索且毫无耐性地糊进项目里。事实上，通过 ChatGPT 辅助学习，这样的情况很容易避免：只需要做多问一句“为什么”就可以了！
  • 我并不想成为一个高级前端工程师，如果有复杂需求，我会选择和其他人合作。目前我只需要为我的个人项目做出遥控器一般的简单界面。根据二八定律，我只需要学会一小部分知识。
关于 ChatGPT：
  • 永远自信，即使答案错得离谱。所以，想要高效地通过 ChatGPT 学习，提问内容必须可以被验证。
  • 其实我也不知道它的原理，本文以下描述都是使用经验。

成果

不卖关子，先放成果。
主界面：
  • HTML / CSS 排版
  • 网络请求
  • 输入框、按钮、标签列表等组件；回调函数
notion image
notion image
笔记页面：
  • HTML / CSS 排版
  • 网络请求
  • 组件比主页复杂一些
全屏截图，一条笔记有多个子级笔记。
全屏截图，一条笔记有多个子级笔记。

行动

技术栈选择

  • React：我想尝试一下更偏向函数式编程的框架；如果只需要做简单应用，Vue 可能是更容易上手的选择。
  • TypeScript：我完全忍受不了 JavaScript。本次项目学习一下 TypeScript，看看它能不能让前端开发更快乐一些。我有 C# 语言的使用经验，算是一个加分项。
  • grpc-web：后端服务是使用 gRPC 开发的。grpc-web 能使用与后端共享的 proto 文件，生成 RPC 调用代码，在客户端调用时就能保证类型正确。这个项目没有 HTTP API，我不喜欢手动拼接字符串来调用接口。注：grpc-web 生成 TypeScript 仍然是实验性功能。

学习

单纯靠 AI 学习是不可能的，如果我什么都不清楚，我怎么可能知道我在向正确的方向前进？以下是我在项目开发前学习的内容：
  • Tutorial: Intro to React
    • React 官方文档中的入门教程，跟着教程快速实现一个井字棋游戏。
    • 学习完成后，我对 React 组件有了基本的概念，并且能理解 React 代码的语法规则（JSX，看起来像是 JavaScript 混合 HTML）。
    • 本教程还包含一些组件设计的思想教学，例如为什么组件需要不可变状态、父子组件需要传递数据时如何设计状态转换逻辑。这些抽象的系统设计知识，我不可能从 ChatGPT 上学到，因为我不可能问。
  • Pico.css
    • 我需要一个简洁但不丑陋的界面。在这个项目中，我计划只做排版，直接使用已有的 CSS 主题。这个框架添加的 CSS 类很少，引入框架后直接使用原生 HTML 标签即可。
  • TypeScript
    • 我偷懒了，我只是看了 Youtube 上的两个十几分钟介绍视频。

代码生成

学习了新知识（React），手上有一个新工具（ChatGPT）；最想学的 TypeScript 还没开始尝试。灵光一现，我把整份 JavaScript 源代码扔进 ChatGPT，然后让它修改成 TypeScript 会怎么样？
notion image
ChatGPT 非常适合做这样的工作，互联网上有大量 JavaScript 迁移至 TypeScript 的资料，并且它的转换规则非常清晰；直接把整个源文件扔进去，ChatGPT 返回的结果是完全正确的。这时候出问题的环节又轮到我了：我不知道如何用 npm 搭建一个使用 TypeScript 的 React 项目。这个问题的最快解决方法显然是看视频教程。
总结一下目前我的学习思路：
notion image
至此，我学会了 React 项目的组织形式、TypeScript 大概长相；再加上已有的零星 HTML/CSS/JavaScript 知识，我可以开始开发笔记系统项目了。
笔记系统项目的第一个功能是主页标题列表。显然，我不会回忆应该使用哪种方法才能在 React 写一个循环，根据数据渲染每一个标题，整个项目的第一段代码是完全让 ChatGPT 生成的。接着，再处理下一个待办，再解决遇上的问题，如此往复，整个项目就完成了。
在项目完成时，我能理解源代码中每个组件的功能。但如果没有 AI，我并不能再顺畅地编写一个类似的组件，因为我把大部分细节问题全都扔给了 AI。如果我想更深入地学习呢？这样借助 AI 快速糊出一个项目的经验有用吗？从我的个人体验来看，这些经验让我接触到了许多新手完全没有考虑过的问题，在寻找答案的同时我的技能树也会逐渐枝繁叶茂。我的思考范围也随之扩大，同时建立了不同领域新旧知识之间的联系。其次，和其他技术不同，编程的巨大魔力之一，就是人人都能轻易地执行一个看得见摸得着的程序；如果我有新的想法，验证它仅仅需要时间。

好问题

简单列举一些由 ChatGPT 解决的好问题。
  • 类似查字典的问题。例如：想实现某种样式，CSS 怎么写。和使用搜索引擎不同，你可以直接把 HTML 粘贴过来再让 AI 帮你生成！
  • 懒得想，求助见多识广的 AI。例如：如何命名变量；如何使用 React 实现某种功能。
      • notion image
      notion image
  • 语法问题。许多反对使用 TypeScript 的开发者都支持同一个理由：它的类型语法过于繁琐。作为一个新手，自然会写出大量有问题的代码。程序代码是结构化的，并且具有详细的规则和大量资料，这类问题直接让 AI 解决，体验非常棒，它能给出非常细致的解释，并且绝大部分是对的。
      • notion image
  • 小黄鸭调试法！遇到卡壳的问题，停下来整理思路，把问题在聊天框组织好，按下回车键。也许 ChatGPT 返回的结果用处不大，但组织问题的过程能像小黄鸭一样提供帮助。

自信的 AI

即使生成了错误的回答，ChatGPT 返回内容的语气也充满自信。利用 ChatGPT 学习带来了新问题：我需要提适合 ChatGPT 回答的问题，做正确的引导，并且时刻注意验证它返回的内容。这对于一个新手的要求并不低。

后记

与传统学习方式相比，这样学习有多快？这个问题我回答不了。因为我很懒，按照大家理解的学习方式，我根本不会开始学习前端开发。
即使本文的主旨是鼓励大家通过 AI 来学习编程。但我认为这项新技术对技能学习的影响被吹捧者夸大了。在知识获取方面，受益的人仍然是少数；就像搜索引擎并没有改变大众的信息差一样。
 

© nilh2a2 2024