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

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

組件 

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

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

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

路由

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

管理狀態(tài)

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

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

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

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

創(chuàng)建項(xiàng)目

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

注意事項(xiàng)：

• 本主題所列項(xiàng)目的難度是漸進(jìn)的，每個(gè)項(xiàng)目都會(huì)增加其前身。

• 項(xiàng)目從最小到最全面的項(xiàng)目順序。

1.查找和顯示（克?。?/span>

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

您將學(xué)到什么：

• 使用HTTP客戶(hù)端向端點(diǎn)API發(fā)出請(qǐng)求。

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

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

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

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

• 主詳細(xì)信息：列出結(jié)果為結(jié)果中的每個(gè)項(xiàng)目添加鏈接到項(xiàng)目詳細(xì)信息頁(yè)。

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

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

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

您將學(xué)到什么：

• 路由保護(hù)：有些頁(yè)面只需要經(jīng)過(guò)身份驗(yàn)證的用戶(hù)。

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

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

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

您將學(xué)到什么：

• 驗(yàn)證表單中的用戶(hù)輸入并在用戶(hù)插入錯(cuò)誤數(shù)據(jù)時(shí)顯示錯(cuò)誤。

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

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

• 嘗試為后端框架添加身份驗(yàn)證功能。

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

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

您將學(xué)到什么：

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

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