3. 項(xiàng)目視頻

可能這個(gè)階段是最多人比較困惑的點(diǎn)，當(dāng)然我也曾經(jīng)這里的一員艺晴。處在這個(gè)階段昼钻，感覺自己懂了一點(diǎn)，就想秒天秒地秒宇宙了封寞，覺得只要我看個(gè)項(xiàng)目視頻我就可以搞個(gè)類似的然评。要不是就是想看完這個(gè)視頻我就有東西寫在簡歷上了。所以在這個(gè)階段的人會去找一些大而全的視頻狈究，比如《XXX商城》碗淌，《寫個(gè)Facebook》，《XXX+YYY+ZZZ+AA+BB 完成新浪》抖锥。

不要去選這種做大而全亿眠，復(fù)雜的項(xiàng)目視頻，下面是我的觀點(diǎn)：

1. 那些你看起來的復(fù)雜項(xiàng)目磅废，并不復(fù)雜纳像，而是很無聊的項(xiàng)目。為什么拯勉？你想想復(fù)雜的定義是什么竟趾。那不就一個(gè)頁面寫成一千個(gè)頁面，一個(gè)組件寫一千個(gè)組件唄宫峦。那還不如寫好一個(gè)頁面岔帽，一個(gè)組件，慢慢 follow up斗遏。
2. 上面已經(jīng)說了寫一個(gè)千個(gè)頁面其實(shí)很無聊山卦，所以我敢保證你看完寫第二個(gè)頁面的時(shí)候，你就沒有看下去的欲望了诵次。你會覺得不就是增账蓉，刪，改逾一，查么铸本。
3. 就算你真的寫完整個(gè)項(xiàng)目，你會更迷茫：寫了個(gè)復(fù)雜的商城遵堵，別人讓你再寫一個(gè)感覺很虛箱玷。這里最大的問題就是你并不清楚學(xué)習(xí)重點(diǎn)是什么怨规。JS的 class，async/await锡足，原型鏈波丰，React 的受控和非受控，redux 原理舶得，你會了多少呢掰烟？

說了那么多，哪種項(xiàng)目比較適合你的第一個(gè)項(xiàng)目呢沐批？我比較推薦 Todo App/記賬App纫骑。你可能會覺得驚訝，就這九孩？先馆？？躺彬？下面是我的觀點(diǎn)：

1. 頁面不多煤墙，想都想得到：查看 todo 頁面，登錄顾患，個(gè)人頁
2. 資源不多番捂，只有 todo，就是對基增江解，刪设预，改，查
3. 有著大項(xiàng)目的特點(diǎn)：登錄犁河，資源管理鳖枕。你覺得簡單，那你下個(gè) split-wise桨螺，自己實(shí)現(xiàn)一下
4. 可拓展：
   4.1 登錄：JWT宾符？refresh token？權(quán)限管理灭翔？郵箱注冊魏烫？密碼加密？OAuth肝箱？reCaptcha哄褒？驗(yàn)證碼？你都想到了多少煌张？
   4.2 資源：可參考 App Store 上的 App呐赡，添加分組, 圖片，圖表骏融，notification, tag链嘀。資源的關(guān)系萌狂，單單統(tǒng)計(jì)這塊的 sql 就夠你想的了，想好了再做個(gè)可視化唄怀泊。
   4.3 樣式：再參考 App Store 上的 App茫藏，做個(gè)一模一樣的。做完再做個(gè)響應(yīng)式的包个，mobile 和 PC 都適用的樣式刷允，PWA 了解一下？
   4.3 縱向：Sketch 設(shè)計(jì)碧囊？Figma？Webpack打包纤怒？Jest 單元測試糯而？Cypress 集成測試？Travis CI泊窘？Coverallas熄驼？HTTPS？AWS部署烘豹？MySQL瓜贾？Mock Server？Logger携悯？SSR祭芦？你又想到了多少呢？
   4.4 橫向：如果上面你都挑戰(zhàn)成功憔鬼，那么試試 TODO MVC 吧：http://todomvc.com/龟劲，Vue，React轴或，Angular 都實(shí)現(xiàn)一下昌跌？
5. 省時(shí)間：有更多的時(shí)候去思考，比如照雁，為什么要 Redux蚕愤，Redux 到底怎么來的，為什么要前端去實(shí)現(xiàn) Router饺蚊，后端實(shí)現(xiàn) Router 不行么萍诱？LocalStorage 和 cookie 存用戶信息？MySQL 要怎么設(shè)計(jì)卸勺？思考好了砂沛，寫篇博客吧。如果你寫商城曙求，我相信你是只會疲于追趕課程的進(jìn)度碍庵，真的只是做個(gè)打字員映企，沒時(shí)間去思考，總結(jié)静浴，寫博客堰氓。

當(dāng)然這個(gè)階段的目的是為了讓你起步第一個(gè)項(xiàng)目，而不是去完成我上面說的苹享。這里只想說一個(gè)簡單項(xiàng)目已經(jīng)夠用了双絮，盡量去減法。所以一個(gè) Todo App/記賬 App 絕對是夠你用已有的基礎(chǔ)去起步你的第一個(gè)項(xiàng)目的得问。

另一個(gè)目的是起步你的第一篇博客囤攀，當(dāng)你寫完一個(gè) todo list 相信是有很多體會的，此時(shí)可以寫一些很爛的博客宫纬，比如 JS class 怎么用焚挠，JS 閉包是什么。你別覺得自己不行漓骚，或者看不起這些很爛的博客蝌衔，博客只有寫多了才會深入淺出，這個(gè)階段你還沒深入蝌蹂，所以只能淺入淺出噩斟。

這算是我第一個(gè)比較“成功”的項(xiàng)目了https://yanhaixiang.com/yan-xuan/#/home/recommend，樣式還可以孤个，但是可以看出有特別多的問題剃允，代碼寫的也很亂，沒有后端硼身，只有前端的 Mock Data硅急。

這是我很久之前寫的一篇博客http://www.reibang.com/p/e0941d5cc7ac，就是那么的小白佳遂，圖片营袜，思路也不那么好。

4. 抄

這個(gè)階段就一個(gè)字——抄丑罪。抄知乎荚板，抄簡書，抄 github吩屹。反正你看到什么就抄什么跪另。抄到吐為止。我以前抄過簡書煤搜，有譜么免绿，和嚴(yán)選。

有譜么：
https://haixiang6123.github.io/guitar-editor/#/

嚴(yán)選：
https://yanhaixiang.com/yan-xuan/#/home/recommend

簡書項(xiàng)目好像被我刪了擦盾。嘲驾。淌哟。

如果抄不了網(wǎng)站就抄小組件，像這些

Google 按鈕

Windows 磁貼

如果想練 Node.js辽故，那么用 JS 去實(shí)現(xiàn) cp, ls, mv 這些命令吧徒仓。當(dāng)然我也寫了一個(gè)這樣的 repo，只是后面又被我刪了誊垢。掉弛。。不過我特別喜歡命令行工具喂走，所以也有這個(gè)項(xiàng)目https://github.com/Haixiang6123/awesome-cli殃饿。

如果覺得自己很彳亍，那么打開 https://dribbble.com/芋肠，上面的設(shè)計(jì)都挺好看壁晒，也很炫，抄吧业栅。

5. 總結(jié)你的知識

抄了那么多網(wǎng)站，也會學(xué)到很多小 tricks谬晕，如7種居中方法碘裕，如何拖拽組件，css 的定位等等攒钳。這個(gè)時(shí)候我覺得最好可以看一些比較宏觀帮孔，或者專精某個(gè)技術(shù)的視頻，如《XXX新特性》不撑，《XXX最佳實(shí)踐》文兢，《XXX發(fā)展史》。

此時(shí)你還會接觸到很多相似的工具或解決方案焕檬，如 Glup vs Grunt vs Webpack vs Parcel姆坚，Vue vs React vs Angular，this.$refs vs document.getElementById vs document.querySelector实愚，text-align vs flex等等兼呵，所以，你還應(yīng)該要去對比這些東西腊敲，從根本去理解這些所謂的“技術(shù)”击喂，“術(shù)語”。

Why react hooks

這方面博客是比較多的碰辅，這里比較推薦 掘金 上面的博客比較小白懂昂，但是講某個(gè)技術(shù)是比較全的。英文的可以看 Medium没宾。

YouTube 可以搜 《why XXX》凌彬，《XXX vs YYY》等沸柔。其實(shí)此時(shí)視頻對你來說幫助并不大，因?yàn)楹苌僖曨l會講很深入的饿序。勉失。。一般視頻還是偏向給小白看的原探。

當(dāng)然看視頻乱凿，博客只是學(xué)習(xí)手段，只有寫博客才能讓自己真正去掌握一門知識咽弦，所以徒蟆，這時(shí)候就是你寫密密麻麻“筆記”的時(shí)候了，請開始你的表演型型。

6. 創(chuàng)新

曾經(jīng)很多人問我要去哪里找好項(xiàng)目做段审，我說去解決生活的問題呀，這就是創(chuàng)新闹蒜。這里創(chuàng)新并不讓你搞一些“新”東西來寺枉，而是用代碼去解決生活上的問題，當(dāng)然新東西是錦上添花绷落。

做創(chuàng)新項(xiàng)目的目的應(yīng)該是這樣姥闪，如果你的實(shí)力有 60 分就去做 70 分的創(chuàng)新項(xiàng)目，而做完這個(gè)創(chuàng)新的項(xiàng)目砌烁，你的學(xué)習(xí)能力應(yīng)該是達(dá)到 80 分的筐喳。。比如你學(xué)了爬蟲函喉，那就爬一下學(xué)校的課表硅瞧；學(xué)了 CSS 就用 CSS 畫個(gè)皮卡丘取董。不要總想著我學(xué)了 JS假夺，直接寫刷票軟件唤殴，這是個(gè)好的創(chuàng)新，但是與你實(shí)力不符撇寞。

但是看到這里的你也知道創(chuàng)新這一步是多么的靠后顿天，創(chuàng)新不僅僅需要技術(shù)的積累，也需要你對技術(shù)的熟練蔑担，熟練到一想到需求就有個(gè)大概框架的程度牌废。實(shí)現(xiàn)項(xiàng)目不過是找資源和花時(shí)間去寫代碼。

當(dāng)然啤握，在生活中也要多用編程的思維去想問題鸟缕，不要覺得很 nerd，我覺得這是一件很 cool 的事。如果別人覺得很 nerd懂从，那就問他只會寫 leetcode 除了面試有什么用授段。只要你用這種思路去想的話，遍地都是可以寫的項(xiàng)目番甩。比如知乎這么多廣告侵贵，怎么一鍵去廣告？一畝三分地每次都登錄缘薛，怎么自己起服務(wù)器去自動(dòng)簽到窍育？學(xué)校的課程這么亂，能不能自己實(shí)現(xiàn)一個(gè)國外版的超級課程表宴胧？

你看漱抓，這些都是你每天遇到的問題，但是你選擇了吐槽恕齐，而不是去解決它乞娄。

7. 縱向/橫向發(fā)展

縱向發(fā)展的話就是將你的小項(xiàng)目做大，比如個(gè)人網(wǎng)站显歧，你的第一個(gè)項(xiàng)目仪或，完完全全去跟著軟件工程（需求 -> 設(shè)計(jì) -> 代碼 -> 測試 -> 部署/發(fā)布）這一套搞下來。會再次發(fā)現(xiàn)自己的渺小士骤，東西多得學(xué)不完溶其。

當(dāng)然這里并不是先學(xué)再用，而是先用再學(xué)敦间。要做的就是實(shí)現(xiàn)，不要管最佳實(shí)踐束铭。如果非要去學(xué)的話廓块，上面每個(gè)步驟可以再次參照我的 7 步學(xué)習(xí)思路，從第一步入門即可契沫。

橫向發(fā)展暫時(shí)我還沒有時(shí)間開始带猴，所以這里就不說了。

8. 未知

等你們在評論里說吧懈万。拴清。。

最后總結(jié)

可以看到真正去學(xué)習(xí)一門技術(shù)是多么的費(fèi)時(shí)間和費(fèi)精力会通，絕對不是網(wǎng)上的3天入門口予，或者看個(gè)視頻就可以速成的。一定是經(jīng)過：入門 -> （重復(fù) -> 總結(jié) ）X3 -> 創(chuàng)新 -> 擴(kuò)展涕侈。

所以沪停，當(dāng)你覺得學(xué)不下去都是很正常的，我也經(jīng)常會放棄。放棄了 Go木张，放棄了 ruby on rails众辨，放棄了 Flutter，放棄了 angular舷礼，放棄了 Django鹃彻，放棄了 Spring。妻献。蛛株。但是，我對于前端還是一如既往的熱愛旋奢，會在這方面去深耕泳挥，和分享。

Anyway至朗，如果你喜歡前端并堅(jiān)持下去的話屉符，我會在路上等你??