9個項目助你在2020年成爲前端大師！

原文連接：https://dev.to/simonholdorf/9...

DEV的年度熱文，讀完以爲不錯，因此翻譯出來供你們參考，我的水平有限，文中可能會有一些翻譯錯誤，能夠在評論區指正。

本篇文章一共涉及了9個流行的框架/庫，沒有具體的介紹使用方法，而是給了一些很是棒的實戰教程。

初學者(也許一些有經驗的開發者也是同樣)在讀完官方文檔，想寫一個項目練手的時候不知道作什麼項目好，或是有想法，可是無從下手。那麼這篇文章將會給你帶來很大的幫助。

更多文章可戳: https://github.com/YvetteLau/...

導讀

不管你是編程新手仍是經驗豐富的開發人員。在這個行業中，咱們不得不一直學習新概念和新語言或是框架，才能跟上快速變化。以React爲例 —— FaceBook 四年前開源，如今它已經成爲了全球JS開發者的首選。可是與此同時，Vue 和 Angular 也有本身的追求者。而後是 Svelte，Next 和 Nuxt.js，Gatsby，Gridsome,quasar 等等，若是你想成爲專業的 JavaScript 開發人員，你在使用本身熟悉的框架進行開發的同時，還須要對不一樣的框架和庫有一些瞭解。

爲了幫助你在2020年成爲一個前端大神，我收集了9個使用了不一樣JS框架/庫的項目，你能夠去構建或者將他們加入到本身將來的開發計劃中。記住，沒什麼比實際開發一個項目更有幫助。因此，不要猶豫，試着去開發一下。

1. 使用React(with hooks)構建一個電影搜索應用

首先，你可使用React構建一個電影搜索應用。展現以下：

你將學到什麼？

構建這個項目，你可使用較新的 Hook API 來提高你的 React 技能。示例項目使用了React組件，不少 hooks 以及一些外部的 API，固然還有一些CSS樣式。

技術棧/點

1. React(Hooks)
2. create-react-app
3. JSX
4. CSS

你能夠在這裏看到這個示例項目：https://www.freecodecamp.org/...

2.使用Vue構建一個聊天應用

另一個要介紹給你的很棒的項目是使用Vue構建的聊天應用程序。展現以下：

你將學到什麼？

您將學習到如何從頭開始設置Vue應用，建立組件，處理狀態，建立路由，鏈接到第三方服務，甚至是處理身份驗證。

技術棧/點

1. Vue
2. Vuex
3. Vue Router
4. Vue CLI
5. Pusher
6. CSS

這真的是一個很是棒的項目，不論是用來學習Vue或者是提高現有的技能，以應對2020年的發展。你能夠查看這個教程： https://www.sitepoint.com/pus...

3. 使用Augular8構建一款漂亮的天氣應用

此示例將幫助你使用 Google 的 Angular 8 來構建一塊漂亮的天氣應用程序：

你將學到什麼？

該項目將教你一些寶貴的技能，例如從頭開始建立應用，從設計到開發，一直到生產就緒部署。

技術棧/點

1. Angular 8
2. Firebase
3. SSR
4. 網絡佈局和Flexbox
5. 移動端友好 && 響應式佈局
6. 深色模式
7. 漂亮的用戶界面

對於這個綜合項目，我真正喜歡的是，不是孤立地學習東西，而是從設計到最終部署的整個開發過程。

https://medium.com/@hamedbaat...

4. 使用 Svelte 構建一個 To-Do 應用

與React，Vue和Angular相比，Svelte 還很新，但還是熱門之一。好的，To-Do應用不必定是那裏最熱門的項目，但這確實能夠幫助你提升Svelte技能，以下：

你將學到什麼？

本教程將向你展現如何從頭至尾使用Svelte3製做應用。 它利用了組件，樣式和事件處理程序。

技術棧/點

1. Svelte 3
2. Components
3. CSS
4. ES6語法

Svelte 沒有太多優秀的入門項目，這個是我以爲不錯的一個上手項目：https://medium.com/codingthes...

5. 使用 Next.js 構建購物車

Next.js 是一個輕量級的 React 服務端渲染應用框架，該項目將向你展現如何構建一個以下所示的購物車：

你將學到什麼？

在這個項目中，你將學習如何設置 Next.js 的開發環境，建立新頁面和組件，獲取數據，設置樣式並部署一個 next 應用。

技術棧/點

1. Next.js
2. 組件和頁面
3. 數據獲取
4. 樣式
5. 部署
6. SSR和SPA

你能夠在此處找到該教程：https://snipcart.com/blog/nex...

6. 使用 Nuxt.js 構建一個多語言博客網站

Nuxt.js 是 Vue 服務端渲染應用框架。你能夠建立一個以下所示的應用程序：

你將學到什麼？

這個示例項目從初始設置到最終部署一步一步教你如何使用 Nuxt.js 構建一個完整的網站。它使用了 Nuxt 提供的許多出色功能，如頁面和組件以及SCSS樣式。

技術棧/點

• Nuxt.js
• 組件和頁面
• Storyblok模塊
• Mixins
• Vuex
• SCSS
• Nuxt中間件

這個項目包含了涵蓋了 Nuxt.js 的許多出色功能。我我的很喜歡使用 Nuxt 進行開發，你應該嘗試使用它，這將使你成爲更好的 Vue 開發人員！https://www.storyblok.com/tp/...

除此以外，我還找到了一個B站的視頻：https://www.bilibili.com/vide...

7. 使用 Gatsby 構建一個博客

Gatsby是一個出色的靜態站點生成器，它容許使用React做爲渲染引擎引擎來搭建一個靜態站點，它真正具備現代web應用程序所指望的全部優勢。該項目以下：

你將學到什麼？

在本教程中，你將學習如何利用 Gatsby 構建出色的博客。

技術棧/點

1. Gatsby
2. React
3. GraphQL
4. Plugins & Themes
5. MDX / Markdown
6. Bootstrap CSS
7. Templates

若是你想建立博客，這個示例教你如何利用 React 和 GraphQL 來搭建。並非說 Wordpress 是一個很差的選擇，可是有了 Gatsby ，你能夠在使用 React 的同時建立高性能站點！

https://blog.bitsrc.io/how-to...

8. 使用 Gridsome 構建一個博客

Gridsome 和 Vue的關係與 Gatsby 和 React 的關係同樣。Gridsome 和 Gatsby 都使用 GraphQL 做爲數據層，可是 Gridsome 使用的是 VueJS。這也是一個很棒的靜態站點生成器，它將幫助您建立出色的博客：

你將學到什麼？

該項目將教你如何使用 Gridsome，GraphQL 和 Markdown 構建一個簡單的博客，它還介紹瞭如何經過Netlify 部署應用程序。

技術棧/點

1. Gridsome
2. Vue
3. GraphQL
4. Markdown
5. Netlify

固然，這不是最全面的教程，但涵蓋了 Gridsome 和 Markdown 的基本概念，多是一個很好的起點。

https://www.telerik.com/blogs...

9.使用 Quasar 構建一個相似 SoundCloud 的音頻播放器

Quasar 是另外一個 Vue 框架，也能夠用於構建移動應用程序。 在這個項目中，你將建立一個音頻播放器應用程序，以下所示：

你將學到什麼？

很多項目主要關注Web應用程序，但這個項目展現瞭如何經過 Quasar 框架建立移動應用程序。你應該已經配置了可工做的 Cordova 設置，並配置了 android studio / xcode。 若是沒有，在教程中有一個指向quasar 網站的連接，在那裏你能夠學習如何進行設置。

技術棧/點

• Quasar
• Vue
• Cordova
• Wavesurfer
• UI Components

一個展現了Quasar在構建移動應用程序方面的強大功能的小項目：https://www.learningsomething...

總結

本文展現了你能夠構建的9個項目，每一個項目專一於一個JavaScript框架或庫。如今，你能夠自行決定：使用之前未使用的框架來嘗試一些新的東西或是經過作一個項目來提高已有的技能，或者在2020年完成全部項目？