【譯】我是如何學習任意前端框架的

你決定學習框架x，你打開youtube或任何搜索引擎，搜索與x框架相關的任何教程，並在30分鐘以後忽然發出"Eureka"(高興地表現)的尖叫--我認爲這個框架相似本身以前學過的框架。你是對的，你沒必要要從頭開始學習它。在這篇文章中，我將向你展現我學習前端框架的經驗以及這些框架如何彼此類似的。

每次你決定學習前端框架時，你定會反覆聽到這些術語（組件，路由和管理狀態/狀態管理）。

下面咱們逐步瞭解下：

組件

任何框架的核心都是以建立組件來達到複用的目的。現在，大多數現代框架都使用JSX或HTML模版引擎，生命週期鉤子--提供生命瞬間可見性，好比建立，渲染，註銷以及它們發生時的行爲能力。

路由

現在，大多數現代框架都提供API來建立和管理客戶端路由。

管理狀態

有時，你的數據必須在組件之間共享，推薦的方法是使其成爲中心（中轉站）。

如今，全部框架都提供API來管理你的狀態（例如Angular有一個Service，React如今有Context API）以及當你的數據規模變大以後，你能夠考慮使用像redux這樣的庫。

完成基礎學習以後，咱們來親自動手並建立項目。

建立項目

爲了理解事物的某些方面，你須要很好地瞭解它，這些知識（獲取）不是僅僅來自閱讀書籍或者觀看視頻課程。在這篇文章中，真實的測試伴隨着現實中的真正問題，會帶給你些啓發，並應用在你選擇的任何前端框架的項目中。

筆記：

• 該主題中列出的項目難度逐漸遞增，每一個項目會在前一個項目基礎中增長。
• 項目的條理是從最簡單到最全面。

1.查找 & 顯示 （模仿）

經常使用的首個應用是使用其公共的API來模仿任何已知站點，嘗試構建一個帶下拉列表的搜索欄，來保存來自端點API的結果，檢查其返回的數據，而後再顯示它，就像有張圖像同樣（顯示）或不顯示。

端點API示例：

• Github API
• OMDb API
• Spotify Web API
• wunderground API
• reddit API

你將學到：

• 使用HTTP客戶端向端點API發起請求
• 使用鍵盤事件監聽器，例如，一旦用戶點擊進入，就向端點API獲取結果數據
• 學會如何展現單條數據或一組數據
• 給你插入的數據添加點樣式
• 構建你的佈局
• 主要的詳細信息：列表結果將結果中的每一個項目的連接添加到項目詳細頁面
• 瞭解如何將數據從母版頁傳遞到詳細信息頁

2.Auth App

我在上一節中提到的一些端點API（可能）須要一些身份驗證，所以在這一節中嘗試添加或構建另外一個帶有登錄/註冊頁面的應用程序。若是用戶登錄了，則將他/她重定向到用戶主頁，並阻止訪客用戶訪問（主頁），由於這須要用戶登錄的。

你將學到：

• 路由守衛：某些頁面只容許經過身份驗證的用戶（訪問）
• 如何發送並保存JWT(JSON Web令牌)以發出須要通過身份驗證的用戶請求

3.CRUD App

增刪查改的應用程序是本節中最受歡迎的前端應用程序，你可使用本地存儲或者使用在線服務（如Firebase）來構建此應用程序，甚至將它與後端框架集成在一塊兒。

項目實例：

• 書籤應用
• To-Do App

你將學到：

• 驗證用戶的表單輸入，若是用戶輸入錯誤就提示錯誤信息
• 如何建立put、delete、post和get的HTTP請求
• 將你的應用程序和任意後端框架集成
• 嘗試爲後端框架添加auth功能

4.聊天應用

在前面的章節中，對後端的全部請求都是單向的，你在管理應用程序狀態時沒有問題。但在本節中，咱們嘗試使用web sockets來構建聊天應用程序，它是雙向的，咱們不能（老是）等待響應來更新視圖，咱們須要另外一種方法來管理咱們的客戶端狀態。

你將學到：

• 學習如何使用管理狀態解決方案，如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何將其與客戶端應用程序集成

• 使你的應用更靈活（接收網絡狀態並通知用戶新消息）

原文：dev.to/imm9o/how-i…

文章首發：github.com/reng99/blog…

更多內容：github.com/reng99/blog…