9個專案助你在2020年成為前端大師！

劉小夕發表於2019-11-05
前端

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

DEV的年度熱文，讀完覺得不錯，所以翻譯出來供大家參考，個人水平有限，文中可能會有一些翻譯錯誤，可以在評論區指正。

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

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

導讀

無論你是程式設計新手還是經驗豐富的開發人員。在這個行業中，我們不得不一直學習新概念和新語言或是框架，才能跟上快速變化。以React為例 —— FaceBook 四年前開源，現在它已經成為了全球JS開發者的首選。但是與此同時，Vue 和 Angular 也有自己的追求者。然後是 Svelte，Next 和 Nuxt.js，Gatsby，Gridsome,quasar 等等，如果你想成為專業的 JavaScript 開發人員，你在使用自己熟悉的框架進行開發的同時，還需要對不同的框架和庫有一些瞭解。

為了幫助你在2020年成為一個前端大神，我收集了9個使用了不同JS框架/庫的專案，你可以去構建或者將他們加入到自己未來的開發計劃中。記住，沒什麼比實際開發一個專案更有幫助。所以，不要猶豫，試著去開發一下。

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

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

k1.jpeg

你將學到什麼？

構建這個專案，你可以使用較新的 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構建的聊天應用程式。展示如下：

?.png

你將學到什麼？

您將學習到如何從頭開始設定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 來構建一塊漂亮的天氣應用程式：

k3.png

你將學到什麼？

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

技術棧/點

  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技能，如下：

k4.png

你將學到什麼？

本教程將向你展示如何從頭到尾使用Svelte3製作應用。 它利用了元件，樣式和事件處理程式。

技術棧/點

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

Svelte 沒有太多優秀的入門專案，這個是我覺得不錯的一個上手專案：https://medium.com/codingthes...

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

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

k5.jpeg

你將學到什麼？

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

技術棧/點

  1. Next.js
  2. 元件和頁面
  3. 資料獲取
  4. 樣式
  5. 部署
  6. SSR和SPA

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

6. 使用 Nuxt.js 構建一個多語言部落格網站

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

K6.jpg

你將學到什麼？

這個示例專案從初始設定到最終部署一步一步教你如何使用 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應用程式所期望的所有優點。該專案如下：

k7.png

你將學到什麼？

在本教程中，你將學習如何利用 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。這也是一個很棒的靜態站點生成器，它將幫助您建立出色的部落格：

k8.png

你將學到什麼？

該專案將教你如何使用 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 框架，也可以用於構建移動應用程式。 在這個專案中，你將建立一個音訊播放器應用程式，如下所示：

k9.jpeg

你將學到什麼？

不少專案主要關注Web應用程式，但這個專案展示瞭如何通過 Quasar 框架建立移動應用程式。你應該已經配置了可工作的 Cordova 設定，並配置了 android studio / xcode。 如果沒有，在教程中有一個指向quasar 網站的連結，在那裡你可以學習如何進行設定。

技術棧/點

  • Quasar
  • Vue
  • Cordova
  • Wavesurfer
  • UI Components

一個展示了Quasar在構建移動應用程式方面的強大功能的小專案：https://www.learningsomething...

總結

本文展示了你可以構建的9個專案，每個專案專注於一個JavaScript框架或庫。現在，你可以自行決定：使用以前未使用的框架來嘗試一些新的東西或是通過做一個專案來提升已有的技能，或者在2020年完成所有專案？

相關文章