讓你能夠在2020年成爲前端大師的9個項目

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

以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
• Vuex
• Vue Router
• Vue CLI
• 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年完成全部項目？

---

原文： https://medium.com/better-pro...
做者： Simon Holdorf
翻譯： 杜尼卜

若是對你有所啓發和幫助，能夠點個關注、收藏，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。

如今關注公衆號，送精品視頻視頻教程大禮包！