無論是新手還是有經驗的開發人員，在Web前端這個行業中，學習新的概念和語言/框架是非常重要的。你必須跟上快速變化的步伐。以React為例——Facebook的開源版本在4年前就已經成為全球JavaScript開發者的首選。當然，Vue和Angular也有大量的粉絲群。然後是Svelte和一些通用框架，如Next.js或Nuxt。js, Gatsby, Gridsome, Quasar，等等。如果你想成為一名出色的JavaScript開發專家，你至少應該在不同的框架和庫中有一些經驗。
為了幫助你在2020年成為前端開發大師，我整理了5個不同的項目，每個項目都有一個不同的主題和一個不同的JavaScript框架或庫，作為一個技術棧，你可以建立和添加到你的技能組合。記住，沒有什麼比實際構建東西對你更有幫助的了，所以勇往直前，讓你的頭腦變得敏銳，讓它成為現實吧！
使用React（帶Hooks）創建一個電影搜索應用
首先你可以使用React來創建一個電影搜索應用。下面是最終版本的效果圖：
- 你會學到什麼
構建這個應用程序時，您將使用相對較新的hook API來提高您的React技能。示例項目使用React組件、許多鉤子、一個外部API，當然還有一些通過CSS實現的樣式。
- 技術棧和功能
- React with Hooks
- create-react-app
- JSX
- CSS
這個項目為你提供了一個進入functional react的完美入口點，在2020年一定會對你有所幫助。您可以在這裡找到示例項目：https://www.freecodecamp.org/news/howto -build-a- movies -search-app- use -react-hooks-24eb72ddfaf7/
跟隨教程學習，或者賦予它自己的風格！
用Vue創建一個聊天應用程序
另一個適合您的項目是使用我最喜歡的JavaScript庫VueJS構建一個聊天應用程序。該應用程序將看起來像這樣：
- 你會學到什麼
通過本教程，您將瞭解如何從頭開始設置Vue應用程序、創建組件、處理狀態、創建路由、連接到第三方服務，甚至是處理身份驗證。
- 技術棧和功能
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
這真的是一個偉大的項目，可以從Vue開始，或者提高你現有的技能，在2020年解決發展問題。你可以在這裡找到教程：https://www.sitepoint.com/pusher-vue-real-time-chat-app/
用Angular 8構建一個美麗的天氣應用
這個例子將幫助你使用谷歌的Angular 8構建一個漂亮的天氣應用程序：
- 你會學到什麼
這個項目將教會您有價值的技能，比如從頭開始創建應用程序，從設計到開發，一直到產品就緒部署。
- 技術棧和功能
- Angular 8
- Firebase
- Server-Side Rendering
- CSS with Grid Layout and Flexbox
- Mobile friendly & responsive
- Dark Mode
- Beautiful UI
關於這個全面的項目，我真正喜歡的是，你不是孤立地學習東西，而是從設計到最終部署的整個開發過程。你真的應該這麼做！
https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e
用Svelte創建一個待辦事項應用程序
與React、Vue和Angular相比，Svelte算是新人，但它仍是2020年的熱門之一。好吧，待辦事項應用程序不一定是最熱門的話題，但它確實會幫助你提高你的苗條技能，就像這樣：
- 你會學到什麼
本教程將向您展示如何使用svelte3從頭到尾製作一個應用程序。它使用組件、樣式和事件處理程序
- 技術棧和功能
- Svelte 3
- Components
- Styling via CSS
- ES 6 syntax
現在還沒有那麼多好的入門項目，所以我覺得這是一個不錯的開始。
https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6
使用Next.js構建一個電子商務購物車
NextJs是用於創建支持服務器端即時呈現的React應用程序的最流行框架。這個項目將向你展示如何建立一個像這樣的電子商務購物車：
- 你會學到什麼
在這個項目中，您將學習如何設置一個next .js開發環境、創建新頁面和組件、獲取數據、樣式和部署next應用程序。
- 技術棧和功能
- Next.js
- Components and Pages
- Data Fetching
- Styling
- Deployment
- SSR and SPA
有一個真實的例子，例如電子商務展示，來學習新東西總是很好的。你可以在這裡找到教程:
https://snipcart.com/blog/next-js-ecommerce-tutorial
在本文中，我向您展示了可以構建的5個項目，每個項目都關注於另一個JavaScript框架或庫。現在選擇權在你：你會使用一個你以前從未使用過的框架來嘗試一些新的東西嗎?或者你想通過一個你已經掌握了一些技術的項目來增強你的技能?或者你會依賴你最喜歡的框架/庫來完成2020年的所有項目?請留下評論，不要忘記關注我：
@瘋狂的程序猿
