你決定學(xué)習(xí)前端框架，你打開搜索引擎，你喜歡搜索任何與這個前端框架相關(guān)的教程，在這篇文章中，我將向你展示我學(xué)習(xí)前端框架的經(jīng)驗，以及這些框架是如何相互封閉的。

每次您決定學(xué)習(xí)前端框架時，都必須反復(fù)聽到這些術(shù)語（組件、路由和管理狀態(tài)），讓我們將其分解。

組件 

• 任何框架構(gòu)建組件的核心都使其可重用。

• 大多數(shù)使用JSX或HTML模板引擎的現(xiàn)代框架，

• 所有框架都提供了生命周期掛鉤，這些掛鉤提供組件生命周期時刻的可見性，如創(chuàng)建、渲染、銷毀以及發(fā)生時的操作能力。

路由

• 現(xiàn)在大多數(shù)現(xiàn)代框架都提供了創(chuàng)建和管理客戶端路由的API。

管理狀態(tài)

• 所有freameworks的構(gòu)建方式都允許組件內(nèi)部管理其狀態(tài)，而無需任何外部庫或工具。

• 許多框架都是以組件共享相同狀態(tài)的方式構(gòu)建的，例如（Angular擁有服務(wù)，React現(xiàn)在擁有Context API）。

• 有時框架解決方案是不夠的，特別是當您的狀態(tài)很大時，因此可以考慮使用redux之類的庫。

學(xué)習(xí)完基礎(chǔ)知識后，讓我們動手創(chuàng)建項目。

創(chuàng)建項目

為了理解某些東西的某些方面，你需要很好地了解它，而這些知識并不僅僅來自于閱讀書籍或觀看視覺課程，真正的測試伴隨著現(xiàn)實生活中的一個真實問題，在本文中，我為你帶來了一些項目的想法，涵蓋了你選擇的任何前端框架的許多方面。

注意事項：

• 本主題所列項目的難度是漸進的，每個項目都會增加其前身。

• 項目從最小到最全面的項目順序。

1.查找和顯示（克隆）

第一個常用的應(yīng)用程序是使用公共API克隆任何已知站點，嘗試構(gòu)建一個帶有下拉列表的簡單搜索欄，保存來自端點API的結(jié)果，在顯示返回的數(shù)據(jù)之前檢查是否有要顯示的圖像。

您將學(xué)到什么：

• 使用HTTP客戶端向端點API發(fā)出請求。

• 例如，使用鍵盤事件偵聽器，一旦用戶點擊enter call endpoint API獲取結(jié)果數(shù)據(jù)。

• 了解如何顯示單個數(shù)據(jù)或一組數(shù)據(jù)。

• 使用插值數(shù)據(jù)設(shè)置顯示樣式。

• 結(jié)構(gòu)化顯示。

• 主詳細信息：列出結(jié)果為結(jié)果中的每個項目添加鏈接到項目詳細信息頁。

• 了解如何從中傳遞數(shù)據(jù)母版頁到詳細信息頁。

2.驗證應(yīng)用程序

我在上一節(jié)中提到的一些端點API需要一些身份驗證，因此在本節(jié)中，請嘗試添加或構(gòu)建另一個具有登錄/注冊頁面的應(yīng)用程序，如果用戶正在登錄，請將其重定向到用戶主頁，并阻止來賓用戶訪問需要用戶登錄的頁面。

您將學(xué)到什么：

• 路由保護：有些頁面只需要經(jīng)過身份驗證的用戶。

• 如何發(fā)送和保存JWT（JSON web令牌）以發(fā)出需要經(jīng)過身份驗證的使用的請求。

3.積垢應(yīng)用程序

創(chuàng)建，讀取，更新和刪除應(yīng)用程序是本節(jié)中最流行的前端應(yīng)用程序，您可以使用本地存儲或使用Firebase等在線服務(wù)來離線構(gòu)建此應(yīng)用程序，甚至可以將其與后端框架集成。

您將學(xué)到什么：

• 驗證表單中的用戶輸入并在用戶插入錯誤數(shù)據(jù)時顯示錯誤。

• 如何發(fā)出put、delete、post和get HTTP請求。

• 將應(yīng)用程序與任何后端框架集成。

• 嘗試為后端框架添加身份驗證功能。

4.聊天應(yīng)用程序

在前面的部分中，所有對后端的請求都是單向的，在這里管理應(yīng)用程序狀態(tài)沒有問題，但是在本部分中，我們嘗試使用web套接字構(gòu)建聊天應(yīng)用程序，它是雙向的，我們不能等待響應(yīng)更新視圖，我們需要另一種方法來管理我們的客戶端狀態(tài)。

您將學(xué)到什么：

• 了解如何使用管理狀態(tài)解決方案，如react的redux、angular 2+的ngrx或vuejs的vuex，以及如何將其與客戶端應(yīng)用程序集成。

• 使應(yīng)用程序更具反應(yīng)性（收聽網(wǎng)絡(luò)狀態(tài)并用新消息通知用戶）。