我用ChatGPT学习React和Next.js

AI编程/Vibe Coding 遇到问题需要帮助的，联系微信 ezpoda，免费咨询。

"什么是Hook,我为什么需要它?"

这是我在初级开发者的第一个早晨在ChatGPT中输入的第一个东西。

我盯着React文档,试图理解useState,老实说……我感到完全不知所措。

从大学毕业,我主要使用Svelte工作。现在,突然,我需要为新工作快速学习React。官方文档感觉像是写给已经了解React的人的。

像 "触发重新渲染"和"当前状态"这样的短语到处都是。

我一直在阅读、滚动、重读……什么都不理解。

我不需要高级理论。 我需要有人耐心地解释基础知识,而不假设我已经知道一切。

所以我打开了我的编码助手并问了我能想到的最直接的问题:

"什么是useState?"

回复立即回来了:

作为一个初级开发者……那句话对我来说绝对没有意义。

我再次尝试。 "我不理解。"

这次解释略有不同:

仍然令人困惑。

感觉像读到了为别人而不是为像我这个水平的人写的定义。

那是我的导师介入的时候。

他看着我的屏幕,阅读了对话,说了一些完全改变了我的编码学习方式的东西:

"你问错了方式。AI不知道你是谁。 你需要告诉它如何向你解释事情。"

然后他补充了:

"与其要求解释……要求它像你5岁一样向你解释。"

这听起来几乎很愚蠢。

但我还是试了一下。

"你能像5岁一样解释useState吗?"

这次的回答完全不同:

而且第一次……

有什么东西点击了。

这不是一个技术定义。 这是一个真正满足我所在位置的解释。

在那一刻,我意识到了一些重要的事情。

我不只是找到了一个工具。 我找到了一个导师,他可以在24/7调整解释,直到我真正理解。

2、开发我的学习方法

那个useState突破不仅仅帮助我理解一个React概念。 它教给了我更重要的东西,即如何以正确的方式与AI学习。

直到那个时刻,我一直在将我的编码助手视为Google。 我会问一个问题并期望得到完美的答案。

但我的导师让我意识到了一些简单的事情:

答案的质量取决于你问得有多好。

所以我开始为自己建立一个小系统。

在问任何技术问题之前,我会设置上下文:

"我是一个学习React的初级开发者。"

然后我会定义我的水平:

"像我刚接触React一样解释。""使用简单的类比。"

然后是期望:

"不要展示代码,只解释概念。"

只有那时我会问实际问题,一次关注一个想法。

之后,我会深入:

"你能给我一个简单的例子吗?""我为什么需要这个?""这解决了什么问题?"

这听起来很小,但这改变了一切。

与其阅读教科书定义,我开始得到真正有意义的解释。 "像我5岁一样解释"的方法成为我遇到技术概念时的首选。

而且慢慢地……我的问题开始演变。

在第一周,我问的是:

"什么是useState?"

到第四周,我的问题看起来完全不同,更详细,更有意图,并且更诚实地说明了我所不理解的内容。

类似这样的:

"我是一个学习React的初级开发者。我必须为我的项目使用useEffect,但我不理解它实际上做什么。你能像5岁一样使用简单的类比向我解释吗?不要展示代码,先解释想法。然后给我一个简单的例子。还有……我为什么甚至需要useEffect?为什么我不能直接将逻辑写在组件里面?"

我不只是在问问题了。

我在一层一层地建立理解。

而且我越清楚地解释我的情况、我的水平和我的困惑…… 我的AI导师就越能适应我。

它开始感觉少像工具…… 更像一个从不厌倦我的问题的耐心的老师。

3、从React到Next.js

一旦我开始对React基础知识感到舒适,我做出了感觉像自然下一步的决定,将我的项目转换为Next.js。 我认为这将是一个简单的升级。

并不是。

我的第一个问题几乎是本能的:

"我刚刚将我的项目从React改为Next.js。现在有什么不同?"

那个问题打开了一个全新的基于文件的路由、服务器组件与客户端组件以及叫做App Router的东西的大门。

而且突然……我又困惑了。

从React到Next的转变不仅仅关于学习新功能。 这是关于取消学习假设。 在React中,一切在浏览器中运行。 在Next.js中,东西的工作方式非常不同。

起初,我尝试再次阅读文档。但这一次,我不再是迷失在理论中,而是做了一些不同的事情——我开始与我的编码导师进行专注的、来回的对话。 不是大问题。 具体问题。 真实问题。 当某样东西坏了时你会问的那种类型。

我记得问:

我:"我如何知道我的代码的哪些部分在服务器上运行与在浏览器中运行?"

代理:"在Next.js中,组件默认是服务器组件。如果你在顶部看到'use client',那部分在浏览器中运行。"

这说得通……但只是部分。

所以我进一步推动。

我:"但我从React移动到了Next.js。我之前没有这个概念。我现在如何知道什么是服务器端?"

代理:"在纯React中,一切在浏览器中运行。在Next.js中,组件首先在服务器上运行,除非你用'use client'明确标记它们。这就是你的一些React代码可能崩溃的原因。"

现在事情开始变得清楚了。

我将这个想法针对我面临的一个实际问题进行了测试。

我:"所以如果我在useState或onClick处理程序周围遇到错误……那些组件需要'use client'吗?"

代理:"完全正确。那些是浏览器专用的功能。将'use client'添加到交互式组件,其余部分作为服务器组件以获得更好的性能。"

那次对话清除了数小时的困惑。

我不只是在学习Next.js概念,而是在我自己代码、自己错误和自己错误的上下文中理解它们。

那造成了一切的不同。

与其阅读文档数小时,我可以进行专注的、实用的讨论,并在几分钟内理解问题。

那是我又一次意识到了一些重要的事情:

AI作为导师的真正力量不在于给出定义。 它在于帮助你调试你的思考。

通过询问我面临的精确问题而不是广泛的、通用的问题,我最终理解了从一开始就困扰我的服务器与客户端的区别。

4、两个月后

两个月前,我在努力理解基本的React概念。 今天,我自信地使用Next.js构建全栈应用程序。

这种转变的发生并不是因为我突然变得聪明了…… 也不是因为我找到了"完美的教程。"

它的发生是因为我学会了如何学习。更具体地说,我学会了如何将AI用作老师,而不仅仅是作为一个吐出答案的工具。

我停止追逐定义。 我开始追逐理解。 我学会了问更好的问题。 承认我不理解某些事情时。 放慢速度并一层一层地建立概念。

而这一切改变了。

React和Next.js只是开始。

我获得的真正技能远更有价值: 我现在可以不害怕而是有方法地接近任何新技术。 我知道如何分解东西。 我知道如何要求清晰度。 我知道如何将困惑转化为对话。

而且一旦你学会了那个…… 你不再只是跟随教程。 你正在学习如何将AI作为一个与你一起成长的导师来教自己。

5、对我有效的东西

回顾起来,帮助我成长的不仅仅是工具或技术。 是我在一路上发展的一些小学习习惯。

几件事造成了真正的不同。

学习正确地提示

我导师的建议改变了一切:告诉AI你想被如何教。

首先要求类比每当某样东西感觉太技术时,我会先要求一个简单的类比。它帮助我在跳入代码之前建立心理模型。

渐进地建立我停止试图一次学习所有东西。 首先是useState。 然后是useEffect。 然后是组件行为。 然后是Next.js中的服务器与客户端组件。

每个概念在前一个的基础上分层,突然那些曾经感觉很复杂的事情开始感觉相互连接了。

将React概念与Next.js功能分开

这是一个大的转折点。 我意识到React和Next.js不是同一回事——Next.js建立在React之上。 理解这种区别帮助我停止混合概念,开始为它们的实际用途学习每个工具。

6、如果下次我会做得不同

回顾起来,如果我必须从头开始学习React和Next.js,有几件事我会改变。 不是因为我失败了,而是因为我现在理解了什么让初学者慢下来。

我不会问通用问题

像*"什么是useState?"*这样的问题给了我通用的回答。 如果我可以重新开始,我从第一天就会问得更好:

"你能用一个我能简单关联的简单例子像5岁一样解释useState吗?"

仅那个改变就会节省数小时的困惑。

我不会尝试一次学习所有东西

在某个时候,我问了像这样的事情:

"解释React和Next.js。"

那不是学习,那是信息过载。

现在我知道更好的方法是: 一次一个概念,一次一个问题,一层一层。

我不会在不理解的情况下复制代码

在开始,我受到诱惑只是复制解决方案以让事情工作。 但工作代码不与理解代码相同。 现在,在实现任何东西之前,我确保我知道: 每个部分做什么。 它为什么存在。 它解决了什么问题。

那是真正的成长发生的地方。

我不会跳过验证

AI很强大,但它并不完美。 有时它给出过时的解决方案。 有时它过度复杂化东西。 有时它假设不存在的上下文。 现在我总是用官方文档或其他可信的来源交叉检查重要的事情。 不是因为我不信任AI 而是因为负责任地学习意味着验证你学到的东西。

如果我从第一天遵循这四条规则,我的学习曲线会更平滑、更快,并且令人沮丧得多。

7、其他初级开发者的提示

如果你是一个试图学习React、Next.js,或者诚实地任何新东西的初级开发者,这里有一些对我有很大帮助的实用习惯。

总是设置你的经验水平不要假设AI知道你从哪里开始。直接告诉它:

• "我刚接触React。"
• "我以前从未使用过hooks。"
• "我理解JavaScript,但React感到令人困惑。"

那单独一行就会完全改变解释的风格。

具体说明什么让你困惑

"我不理解"是诚实的,但太广泛了。 更好的版本是:

• "我不理解为什么useEffect需要依赖数组。"
• "我不理解什么触发了重新渲染。"
• "我不理解为什么这段代码工作但感觉不对。"

具体的困惑 → 具体的帮助。

要求逐步分解

与其问"我如何构建组件?",不如问:

• "创建React组件的步骤是什么?"
• "我应该先写什么?"
• "接下来是什么,为什么?"

逐步的答案减少不知所措,并让学习感觉可行。

保持问"为什么"

这对我来说是最大的升级。 当你理解模式背后的"为什么"时,你停止记忆并开始像开发者一样思考。

• React为什么重新渲染?
• 我们为什么分离组件?
• 为什么Next.js有服务器和客户端组件?

"为什么"将知识转化为技能。 而且所有这些中最重要的提醒:

你的AI不是搜索引擎。 它是一个对话伙伴。 你越清楚地向它解释你需要的、你的困惑、你的目标,它就能更好地教你了。 那是真正的秘密。

8、旅程

两个月前,我甚至不知道JSX是什么。 React文档令人生畏。每页似乎都假设我已经理解了以前从未见过的概念。我困惑、缓慢,并不断质疑我是否真的适合前端开发。

今天,我可以使用Next.js构建全栈应用程序。 但如果我诚实,这不是故事中最重要的部分。

真正的转变不仅仅是学习React、hooks或服务器组件。 而是学会了如何学习,并意识到我不再需要独自弄清楚一切了。

AI变成的不仅仅是快速答案的工具。 它变成了学习伙伴。 一个我可以毫无犹豫地问"愚蠢"问题的人。 一个可以用十种不同方式重新解释解释直到有什么东西点击的人。 一个可以在我的理解增长时适应的人。

而那完全改变了我的信心。

因为技术将不断变化。 框架将兴衰。 今天是React和Next.js。明天会是其他东西。

但现在我知道我可以适应。 我知道如何分解复杂的想法。 我知道如何问更好的问题。 我知道如何将困惑转化为清晰。

而这是一个没有任何单个框架可以教,但会陪伴我整个职业生涯的技能。

原文链接: ChatGPT as My Coding Mentor: How I Mastered React and Next.js as a Beginner

汇智网翻译整理,转载请标明出处