fbpx

進階 React 組合元件模式完整指南

在不依賴 if 語句或更多道具的情況下建構可重用的 React 組合元件!使用 hooks(鉤子)和可信的進階 patterns (模式)!

從這 6 小時的課程,你會學到

  • 了解為什麼 design patterns(設計模式)很重要,而不僅僅是依賴 if 語句和更多道具( props )
  • 你將不再是或感覺自己像初級/中級 React 開發人員
  • 通過利用流行的 Medium clap 模仿現實世界的例子來學習
  • 深入了解自訂 hooks。它們如何作用以及它們的調用順序
  • 了解並避免使用自訂 hooks 和 refs 的陷阱
  • 利用複合組件 pattern 將邏輯集中在單個父級( single parent )中
  • 了解這些向 5 歲兒童解釋的 pattern – 附有詳細的插圖和指南
  • 不管討厭或喜歡 CSS,你將學習建構其 CSS/樣式(styles) 可以隨意擴展的組合元件(組件)
  • 依賴通過 control props pattern (控制道具模式)對你的組件用戶實行控制的反轉
  • 建構可以在日常工作中重複使用的相關自訂的 hooks
  • 評估可重用組件的多個輸出策略/API
  • 通過 prop getter 和 prop 集合讓你的組件用戶輕鬆上手
  • 熟悉在你的組合元件中用狀態初始化器做設置和重置內部狀態
  • 精通經由 state reducer pattern( 模式 )控制的反轉
  • 比較並選擇最適合你的組件 API 的 React pattern

要求

  • 你不是一個絕對的 React 初學者( React 課程 )
  • 你已經知道如何建構簡單的 React 組合元件
  • 你對 hooks 如何作用,至少對 useState & useEffect,有基本的了解

課程說明

嘿!嘿!你發現了一種獨一無二的資源,它以簡單易懂的語言教授進階 React patterns (模式),這些 patterns 將幫助你建構真正可重用的組合元件。

毫無疑問,成千上萬的工程師學習了 React,但掌握建構真正可重用組合元件的藝術的人卻少得多。利用受信任、經過驗證和久經考驗的 patterns 的組合元件可確保你建構生產就緒、可重用的組件。這是本課程的目標。讓你成為少數掌握這一點的工程師之一!

你之前是否嘗試過學習進階的 React 模式?他們看起來太難嗎?在你看來,他們教得不好?好吧,不用再尋尋覓覓了。在本課程中,我將一步一步地向你介紹進階的 React 模式的來龍去脈,以如此簡單的用語和方法,你會驚訝你竟能將如此困難的主題輕鬆學會。

在完成本課程時,你將學習讓你與眾不同的 patterns,充分理解還能教導他人!你會在下一次 React 面試中讓人印象深刻,贏得同事的尊重,並受老闆賞識,但更重要的是,你將為之後能應用所學取得的成就感到自豪。

我們將從基礎起,觸及進階的 React patterns 的每一重要方面,並通過真實世界的例子來實作。這裡沒有無聊的 hello world 應用程式!我們將通過實現這些進階 React patterns 來構建流行的 Medium clap 組件的副本,並逐課涵蓋用例(和邊緣案例)。

以下是這門課程與眾不同的地方:

  1. 你將找不到另一門廣泛關注進階 React 組件 patterns 的 Udemy 課程!去搜索一下,你會找不到的! Patterns 啟動組件的重複使用。
  2. 本課程不會浪費你的時間。正因很好地解釋,但你不會 24 小時難以完成這門課。這是一門很聚焦的課程,你可以在週末完成並成為你的職業發展武器。
  3. 如果你在網上搜索,你會找到承諾教授進階 React patterns 的資源,但沒有一個是以如本課程所採用的簡單、平易近人的方式進行。你找不到。
  4. 本課程由實際使用這些 patterns 的資深前端工程師講授。我花了許許多多個小時浸淫在這些 patterns 中。事實上,章節內容給予我上一本出版的書討論的主題
  5. 在視訊搜索可能很困難。因此,本課程提供你可隨時參考的資源。本課程已經建立了一個實際的隨附網站,因此你可以在完成課程後儘快找到所需的任何資訊息。

除了進階的 patterns ,你還將獲得大量其他知識,包括使用我最喜歡的 React hook、某些最佳實踐、在自訂 hook 中處理 refs,甚至是 React 中的進階動畫。

這是我希望我第一次學習進階 React patterns 時希望參加的課程:完整、簡單、平易近人,並附有實戰的示例。

稍後課程中見!

重要的:

在課程中,為了學習進階模式,我們花費了一些時間來建構一個真實世界的組合元件,The Medium Clap。 查看課程課程 – 確保這不會讓你感到困擾。

目標受眾

  • React 開發人員希望建構真正可重用的組合元件
  • React 開發人員希望給他們的(第一份)工作留下好印象
  • React 開發人員正在尋找一種簡化的方法來教授進階的 React pattern
  • 準備 React 工作面試的中級 React 開發人員
  • 希望升級為高級 React 工程師的 React 開發人員

講師簡介

Ohans Emmanuel 高級前端工程師,作者

為 React 前端工程師創建獨特的 Udemy 課程

作為一名實際在該行業工作的工程師,我認為有時很難在 Udemy 上獲得不以初學者為重點的優質課程,即除了基礎知識之外,它對你的日常工作很有幫助。這是我的目標。在 Udemy 上創建此類課程。

我是一名熱情的高級前端工程師,擁有多年的前端開發經驗。

我一直是教學的粉絲。在 2018 年和 2019 年初,我是技術領域的頂級 Medium 作家,我的 Medium 部落格獲得了超過 200 萬的瀏覽量。

2017 年,我繼續寫了我的第一本書,Understanding Flexbox,從那時起我又寫了 4 本書 – 都得到了非常積極的反饋!

我確實有獨特的教學風格。當我教授一門學科(最好是一門複雜的學科)時,我的目標是以一種 5 歲兒童可以理解的方式分解該學科。我自學成才的背景在初學時遇到的挫敗感加強我想達到此目標的熱情。

我最近搬到 Udemy 成為我的教學平台,以接觸更廣泛的受眾,我迫不及待地想為現代前端工程師創建更有影響力的課程 🙂

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

使用 Notion 來做上課筆記?

udemy 的課程講座數量動輒上百個,如果你要使用 Notion 當作是線上課程的筆記輔助工具,為這些講座建立與組織筆記是一件耗時且沒效率的工作

為了解決這個問題,Soft & Share 開發一個 chrome extension – LN+ for udemy ,可以根據 udemy 線上課程的課程大綱幫你自動建立成 Notion 筆記資料庫並產生筆記與課程的雙向關聯讓您專心上課與寫筆記就好,不用再煩惱課程筆記要放哪裡的問題!

🛫了解 LN+ for udemy 更多功能介紹請參考 – Learning Notes Plus for udmy


報名參加課程

Sponsored by Udemy


🛫使用關鍵字連結獲得更多線上學習資訊?請參考這個網頁說明


幫我們個小忙!

使用 e-mail 追蹤 Soft & Share

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: