無論您是剛開始程式設計還是已經是一名經驗豐富的開發人員，在這個行業中，學習新的概念和語言/框架是跟上快速變化的必要條件。

以React為例，它是四年前才由Facebook開源的，它已經成為全球JavaScript開發人員的第一選擇。

當然，Vue和Angular也有其合法的追隨者群體。然後是Svelte和通用框架，例如Next.js或Nuxt.js。還有Gatsby 和 Gridsome 和 Quasar …。

如果你想成為一名出色的JavaScript開發專家，你至少應該在不同的框架和庫中有一些經驗。

為了幫助你在2020年成為前端大師，我收集了9個不同的專案，每個專案都有不同的主題和不同的JavaScript框架或庫作為技術棧，您可以構建它們並將它們新增到學習計劃中。記住，沒有什麼比實際構建東西更有幫助的了，所以勇往直前，讓你的頭腦變得敏銳，讓它成為現實。

使用React（帶hook）構建電影搜尋應用程式

首先，您可以使用React構建電影搜尋應用程式。下圖顯示了最終應用的外觀：

您將學到什麼

在構建此應用程式時，您將使用相對較新的Hooks API來提高React技能。該示例專案利用了React元件，許多hook，一個外部API，當然還有一些CSS樣式。

技術棧和功能

• React Hook
• create-react-app
• JSX
• CSS

在不使用任何類的情況下，這個專案為你提供了一個完美的入門到實戰的機會，並且肯定會在2020年為您提供幫助。

您可以在此處找到示例專案。按照教程進行操作，或者自己動手做。

使用Vue構建聊天應用

對您來說，另一個很棒的專案是使用我最喜歡的JavaScript庫：VueJS構建聊天應用程式。

該應用程式將如下所示：

學習本教程後，您將學習如何從頭開始設定Vue應用-建立元件，處理狀態，建立路由，連線到第三方服務，甚至處理身份驗證。

• Vue

• Vue

• Vue

• Vue

• Pusher

• CSS

這真的是一個很棒的專案，開始使用Vue或提高您的現有技能，以應對2020年的發展。

您可以在此處找到該教程。

使用Angular 8構建美麗的天氣應用

此示例將幫助您使用Google的Angular 8構建美觀的天氣應用程式：

這個專案將教您從頭開始建立應用程式的寶貴技能，從設計到開發，再到生產就緒部署。

• Angular 8
• Firebase
• Server-side rendering
• CSS with Grid Layout and Flexbox
• Mobile friendly and responsive
• Dark mode
• Beautiful UI

我真的非常喜歡這個綜合專案，因為您不會孤立地學習東西。相反，您將學習整個開發過程——從設計到最終部署。

你真的應該做這個。

使用Svelte構建待辦應用

Svelte有點像一個新來的孩子，至少與React, Vue和Angular相比是這樣。儘管如此，它仍然是2020年的熱門之一。

待辦事項不一定是最熱門的話題，但這確實可以幫助您提高Svelte技能。看起來像這樣：

本教程將向您展示如何使用svelte3製作一個應用程式，從開始到結束。它使用元件、樣式和事件處理程式。

• Svelte 3
• Components
• Styling via CSS
• ES 6 語法

市面上並沒有那麼多好的的Svelte入門專案，所以我覺得這是一個不錯的開始。

使用Next.js構建電商購物車

Next.js是最流行的框架，用於建立支援應用程式開箱即用的React應用程式。

該專案將向您展示如何構建一個如下所示的電子商務購物車：

在這個專案中，您將學習如何設定一個Next.js開發環境——建立新頁面和元件、獲取資料、設定樣式並部署下一個應用程式。

• Next.js
• Components and pages
• Data fetching
• Styling
• Deployment
• SSR and SPA

有一個真實的例子（例如電子商務展示櫃）來學習新的東西總是很高興。您可以在此處找到該教程。

使用Nuxt.js構建功能完善的多語言部落格網站

Nuxt.js代表Vue，Next.js代表React：一個很好的框架，結合了伺服器端渲染和單頁面應用程式的功能。

您可以建立的最終應用程式將如下所示：

這個示例專案將教您如何使用Nuxt.js構建完整的網站——從初始設定到最終部署。

它利用了Nuxt必須提供的許多很酷的功能，例如頁面和元件以及SCSS的樣式。

• Nuxt.js
• Components and pages
• Storyblok module
• Mixins
• Vuex for state management
• SCSS for styling
• Nuxt middlewares

這對您來說是一個非常酷的專案，涵蓋了Nuxt.js的許多出色功能。我個人很喜歡與Nuxt合作，因此您應該真正嘗試使用它，因為它也會使您成為更好的Vue開發人員。

用蓋茨比(Gatsby)建立部落格

Gatsby是一個很棒的靜態站點生成器，它在後臺使用React和GraphQL。這是該專案的結果：

在本教程中，您將學習如何利用Gatsby構建出色的部落格，以便在使用React和GraphQL的同時編寫自己的文章。

• Gatsby
• React
• GraphQL
• Plugins and themes
• MDX/Markdown
• Bootstrap CSS
• Templates

如果您想建立部落格，這是一個很好的示例，說明如何利用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構建類似SoundCloud的音訊播放器應用

Quasar是另一個Vue框架，也可以用於構建移動應用程式。

在此專案中，您將建立一個音訊播放器應用，如下所示：

雖然其他專案主要關注Web應用程式，但本專案將向您展示如何透過Quasar框架使用Vue建立移動應用程式。

您應該已經配置了可執行Android Studio / Xcode的Cordova設定。如果沒有，該教程中將有一個指向Quasar網站的連結，在那裡他們向您展示瞭如何進行設定。

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI Components

一個小專案，展示了Quasar在構建移動應用程式方面的強大功能。

總結

在本文中，我向您展示了可以構建的9個專案，每個專案都專注於另一個JavaScript框架或庫。

現在，選擇權全由您自己決定：您是否會使用以前未使用的框架來嘗試一些新的東西？還是要透過為已經具備一定知識的技術進行專案來增強技能？還是您會依賴自己喜歡的框架/庫，並在2020年完成所有專案？

從事全棧6年，專門建立的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和需要注意的小細節，互相交流學習，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端專案實戰教程，學習工具，全棧開發學習路線以及規劃）點：