還有 9 個項目可以磨練您的前端技能

介紹

無論您是程式設計新手還是經驗豐富的開發人員，學習新概念和語言/框架都是這個行業跟上趨勢的必要條件。

以 React 為例，Facebook 在四年前就開源了 React，現已成為全球 JavaScript 開發者的第一選擇。

當然，Vue 和 Angular 也有自己合法的粉絲群。 然後是 Svelte 和其他通用框架，例如 Next.js 或 Nuxt.js。 還有 Gatsby、Gridsome、Quasar……等等。

如果您想證明自己是一名經驗豐富的 JavaScript 開發人員，除了使用優秀的舊 JS 之外，您還應該至少擁有一些使用各種框架和程式庫的經驗。

為了幫助您在 2020 年成為前端大師，我整理了 XNUMX 個不同的項目，每個項目都專注於不同的 JavaScript 框架和庫，作為您可以構建並添加到您的投資組合中的技術堆疊。 請記住，沒有什麼比實際創造事物更能幫助你的了，所以繼續前進，用你的思想去實現它

本文的翻譯得到了 EDISON Software 的支持， 為多品牌商店製作虛擬試衣間和 測試軟體.

使用 React 的電影搜尋應用程式（帶鉤子）

您可以開始的第一件事是使用 React 創建一個電影搜尋應用程式。 下圖顯示了最終應用程式的外觀：

你會學到什麼
透過建立此應用程序，您將透過使用相對較新的 Hooks API 來提高您的 React 技能。 這個範例專案使用 React 元件、大量鉤子、外部 API，當然還有一些 CSS 樣式。

技術堆疊和功能

• 使用鉤子進行反應
• 創建反應應用
• JSX
• 的CSS

在不使用任何類別的情況下，這些項目為您提供了函數式 React 的完美切入點，並且肯定會在 2020 年為您提供幫助。 你可以找到 範例專案在這裡。 按照說明進行操作或自行製作。

使用 Vue 的聊天應用程式

您要做的另一個很棒的專案是使用我最喜歡的 JavaScript 程式庫：VueJS 建立一個聊天應用程式。 該應用程式將如下所示：

你會學到什麼
在本教程中，您將學習如何從頭開始製作 Vue 應用程式 - 建立元件、處理狀態、建立路由、連接到第三方服務，甚至處理身份驗證。

技術堆疊和功能

• Vue公司
• 威克斯
• Vue路由器
• 命令行界面
• 推
• 的CSS

對於開始使用 Vue 或提高現有技能以在 2020 年進入開發來說，這確實是一個很棒的項目。 你可以找到 教程在這裡.

使用 Angular 8 打造漂亮的天氣應用

此範例將幫助您使用 Angular 8 創建一個漂亮的天氣應用程式：

你會學到什麼
該專案將教您從頭開始建立應用程式的寶貴技能 - 從設計到開發，一直到可部署的應用程式。

技術堆疊和功能

• 角度8
• 火力地堡
• 服務端渲染
• CSS 與網格和 Flexbox
• 行動友善性和適應性
• Темныйрежим
• 介面美觀

我真正喜歡這個包羅萬象的項目的一點是，你不會孤立地研究事物。 相反，您將學習從設計到最終部署的整個開發過程。

使用 Svelte 的待辦事項應用程式

Svelte 就像是基於元件的方法的新生——至少類似於 React、Vue 和 Angular。 這是2020年最熱門的新產品之一。

待辦事項應用程式不一定是最熱門的話題，但它確實可以幫助您磨練您的 Svelte 技能。 它看起來像這樣：

你會學到什麼
本教學將向您展示如何從頭到尾使用 Svelte 3 建立應用程式。 您將使用元件、樣式和事件處理程序

技術堆疊和功能

• 苗條3
• 組件
• 使用 CSS 設計樣式
• ES 6 語法

好的 Svelte 入門專案不多，所以我發現 這是一個不錯的選擇.

使用 Next.js 的電子商務應用程式

Next.js 是建立支援開箱即用的伺服器端渲染的 React 應用程式的最受歡迎框架。

該專案將向您展示如何建立如下所示的電子商務應用程式：

你會學到什麼
在此專案中，您將學習如何使用 Next.js 進行開發 — 建立新頁面和元件、提取資料以及設計和部署 Next 應用程式。

技術堆疊和功能

• Next.js
• 元件和頁面
• 數據採樣
• 風格化
• 專案部署
• SSR 和 SPA

擁有一個像電子商務應用程式這樣的現實世界的例子來學習新事物總是很棒的。 你可以 在這裡找到教程.

使用 Nuxt.js 的成熟多語言博客

Nuxt.js 適用於 Vue，Next.js 適用於 React：一個結合伺服器端渲染和單頁應用程式功能的出色框架
您可以創建的最終應用程式如下所示：

你會學到什麼

在此範例專案中，您將學習如何使用 Nuxt.js 建立完整的網站，從初始設定到最終部署。

它利用了 Nuxt 提供的許多很酷的功能，例如頁面和元件以及 SCSS 樣式。

技術堆疊和功能

• Nuxt.js
• 元件和頁面
• 故事塊模組
• 盲鰻
• Vuex 用於狀態管理
• SCSS 用於樣式設定
• Nuxt中介軟體

這是一個非常酷的項目，其中包括許多出色的 Nuxt.js 功能。 我個人喜歡使用 Nuxt，所以你應該嘗試一下，因為它也會讓你成為一個優秀的 Vue 開發人員。

蓋茲比博客

Gatsby 是使用 React 和 GraphQL 的優秀靜態網站產生器。 這是該專案的結果：

你會學到什麼

在本教程中，您將學習如何使用 Gatsby 建立一個博客，您將使用它來使用 React 和 GraphQL 編寫自己的文章。

技術堆疊和功能

• 蓋茨比“
• 應對
• GraphQL
• 外掛和主題
• MDX/降價
• 引導 CSS
• 模板

如果您曾經想創建一個博客， 這是一個很好的例子 關於如何使用 React 和 GraphQL 來實現它。

我並不是說 WordPress 是一個糟糕的選擇，但是有了 Gatsby，您可以使用 React 建立高效能網站 - 這是一個令人驚嘆的組合。

使用 Gridsome 寫博客

Gridsome for Vue...好吧，我們已經在 Next/Nuxt 中實作了這個。
但 Gridsome 和 Gatsby 也是如此。 兩者都使用 GraphQL 作為資料層，但 Gridsome 使用 VueJS。 這也是一個令人驚嘆的靜態網站產生器，它將幫助您創建出色的部落格：

你會學到什麼

這個專案將教您如何建立一個簡單的部落格以開始使用 Gridsome、GraphQL 和 Markdown。 它還介紹瞭如何透過 Netlify 部署應用程式。

技術堆疊和功能

• 網格狀
• Vue公司
• GraphQL
• 降價
• 網絡化

這當然不是最全面的教程，但它涵蓋了 Gridsome 和 Markdown 可能是個很好的起點.

使用 Quasar 的類似 SoundCloud 的音訊播放器

Quasar 是另一個可用於建立行動應用程式的 Vue 框架。 在此專案中，您將建立一個音訊播放器應用程序，例如：

你會學到什麼

雖然其他專案主要專注於 Web 應用程序，但這個專案將向您展示如何使用 Vue 和 Quasar 框架建立行動應用程式。
您應該已經在配置了 Android Studio/Xcode 的情況下執行 Cordova。 如果沒有，手冊有一個 Quasar 網站的鏈接，在那裡他們向您展示如何設置一切。

技術堆疊和功能

• 類星體
• Vue公司
• 科爾多瓦
• 波浪沖浪者
• 使用者介面組件

小型專案，展示了 Quasar 創建行動應用程式的能力。

來源： www.habr.com