[技術翻譯]9個可以讓你在2020年成為前端專家的項目

来源:https://www.cnblogs.com/yzsunlei/archive/2019/10/29/11756501.html
-Advertisement-
Play Games

本次預計翻譯三篇文章如下： "01.[譯]9個可以讓你在2020年成為前端專家的項目" 02.[譯]預載入響應圖像 03.[譯]您應該知道的13個有用的JavaScript數組技巧 我為什麼要創建這個git倉庫？通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址 ...


本次預計翻譯三篇文章如下：

我為什麼要創建這個git倉庫？通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：https://github.com/yzsunlei/javascript-article-translate

介紹

無論您是編程新手還是經驗豐富的開發人員。在互聯網這個行業中，必須不斷學習新的概念和語言/框架以跟上快速變化的步伐。以React為例 - 4年前由Facebook開源，它現在已經成為全球JavaScript開發人員的首選。Vue和Angular當然也有其相應的追捧者。然後是Svelte，以及Next.js或Nuxt.js等通用框架，以及Gatsby，Gridsome，Quasar等等。如果您想成為一名專業的JavaScript開發人員，那麼您至少應該在不同的框架和庫中擁有一些實戰經驗 - 除了使用原生的JS完成工作任務。

為了幫助您在2020年成為前端專家(Frontend Master)，我收集了9個不同的項目，每個項目都有不同的主題和不同的JavaScript框架或庫作為技術棧，您可以構建這些項目並將其添加到學習目標中。請記住，沒有什麼比項目實戰(actually building stuff)對您有更大的幫助了，因此，請不斷進取(sharpen your mind)，實現這一目標！

使用React（使用鉤子）構建電影搜索應用程式

首先，您可以使用React構建電影搜索應用程式。下麵是應用程式最終的示例圖：

示例項目React

您將學到什麼

構建這個應用程式，您將使用相對較新的Hooks API來提升您的React技能。示例項目利用了React組件，鉤子，一個外部api，當然還有一些CSS樣式。

技術棧和功能

  • React with Hooks
  • create-react-app
  • JSX
  • CSS

不使用任何類，該項目為您提供了功能的完美切入點，並且肯定會在2020年為您提供幫助。您可以在此處找到示例項目：https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/請按照本教程進行操作，或者按照您自己的方式進行！

使用Vue構建聊天應用

對您來說，另一個很棒的項目是使用我最喜歡的JavaScript庫VueJS構建聊天應用程式。該應用程式將如下所示：

示例項目Vue

您將學到什麼

在本教程之後，您將學習如何從頭開始配置Vue應用，創建組件，處理狀態，創建路由，連接到第三方服務，甚至處理身份驗證。

技術棧和功能

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

這真的是一個很棒的項目，可以開始使用Vue或提升您現有的技能以應對2020年的開發。您可以在此處找到該教程：https://www.sitepoint.com/pusher-vue-real-time-chat-app/

使用Angular 8構建美麗的天氣應用

此示例將幫助您使用Google的Angular 8構建美觀的天氣應用程式：

示例項目Angular

您將學到什麼

該項目將教您一些寶貴的技能，例如從頭開始創建應用程式，從設計到開發，一直到生產部署。

技術棧和功能

  • Angular 8
  • Firebase
  • 服務端渲染
  • 使用柵格佈局和Flex佈局
  • 移動端友好 & 響應式
  • 暗黑模式
  • 漂亮的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 kinda是新手，但仍是2020年的熱門話題之一。好的，To-Do應用程式不一定是那裡最熱門的話題，但這確實可以幫助您提高Svelte技能看起來像這樣：

示例項目Svelte

您將學到什麼

本教程將向您展示如何從頭到尾使用Svelte 3製作應用。它應用了組件，樣式和事件處理程式。

技術棧和功能

  • Svelte 3
  • 組件
  • 通過CSS樣式
  • ES 6語法

那裡沒有很多優秀的Svelte入門項目，因此我覺得這是一個很好的起點。誰知道呢，也許您是在創建另一篇更全面的Svelte教程的人，它將在本帖子的明年版本中介紹？https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

使用Next.js構建電子商務購物車

NextJs是用於創建支持應用程式開箱即用的React應用程式的最受歡迎的框架。該項目將向您展示如何構建一個如下所示的電子商務購物車：

示例項目下一步

您將學到什麼

在這個項目中，您將學習如何設置Next.js開發環境，創建新頁面和組件，獲取數據，樣式並部署下一個應用程式。

技術棧和功能

  • Next.js
  • 組件和頁面
  • 數據獲取
  • 樣式
  • 部署方式
  • SSR和SPA

擁有一個真實的例子（例如電子商務展示櫃）來學習新的東西總是很高興。您可以在這裡找到該教程：https://snipcart.com/blog/next-js-ecommerce-tutorial

建立完整的多語言博客網站Nuxt.js

Nuxt.js對Vue的作用是Next.js的反映。一個很好的框架，可以結合伺服器端渲染和單頁應用程式的功能。您可以創建的最終應用程式將如下所示：

示例項目Nuxt

您將學到什麼

這個示例項目將教您從初始設置到最終部署，如何使用Nuxt.js構建完整的網站。它利用了Nuxt必須提供的許多優秀功能，如頁面和組件以及SCSS樣式。

技術棧和功能
  • Nuxt.js
  • 組件和頁面
  • Storyblok模塊
  • 混合(Mixins)
  • Vuex狀態管理
  • SCSS樣式
  • Nuxt中間件

這對您來說是一個非常酷的項目，涵蓋了Nuxt.js的許多優秀功能。我個人很喜歡使用Nuxt，因此您應該真正嘗試使用它，因為它也將使您成為更好的Vue開發人員！https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

用Gatsby建立博客

Gatsby是一個出色的靜態站點生成器，在後臺使用React和GraphQL。這是該項目的結果：

示例項目蓋茨比

您將學到什麼

在本教程中，您將學習如何利用Gatsby構建優秀的博客，在使用React和GraphQL的同時可以很好地編寫自己的文章。

技術棧和功能

  • Gatsby
  • React
  • GraphQL
  • 插件和主題
  • MDX/Markdown
  • Bootstrap
  • 模板

如果您想創建博客，這是一個很好的示例，說明如何利用React和GraphQL做到這一點。我並不是說Wordpress是一個不好的選擇，但是有了Gatsby，您可以在使用React的同時創建高性能站點！https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

用Gridsome建立博客

Gridsome適用於Vue，好吧，我們已經在Next/Nuxt中擁有了，但是Gridsome和Gatsby也是如此。兩者都使用GraphQL作為數據層，但是Gridsome使用VueJS。這也是一個很棒的靜態站點生成器，它將幫助您創建出色的博客：

示例項目Gridsome

您將學到什麼

該項目將教您如何構建一個簡單的博客，以開始使用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

使用Quasar構建類似於SoundCloud的音頻播放器應用

Quasar是另一個Vue框架，也可以用於構建移動應用程式。在這個項目中，您將創建一個音頻播放器應用程式，如下所示：

示例項目Quasar

您將學到什麼

儘管其他項目主要關註Web應用程式，但該項目將向您展示如何通過Quasar框架使用Vue創建移動應用程式。您應該已經配置了Cordova工作環境，並配置了android studio/xcode。如果沒有，則在教程中有一個指向quasar網站的鏈接，他們向您介紹瞭如何進行設置。

技術棧和功能

  • Quasar
  • Vue
  • Cordova
  • Wavesurfer
  • UI組件

一個小項目，展示了Quasar在構建移動應用程式方面的強大功能。https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

結論

在本文中，我向您展示了您可以構建的9個項目，每個項目專註於一個JavaScript框架或庫。現在，選擇權全由您自己決定：您是否會使用以前未使用的框架來嘗試一些新的東西？還是要通過為已經具備一定知識的技術進行項目來增強技能？還是您會依賴自己喜歡的框架/庫，併在2020年完成所有項目？隨時發表評論，不要忘記關註我，以獲取更多即將發佈的帖子！

原文鏈接：https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【MongoDB詳細使用教程】二、MongoDB基本操作
    [toc] 1、數據類型 MongoDB常見類型 | 說明 | Object ID|文檔ID String|字元串，最常用，必須是有效的UTF 8 Boolean|存儲一個布爾值，true或false Integer|整數可以是32位或64位，這取決於伺服器 Double|存儲浮點值 Arrays| ...
  • Excel數據導入到Sql server
    問題:資料庫內直接操作導致 錯誤 0xc020901c: 數據流任務 1: 源 - yndata1$.輸出[Excel 源輸出] 上的 源 - yndata1$.輸出[Excel 源輸出].列[indications] 出錯。返回的列狀態是:“文本被截斷，或者一個或多個字元在目標代碼頁中沒有匹配項。 ...
  • Oracle排名函數(Rank)實例詳解
    這篇文章主要介紹了Oracle排名函數(Rank)實例詳解,需要的朋友可以參考下 --已知：兩種排名方式(分區和不分區):使用和不使用partition --兩種計算方式(連續,不連續),對應函數：dense_rank,rank ·查詢原始數據：學號,姓名,科目名,成績 select * from  ...
  • 阿裡蔣曉偉談計算引擎Flink和Spark的異同與優勢
    本文整理自雲棲社區之前對阿裡搜索事業部資深搜索專家蔣曉偉老師的一次採訪，蔣曉偉老師，認真而嚴謹。在加入阿裡之前，他曾就職於西雅圖的臉書，負責過調度系統，Timeline Infra和Messenger的項目。而後在微軟的SQL Server引擎擔任過Principal Engineer，負責關係數據 ...
  • 神奇的 SQL 之團結的力量 → JOIN
    前言 開心一刻 閨蜜家暴富，買了一棟大別野，喊我去吃飯，菜挺豐盛的，筷子有些不給力，銀筷子，好重，我說換個竹子的，閨蜜說，這種銀筷子我家總共才五雙，只有貴賓才能用~我咬著牙享受著貴賓待遇，終於，在第三次夾蝦排滑落盤子時，我爆發了：去它喵的貴賓，我要蝦排……不是……我要竹筷子！ 連接 簡單來說，就是將 ...
  • EXC_BAD_ACCESS的本質詳解以及僵屍模式調試原理
    原文：What Is EXC_BAD_ACCESS and How to Debug It 有時候，你會遇到由EXC_BAD_ACCESS造成的崩潰。 這篇文章會告訴你什麼是EXC_BAD_ACCESS，以及它產生的原因。我還會提供一些EXC_BAD_ACCESS錯誤的解決方案。 1. 什麼是 EX ...
  • 最詳細的vue腳手架vue-cli2、vue-cli3講解
    前言： vue腳手架指的是vue-cli它是vue官方提供的一個快速構建單頁面（SPA）環境配置的工具，cli 就是(command-line-interface ) 命令行界面 。vue-cli是基於node環境利用webpack對文件進行編譯、打包、壓縮、es6轉es5等一系列操作。目前vue- ...
  • TypeScript入門一：配置TS工作環境
    配置手動編譯TS文件工作環境 配置webpack自動化打包編譯工作環境（後面補充） 一、TypeScript入門學習引言 進入主題之前，首先說明這個系列的博客是我剛剛接觸TypeScript的學習筆記，可能不會太深入的解讀一些原理方面的東西。但儘可能的把基礎的入門使用解析清楚，畢竟使用TypeScr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類