读优秀项目的源码就是代码进阶的最快路径

以前觉得开源项目都是大神才能玩的，现在发现大部分开源项目都是玩具demo级别的例子，工业界几百万行代码的大项目也是有的但不属于我目前的关注重点。而且有了Copilot和GPT看不懂的地方直接就让AI回答，实在再看不懂就直接跳过，或者换个别的项目，因为最终目的是学习模仿提高而不是给自己找不愉快，看得懂什么就读什么。最佳的学习区是 有7成看的懂3成看不懂，再多的看不懂就不适合学习了。而且很多前端项目基本都是所见即所得，没什么复杂的逻辑，基本就是UI排列分布，甚至很多都是用封装好的库

项目看多了也总结了一下自己目前学习前端项目代码的流程
1. 先install package 然后直接start 看我本地能不能顺利跑起来，如果跑都跑不起来就直接跳过
2. 能跑起来之后先快速浏览一下项目的页面都有哪些组件，想想如果是我来实现同样的功能会怎么做
3. 有了基本了解和判断之后直接看package.json里面用了哪些package, 如果没见过直接npm官网+GPT回答 给出基本的解释和常见的使用场景，然后做第二遍分析判断，尝试了解每个package在最后项目UI中是怎么用的
4. 完成前三步基本就对项目整体有个认识了，接下来就是从自己最感兴趣的点入手，在代码库中搜索关键字开始读
* UI界面上的关键字可以用React官方的Chrome拓展React Developer Tools 定位React组件名称
* 也有很多组件名称都是通用的
* 或者从某一个url path入手找到对应的route

比如我今天在看的8k star的项目 `tailwind-nextjs-starter-blog` 里面的 tag 管理系统其实就是metadata 的管理，search快速查找功能就是直接用的第三方库pliny中的search button来做的，搜索这种本来还觉得很难的点，它直接通过第三方库十几行代码就搞定了，假如不读源码自己瞎想就是在给自己增加难度，答案都有了直接抄就完了，没必要重复造轮子

#KK独立开发日记  #前端开发  #UI