無論您是剛開始編程還是已經是一名經驗豐富的開發人員,在這個行業中,學習新的概念和語言/框架是跟上快速變化的必要條件。
以React爲例,它是四年前才由Facebook開源的,它已經成爲全球JavaScript開發人員的第一選擇。
當然,Vue和Angular也有其合法的追隨者羣體。然後是Svelte和通用框架,例如Next.js或Nuxt.js。還有Gatsby 和 Gridsome 和 Quasar …,以及,以及。
如果你想成爲一名出色的JavaScript開發專家,你至少應該在不同的框架和庫中有一些經驗。
爲了幫助你在2020年成爲前端大師,我收集了9個不同的項目,每個項目都有不同的主題和不同的JavaScript框架或庫作爲技術棧,您可以構建它們並將它們添加到學習計劃中。記住,沒有什麼比實際構建東西更有幫助的了,所以勇往直前,讓你的頭腦變得敏銳,讓它成爲現實。
1.使用React(帶hook)構建電影搜索應用程序
首先,您可以使用React構建電影搜索應用程序。下圖顯示了最終應用的外觀:
您將學到什麼
在構建此應用程序時,您將使用相對較新的Hooks API來提高React技能。該示例項目利用了React組件,許多hook,一個外部API,當然還有一些CSS樣式。
技術棧和功能
React Hook
create-react-app
JSX
CSS
在不使用任何類的情況下,這個項目爲你提供了一個完美的入門到實戰的機會,並且肯定會在2020年爲您提供幫助。
您可以在此處找到示例項目。按照教程進行操作,或者自己動手做。
https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
2.使用Vue構建聊天應用
對您來說,另一個很棒的項目是使用我最喜歡的JavaScript庫:VueJS構建聊天應用程序。
該應用程序將如下所示:
您將學到什麼
學習本教程後,您將學習如何從頭開始設置Vue應用-創建組件,處理狀態,創建路由,連接到第三方服務,甚至處理身份驗證。
技術棧和功能
Vue
Vuex
Vue Router
Vue CLI
Pusher
CSS
這真的是一個很棒的項目,開始使用Vue或提高您的現有技能,以應對2020年的發展。
您可以在此處找到該教程。
https://www.sitepoint.com/pusher-vue-real-time-chat-app/
3.使用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
我真的非常喜歡這個綜合項目,因爲您不會孤立地學習東西。相反,您將學習整個開發過程——從設計到最終部署。
你真的應該做這個。
https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e
學習是一個艱苦的過程,當然如果能把技術學成,最後也一定可以獲得高薪工作。掌握一個好的學習方法,跟對一個學習的人非常重要。今後要是大家有啥問題,可以隨時來問我,能幫助別人學習解決問題,對於自己也是一個提升的過程。自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理這是我的前端技術交流Q un ++++++++++++++
錢面是-518--
中間是-672---
後面是--693--++++++++++++++
有問題隨時在裏面問我,能給大家提出很多寶貴建議。
4.使用Svelte構建待辦應用
Svelte有點像一個新來的孩子,至少與React, Vue和Angular相比是這樣。儘管如此,它仍然是2020年的熱門之一。
待辦事項不一定是最熱門的話題,但這確實可以幫助您提高Svelte技能。看起來像這樣:
您將學到什麼
本教程將向您展示如何使用svelte3製作一個應用程序,從開始到結束。它使用組件、樣式和事件處理程序。
技術棧和功能
Svelte 3
Components
Styling via CSS
ES 6 語法
市面上並沒有那麼多好的的Svelte入門項目,所以我覺得這是一個不錯的開始。
https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6
5.使用Next.js構建電商購物車
Next.js是最流行的框架,用於創建支持應用程序開箱即用的React應用程序。
該項目將向您展示如何構建一個如下所示的電子商務購物車:
您將學到什麼
在這個項目中,您將學習如何設置一個Next.js開發環境——創建新頁面和組件、獲取數據、設置樣式並部署下一個應用程序。
技術棧和功能
Next.js
Components and pages
Data fetching
Styling
Deployment
SSR and SPA
有一個真實的例子(例如電子商務展示櫃)來學習新的東西總是很高興。您可以在此處找到該教程。
https://snipcart.com/blog/next-js-ecommerce-tutorial
6.使用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開發人員。
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
7.用蓋茨比(Gatsby)建立博客
Gatsby是一個很棒的靜態站點生成器,它在後臺使用React和GraphQL。這是該項目的結果:
您將學到什麼
在本教程中,您將學習如何利用Gatsby構建出色的博客,以便在使用React和GraphQL的同時編寫自己的文章。
技術棧和功能
Gatsby
React
GraphQL
Plugins and themes
MDX/Markdown
Bootstrap CSS
Templates
如果您想創建博客,這是一個很好的示例,說明如何利用React和GraphQL做到這一點。
https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
我並不是說WordPress總是一個不好的選擇,但是使用Gatsby,您可以在使用React的同時創建高性能網站——這是一個了不起的組合。
8.用Gridsome建立博客
Gridsome是Vue的……好吧,我們已經在Next/Nuxt中有了它。
但是對於Gridsome和Gatsby也是如此。兩者都使用GraphQL作爲數據層,但是Gridsome使用VueJS。這也是一個很棒的靜態網站生成器,可幫助您創建出色的博客:
您將學到什麼
該項目將教您如何構建一個簡單的博客,以開始使用Gridsome,GraphQL和Markdown。
它還介紹瞭如何通過Netlify部署應用程序。
技術棧和功能
Gridsome
Vue
GraphQL
Markdown
Netlify
當然,這不是最全面的教程,但它確實涵蓋了Gridsome和Markdown的基本概念,並且可能是一個很好的起點。
https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome
9.使用Quasar構建類似SoundCloud的音頻播放器應用
Quasar是另一個Vue框架,也可以用於構建移動應用程序。
在此項目中,您將創建一個音頻播放器應用,如下所示:
您將學到什麼
雖然其他項目主要關注Web應用程序,但本項目將向您展示如何通過Quasar框架使用Vue創建移動應用程序。
您應該已經配置了可運行Android Studio / Xcode的Cordova設置。如果沒有,該教程中將有一個指向Quasar網站的鏈接,在那裏他們向您展示瞭如何進行設置。
技術棧和功能
Quasar
Vue
Cordova
WaveSurfer
UI Components
一個小項目,展示了Quasar在構建移動應用程序方面的強大功能。
總結
在本文中,我向您展示了可以構建的9個項目,每個項目都專注於另一個JavaScript框架或庫。
現在,選擇權全由您自己決定:您是否會使用以前未使用的框架來嘗試一些新的東西?還是要通過爲已經具備一定知識的技術進行項目來增強技能?還是您會依賴自己喜歡的框架/庫,並在2020年完成所有項目?