【譯】我是如何學習任意前端框架的
banner
你決定學習框架 x ，你開啟youtube或任何搜尋引擎，搜尋與 x 框架相關的任何教程，並在30分鐘之後突然發出"Eureka"(高興地表現)的尖叫-- 我認為這個框架類似自己之前學過的框架 。你是對的，你不必要從頭開始學習它。在這篇文章中，我將向你展示我學習前端框架的經驗以及這些框架如何彼此相似的。
每次你決定學習前端框架時，你定會反覆聽到這些術語（元件，路由和管理狀態/狀態管理）。
下面我們逐步瞭解下：
元件
任何框架的核心都是以建立元件來達到複用的目的。如今，大多數現代框架都使用 JSX 或 HTML 模版引擎， 生命週期鉤子 --提供生命瞬間可見性，比如建立，渲染，登出以及它們發生時的行為能力。
路由
如今，大多數現代框架都提供 API 來建立和管理客戶端路由。
管理狀態
有時，你的資料必須在元件之間共享，推薦的方法是使其成為中心（中轉站）。
現在，所有框架都提供 API 來管理你的狀態（例如Angular有一個Service，React現在有Context API）以及當你的資料規模變大之後，你可以考慮使用像redux這樣的庫。
完成基礎學習之後，我們來親自動手並 建立專案 。
建立專案
react-angular-vue
為了理解事物的某些方面，你需要很好地瞭解它，這些知識（獲取）不是僅僅來自閱讀書籍或者觀看視訊課程。在這篇文章中，真實的測試伴隨著現實中的真正問題，會帶給你些啟發，並應用在你選擇的任何前端框架的專案中。
筆記：
- 該主題中列出的專案難度逐漸遞增，每個專案會在前一個專案基礎中增加。
- 專案的條理是從最簡單到最全面。
1.查詢 & 顯示 （模仿）
常用的首個應用是使用其公共的 API 來模仿任何已知站點，嘗試構建一個帶下拉列表的搜尋欄，來儲存來自端點 API 的結果，檢查其返回的資料，然後再顯示它，就像有張影象一樣（顯示）或不顯示。
端點API示例：
你將學到：
- 使用
HTTP客戶端向端點API發起請求 - 使用鍵盤事件監聽器，例如，一旦使用者點選進入，就向端點
API獲取結果資料 - 學會如何展示單條資料或一組資料
- 給你插入的資料新增點樣式
- 構建你的佈局
- 主要的詳細資訊：列表結果將結果中的每個專案的連結新增到專案詳細頁面
- 瞭解如何將資料從母版頁傳遞到詳細資訊頁
2.Auth App
我在上一節中提到的一些端點 API （可能）需要一些身份驗證，因此在這一節中嘗試新增或構建另一個帶有 登陸/註冊 頁面的應用程式。如果使用者登陸了，則將他/她重定向到使用者主頁，並阻止 訪客使用者 訪問（主頁），因為這需要使用者登陸的。
你將學到：
- 路由守衛：某些頁面只允許通過身份驗證的使用者（訪問）
- 如何傳送並儲存JWT(JSON Web令牌)以發出需要經過身份驗證的使用者請求
3.CRUD App
增刪查改的應用程式是本節中最受歡迎的前端應用程式，你可以使用本地儲存或者使用線上服務（如Firebase）來構建此應用程式，甚至將它與後端框架整合在一起。
專案例項：
- 書籤應用
- To-Do App
你將學到：
put、delete、post和get auth
4.聊天應用
在前面的章節中，對後端的所有請求都是 單向的 ，你在管理應用程式狀態時沒有問題。但在本節中，我們嘗試使用 web sockets 來構建聊天應用程式，它是 雙向的 ，我們不能（總是）等待響應來更新檢視，我們需要另一種方法來管理我們的客戶端狀態。
你將學到：
-
學習如何使用
管理狀態解決方案，如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何將其與客戶端應用程式整合 -
使你的應用更靈活（接收網路狀態並通知使用者新訊息）
原文： https://dev.to/imm9o/how-i-learn-any-front-end-framework-29a2
文章首發： https://github.com/reng99/blogs/issues/12