React 開發人員的 8 個最佳備忘清單

Home 程式開發 React 開發人員的 8 個最佳備忘清單
React 開發人員的 8 個最佳備忘清單
React

實踐是掌握任何技能或知識領域的關鍵。 您不是一天就能學到東西的。 您需要數週、數月甚至數年的持續練習才能擅長某件事。

一般來說,React 也很龐大,要學好它需要時間。 因此,當您忘記概念或語法時,不要在鏡子前哭泣,而是尋找解決方案。

注意:備忘清單不僅對初學者有幫助,對經驗豐富的開發者也有幫助。 編程是尋找解決方案而不是記住語法,所以您對基礎知識越熟悉,它就越有幫助。

1. Developer Cheatsheet

Developer CheatsheetsLeon Gilyadov 的 Web 開發備忘清單網站。 這個設計極簡的網站包含以下方面:

網路開發的歷史

  • React
  • React 路由器
  • Redux
  • ES6

這個 React 備忘清單沒有太多深度,但它確實提供了足夠好的初級內容,可以瀏覽片段和語法。 匆忙時檢查一下以快速趕上語法。

截至 2022 年 4 月,此備忘清單具有以下語法(僅計算功能元件):

  • Create React App
  • Stateless component
  • Props in stateless component
  • Children
  • useRef Hook
  • useState Hook
  • Higher-Order Component
  • Render Props

2. DevHints

Devhint.io 是另一個充滿各種技術備忘清單的網站。 DevHint 的 React 備忘清單包含比 Developer Cheatsheets 更多的內容。

但是,它的大部分內容都基於 class components,除非使用 legacy code base,否則您可能不需要這些元件。

儘管如此,這個備忘清單仍然包含一些來自功能元件世界的有用片段。 這些是功能元件的聲明、useState hook、useEffect hook 的聲明和示範,最重要的是如何建立自定義 hook。

3. Reed Barger

這份備忘清單是 Reed Barger 的 freecodecamp 文章。 這是我的最愛之一,也是最適合初學者的 React 備忘清單。 它於 2022 年 2 月發布,因此它也是本文提到的其他備忘清單中最新的。

這份備忘清單的好處在於,它不僅是一份語法備忘清單,而且還為您提供了語法背後的上下文,並教您一些有關這些概念的知識。 因此,如果您處於初學者水平,這將很有用。

該備忘清單包含 React 元素、屬性、樣式、片段、元件、props 等非常基礎的內容,以及各種 hooks(如 useState、useEffect、useRef、useContext、useCallback 和 useMemo)。

內容寫得很好,對初學者友好,並且有足夠的深度讓你在這裡解決大多數問題。

就個人而言,我認為這個網站沒有任何理由不在您的書籤中。

4. Eric The Coder

此備忘清單是 Eric The Coder 的 dev.to 文章。 他於 2021 年 6 月在忘記 React 概念和語法時寫了這篇文章作為記憶輔助。

此備忘清單中的內容不是很深,但確實包含許多其他備忘清單可能遺漏的非常基本的內容。 這包括基本的 JSX 規則、JSX 中的 JavaScript、帶鍵的列表、各種點擊事件詳情等。

說到鉤子,這個備忘單包括 useState、useEffect 和 useRef。

當 Eric 還是 React 的初學者時,他建立了這個備忘單。 因此,即使是非常基本的事情也得到了適當的記錄和強調(其他備忘清單在某種程度上錯過了)。

5. SheCodes

Shecodes 的 React Cheatsheet 是一個純語法、基於元件的全功能備忘清單。

您可以一次查看所有片段或按類別過濾它們。 Snippets 沒有解釋,您只可以使用它來快速查看各種語法。

內容與其他網站類似,並且易於快速訪問,使其成為快速參考語法的絕佳備忘清單。

6. React TypeScript

最後,我們為 TypeScript 開發人員提供了一些令人驚奇的東西。

React Typescript 是一個 MIT 憑證的開源備忘清單專案,在 GitHub 上擁有超過 33K 顆星,並且有許多出色的貢獻者來保持專案的活力和品質。

如果你喜歡在 React 和 TypeScript 中工作,那麼你肯定也會喜歡這個備忘清單。 您可以訪問他們網站或 GitHub README 上的內容。

整個備忘清單分為 4 個部分:

  • 基礎 — 專注於幫助 React 開發人員剛開始在 React 應用程式中使用 TS。
  • 進階 — 為編寫可重用類型實用程式/函數/渲染prop/高階元件和 TS+React 函式庫的人展示和解釋泛型類型的進階用法。
  • 遷移 — 幫助整理從 JS 或 Flow 中增量遷移大型程式碼庫的建議,來自做過它的人。
  • HOC — 編譯所有可用的知識,用於使用 React 和 TypeScript 編寫高階組件。

整個專案的品質是一流的,必要時會給出必要的解釋,最重要的是,這個備忘清單由社區積極維護和更新。

7. Codingcheats.io

這是另一個唯一基於功能元件的優秀 React 備忘清單。 雖然設計並不出色,但這份備忘單確實有出色的內容。

所有的 snippet 都可以在主頁上找到,每個 snippet 都有一點解釋。

內容包括基本的元件語法、速記、事件處理和 6 個不同的鉤子——useState、useEffect、useRef、useMemo、useReducer。 useCallback。

每個 snippet 都給出了適當的示範,並對每個 snippet 進行了簡短說明。 您絕對應該至少看過一次此備忘清單。

8. Ohans Emmanuel

這份備忘清單是 Ohans Emmanuel 撰寫的 LogRocket 文章。 與我們列表中的其他備忘清單不同,此備忘清單不關注 React 的基礎知識。

這是一個 React Hooks 備忘清單,僅用於解釋 React Hooks。 它包含語法、鉤子如何工作,以及在 React 中使用鉤子時要記住的最佳實踐。 一切都用例子解釋,內容寫得很好。

備忘清單中包含以下 Hooks:

  • useState
  • useEffect
  • useContext
  • useLayoutEffect
  • useReducer
  • useCallback
  • useMemo
  • useRef

作為一名現代 React 開發人員,Hooks 的知識是必不可少的,這份備忘清單將幫助您深入了解它們的核心以及如何在日常生活中使用它們。

學習 React 不是一天的任務。 這需要時間,但始終如一,投資於您的知識,並通過使用備忘單變得聰明,這將幫助您長期留在遊戲中。

祝您旅途愉快。 Happy coding!

>”>原文連結>>

相關文章