無論你是編程新手，還是經驗豐富的開發人員，都需要不斷學習新的概念和語言 / 框架，才能跟得上這個快速變化的行業。以 React 為例——它在 4 年前才被 Facebook 開源，如今已經成為全球 JavaScript 開發人員的首選。當然還有 Vue 和 Angular，它們也有自己龐大的追隨者群體。然後是 Svelte、Next.js 和 Nuxt.js 等通用框架，以及 Gatsby、Gridsome、Quasar 等等。如果你想成為一名專業的 JavaScript 開發人員，那麼你至少應該具備其中一些框架和庫的相關經驗——前提是打好你的基本功，練好基礎的 JS 技術。
為了幫助你在 2020 年成為前端大師，我收集了 9 個不同的項目，每個項目都有各自不同的主題和作為技術棧的 JavaScript 框架或庫，你可以構建它們，並將它們添加到自己的技能組合中。記住，對你來說最有幫助的就是實際構建一些東西了。因此，請洗把臉清醒一下，開始練習吧！
使用 React（帶 Hooks）構建電影搜索應用
首先，你可以使用 React 構建一個電影搜索應用。下面是完成版應用的截圖：
你將學到什麼內容
構建這個應用時，你將使用相對較新的 Hooks API 來提升你的 React 技能。示例項目利用了 React 組件、許多 Hooks、一個外部 api，當然還有一些 CSS 樣式。
技術棧和功能
- 帶 Hooks 的 React
- create-react-app
- JSX
- CSS
這個項目不使用任何類，為你提供了掌握函數式 React 編程的完美切入點，並且肯定會在 2020 年為你提供幫助。
使用 Vue 構建聊天應用
為你準備的另一個很棒的項目，是使用我最喜歡的 JavaScript 庫 VueJS 來構建一個聊天應用。該應用如下所示：
你將學到什麼內容
在這個教程中，你將學習如何從頭開始設置一款 Vue 應用，創建組件、處理狀態、創建路由、連接到第三方服務，甚至處理身份驗證。
技術棧和功能
- Vue
- Vuex
- Vue 路由
- Vue CLI
- Pusher
- CSS
這真的是一個很棒的項目，可以用來入門 Vue，或提升你現有的技能以應對 2020 年的開發。你可以在下方鏈接中找到該教程。
使用 Angular 8 構建漂亮的天氣應用
此示例將幫助你使用谷歌的 Angular 8 構建一款漂亮的天氣應用：
你將學到什麼內容
該項目將教你一些寶貴的技能，例如從頭開始創建應用、先設計再開發，一直學到生產環境部署。
技術棧和功能
- Angular 8
- Firebase
- 服務端渲染
- 具有網格佈局和 Flexbox 的 CSS
- 對移動平臺友好且響應迅速
- 黑暗模式
- 美觀的用戶界面
對於這個綜合項目，我非常非常喜歡的一點是，你學到的不是孤立的內容，而是從設計到最終部署的整個開發過程。你真的應該試試這個項目！
使用 Svelte 構建待辦事項應用
與 React、Vue 和 Angular 相比，Svelte 看起來還是新秀，但依舊是 2020 年的熱門話題之一。的確，To-Do 應用不一定是最熱門的話題，但這確實可以幫助你提升 Svelte 技能。它看起來像這樣：
你將學到什麼內容
本教程將向你展示如何從頭到尾使用 Svelte 3 製作應用。它利用了組件、樣式和事件處理程序。
技術棧和功能
- Svelte 3
- 組件
- CSS 樣式
- ES6 語法
網上優秀的 Svelte 入門項目不是很多，因此我覺得這是一個很好的起點。誰知道呢，也許你就在創建另一篇更全面的 Svelte 教程，本文明年的新版就會介紹你的文章哩。
使用 Next.js 構建電子商務購物車
要創建支持開箱即用的服務端渲染的 React 應用時，NextJs 是最受歡迎的框架。該項目將向你展示如何構建一個電子商務購物車，如下所示：
你將學到什麼
在這個項目中，你將學習如何設置 Next.js 開發環境、創建新頁面和組件、獲取數據和樣式並部署一個 next 應用程序。
技術棧和功能
- Next.js
- 組件和頁面
- 數據獲取
- 樣式
- 部署
- SSR 和 SPA
學習新東西時，能有真實案例（例如電子商務展示櫃）總是很讓人開心的。
使用 Nuxt.js 構建完整的多語言博客網站
Nuxt.js 對 Vue 來說就像是 Next.js 對 React 一樣。這是一個很好的框架，可以結合服務端渲染和單頁應用程序的威力。你可以創建的應用將如下所示：
你將學到什麼內容
這個示例項目將教你從初始設置到最終部署，使用 Nuxt.js 構建完整網站的全過程。它利用了 Nuxt 所提供的許多出色功能，如頁面和組件以及 SCSS 樣式。
技術棧和功能
- Nuxt.js
- 組件和頁面
- Storyblok 模塊
- Mixins
- 用於狀態管理的 Vuex
- SCSS 樣式
- Nuxt 中間件
這對你來說是一個非常酷的項目，涵蓋了 Nuxt.js 的許多出色功能。我個人很喜歡用 Nuxt，因此你真的應該嘗試一下，因為它也會使你成為更優秀的 Vue 開發人員！
使用 Gatsby 建立博客
Gatsby 是一個出色的靜態站點生成器，在後臺使用 React 和 GraphQL。這是該項目的結果：
你將學到什麼內容
在本教程中，你將學習如何利用 Gatsby 構建出色的博客，可以很好地用來撰寫自己的文章，同時利用 React 和 GraphQL 的能力。
技術棧和功能
- Gatsby
- React
- GraphQL
- 插件和主題
- MDX/Markdown
- 引導 CSS
- 模板
如果你想創建一個博客，這是一個很好的示例，它告訴你如何利用 React 和 GraphQL 做到這一點。我並不是說 Wordpress 一直都是一個錯誤的選項，但有了 Gatsby，你可以在使用 React 的同時創建高性能的站點！（這也是一個很棒的技術組合）
使用 Gridsome 構建博客
Gridsome 對於 Vue 來說……好吧，Next/Nuxt 那節中提過了這種關係，但是 Gridsome 和 Gatsby 也是如此。兩者都使用 GraphQL 作為數據層，但 Gridsome 使用的是 VueJS。這也是一個很棒的靜態站點生成器，它將幫助你創建出色的博客：
你將學到什麼內容
該項目將教你如何構建一個簡單的博客，學習入門 Gridsome、GraphQL 和 Markdown。它還介紹瞭如何通過 Netlify 部署應用。
技術棧和功能
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
當然，這不是最全面的教程，但涵蓋了 Gridsome 和 Markdown 的基本概念，可能是一個很好的起點。
使用 Quasar 構建音頻播放器應用
Quasar 是另一個 Vue 框架，也可以用於構建移動應用。在這個項目中，你將創建一個類似於 SoundCloud 的音頻播放器應用，如下所示：
你將學到什麼內容
上面介紹的其他項目主要關注 Web 應用程序，而這個項目將向你展示如何通過 Quasar 框架，使用 Vue 來創建移動應用。你應該已經配置了可正常使用的 Cordova 設置，並配置好了 android studio/xcode。如果沒有，則該教程中有一個指向 quasar 網站的鏈接，在那裡他們向你展示瞭如何進行設置。
技術棧和功能
- Quasar
- Vue
- Cordova
- Wavesurfer
- UI 組件
這是一個小項目，展現了 Quasar 在構建移動應用方面的強大能力。
小 結
在本文中，我向大家展示了 9 個可以構建的項目，每個項目專注於一個 JavaScript 框架或庫。現在選擇權全在你自己手上：你是否會使用以前沒用過的框架來嘗試一些新的東西？或者你是否願意在自己已經具備一定知識的技術上練習項目來進一步增強技能？還是說你會繼續依賴自己喜歡的框架 / 庫，並在 2020 年用它們完成所有項目？請在下方評論區留言討論。
小編是一個多年開發經驗的程序員，今年年初整理了一批WEB前端學習資料作為粉絲福利，不論你是計算機專業想往WEB前端方向發展，還是零基礎想要轉行學習WEB前端，這份資料都能幫助到你，在自學過程中遇見問題了也可以隨時問我。只要關注我，私信我【前端】，即可領取粉絲福利。
閱讀更多 編程技能提升 的文章
