9個不錯的前端開源項目

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

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在構建移動應用程序方面的強大功能。