學習反應的資源：您需要開始的一切

React 是 Facebook 開發人員創建的一個 JavaScript 庫，用於構建快速的用戶界面。無論您是剛接觸 React，還是您的 React 開發之旅正在加速，要掌握其基礎知識、技術、工具和技巧都可能很困難。因此，我們創建了這份指南，介紹可用的資源以及我們的推薦。無論您處於學習的哪個階段，這裡都有您需要的最佳 React 內容——請查看並深入學習！ （如果您認為我們遺漏了什麼，請在下面的表格中告知我們！）

關鍵要點

• React 是一個用於構建快速用戶界面的 JavaScript 庫，有大量的學習資源可用，從文章到課程、項目和新聞通訊。
• 推薦的資源包括“React 入門”課程、“React 入門：初學者指南”文章和“版本控制”新聞通訊等。
• 在學習 React 之前，必須紮實掌握 JavaScript，包括 ES6 特性、閉包、異步編程和“this”關鍵字等概念。 HTML 和 CSS 知識也很重要，因為 React 使用 JSX，這是一種類似 HTML 的 JavaScript 語法擴展。

文章

無論您是否正在考慮學習 React，或者您正在尋找更高級的工具和系統，以下是一些我們找到的最佳書面資源。

入門和比較

• React 入門：初學者指南 [sitepoint]
• JSX 入門 [sitepoint]
• React 教程：從頭開始構建計算器應用程序 [sitepoint]
• 樣式 React 組件：7 種方法比較 [sitepoint]
• 如何判斷 React 是否最適合您的下一個項目 [sitepoint]
• React 與 Angular——深入比較 [sitepoint]
• React 與 Vue——“我為什麼選擇 React 而不是 Vue” [medium/@calinleafshade]
• React 入門，初學者指南 [sitepoint]
• 通過構建音樂播放器來探索 React 16 的新功能 [sitepoint]
• React 如何改進您的 D3 動畫 [sitepoint]
• Facebook 官方 React 入門介紹 [facebook.github]

基礎知識

• 所有基本的 React 概念都壓縮到一篇文章中 [medium.freecodecamp]
• 使用 Facebook 的 Create React App 快速準備項目 [sitepoint]
• 回到基礎——使用 React Flow [medium/javascript-inside]
• 如何使用無狀態組件優化 React 性能 [sitepoint]
• React 樣式概述——從使用外部 CSS 到樣式化組件 [sitepoint]
• 深入了解 React 動畫 [medium/react-native-training]
• 組件文件夾模式簡介 [medium/styled-components]，這使得編寫可擴展的 React 應用程序更容易。
• 關於 React Router 4 的所有內容 [css-tricks]
• 以及服務器端 React 渲染指南 [css-tricks]
• 在 React 中處理狀態的四種不變方法 [medium/@housecor]
• 如何安裝 React Native [sitepoint]
• React Native 應用程序中的身份驗證指南 [goshakkk.name]
• 可搜索、可過濾的 React 速查表 [reactcheatsheet]

稍高級

• 如何組織大型 React 應用程序並使其可擴展 [sitepoint]
• 建議：在使用 Redux 之前學習 React [robinwieruch]
• 如何創建真正通用的 React 組件系統 [medium/styled-components]
• Redux 與 MobX：哪個更好？ [sitepoint]
• React 16 改變了 React 如何處理未知的 DOM 屬性：有關這些更改如何影響您和您的代碼的指南 [facebook.github]

課程

如果您不喜歡通過文章自己構建學習路徑，或者您想確保掌握所有概念和技術，那麼我們推薦以下結構化的 React 課程。

• React 入門 [reactforbeginners] 是 React 教育的金標準，來自 React 導師 Wes Bos。
• React Express [react.express] 是 React 開發的綜合指南。

項目

您已經掌握了基礎知識，甚至可能更多。以下是一些項目，您可以將這些知識付諸實踐：

• 使用用戶登錄和身份驗證逐步構建 React 應用程序的指南 [sitepoint]
• 使用 React Native 和 Pusher 構建有狀態實時應用程序的指南 [sitepoint]
• 如何向 React Native 應用程序添加分析 [sitepoint]
• 使用 Rails 構建您的第一個服務器端渲染的 React 應用程序 [engineering.musefind]
• 如何使用 React 和 Firebase 構建 Reddit 克隆 [sitepoint]
• 使用 React VR 構建完整的球形 3D 圖片庫 [sitepoint]
• 然後使用 React、Redux、Express 和 MongoDB 構建完整的 Trello 克隆 [sitepoint]
• 然後使用 React Native 構建人臉識別應用程序 [sitepoint]
• 如何使用 React Native 構建 Android 應用程序 [sitepoint]
• 使用 React 和 WebWL 構建遊戲 [sitepoint]

庫和工具

• 如何為 React 開發設置 Vim [drivy.engineering]
• react-boilerplate [github/react-boilerplate] 是下一個 React 項目的可擴展的、離線優先的基礎。
• react-vt [github/reactvt] 是一個用於 React 開發人員的視覺測試庫。
• Mirror [github/mirrorjs] 是一個簡單、強大的 React 框架，具有最小的 API 和沒有樣板代碼。
• React Material UI、React Bootstrap、Semantic UI 和（四個）更多——七個您應該了解的 React 庫 [readwrite]
• JetBrains Web UI 組件是開源的 [blog.jetbrains]
• Gatsby [gatsbyjs] 是一個友好、超快的 React 靜態站點生成器。
• React Static 是一個 React 靜態站點生成器，旨在易於配置和數據不可知。
• React Native Pull to Refresh [github/nadikuts] 是一個用於 Android 的自定義下拉刷新組件。
• Lottie [airbnb.design] 是一個 iOS、Android 和 React Native 庫，它允許應用程序像使用靜態圖像一樣輕鬆地使用動畫。
• Sketch.app [airbnb] 是 Airbnb 的另一個工具，它允許您編寫呈現到 Sketch 文檔的 React 組件。

新聞通訊

如果所有這些都幫助您進入了 React 的世界——以下是一些新聞通訊，將幫助您了解最新的信息。

• 版本控制 [sitepoint]——每日新聞通訊，涵蓋各種主題，包括 React，有點像這篇文章（文本和鏈接），由我撰寫！
• React 狀態 [react.statuscode]——來自 Cooperpress 的優秀人員的每週新聞通訊。
• React 新聞通訊 [reactjsnewsletter]——每週新聞通訊，由 Tyler McGinnis 和 Ean Platter 策劃。
• react digest [reactdigest]——每週新聞通訊，每週一發送五個 React 鏈接。

我們錯過了什麼？

最後，如果您找到了這裡應該包含的優秀的 React 資源或工具，請在下面的表格中告知我們。祝您 React 快樂！

關於學習 React 的常見問題

學習 React 的先決條件是什麼？

在開始學習 React 之前，掌握 JavaScript 非常重要，因為 React 是一個 JavaScript 庫。您應該熟悉 ES6 特性、閉包、異步編程和 this 關鍵字等概念。 HTML 和 CSS 知識也很重要，因為您將使用 JSX，這是一種類似 HTML 的 JavaScript 語法擴展。

學習 React 需要多長時間？

學習 React 所需的時間差異很大，這取決於您目前的技能水平以及您可以投入學習的時間。如果您已經精通 JavaScript，那麼您可以在幾週的專門學習中掌握 React 的基礎知識。但是，掌握 React 及其生態系統（如 Redux 和 React Router）可能需要幾個月的時間。

有哪些學習 React 的資源？

有大量的資源可用於學習 React。這些包括在線教程、視頻課程、書籍和文檔。官方 React 文檔是一個很好的起點。 Codecademy 和 SitePoint 等網站提供交互式課程。您還可以在 YouTube 和博客上找到許多免費教程。

我為什麼要學習 React？

React 是最流行的用於構建用戶界面的 JavaScript 庫之一，尤其適用於單頁應用程序。它允許您創建可重用的 UI 組件。 React 由 Facebook 和個人開發人員和公司的社區維護，並在業界廣泛使用。學習 React 可以帶來許多就業機會。

React 是庫還是框架？

React 是一個 JavaScript 庫，而不是框架。區別在於，庫提供您可以根據需要使用的特定、隔離的功能，而框架提供全套工具和功能，但也強加了一種特定的做事方式。 React 專注於一件事——構建用戶界面，並且它做得非常好。

什麼是 JSX，為什麼它在 React 中很重要？

JSX 代表 JavaScript XML。它是 JavaScript 的語法擴展，允許您在 JavaScript 代碼中編寫類似 HTML 的代碼。編寫 React 應用程序不需要使用 JSX，但建議使用它，因為它使代碼更易於閱讀和編寫。

React 中的虛擬 DOM 是什麼？

虛擬 DOM（文檔對像模型）是 React 引入的一個概念，其中 UI 的虛擬表示保存在內存中，並通過稱為協調的過程與“真實”DOM 同步。此過程與輕鬆創建組件的能力相結合，可實現高性能和可預測的代碼庫。

React 中的狀態和道具有什麼區別？

在 React 中，狀態和道具都是 JavaScript 對象。狀態是一個數據結構，在組件掛載時以默認值開始，然後隨著時間的推移發生變異，這主要是用戶事件的結果。道具（屬性的簡稱）是其父組件傳遞給它的變量。

什麼是 Redux，它與 React 有什麼關係？

Redux 是 JavaScript 應用程序的可預測狀態容器。它幫助您編寫行為一致、在不同環境（客戶端、服務器和原生）中運行且易於測試的應用程序。雖然它主要與 React 一起使用，但它可以與任何其他視圖庫一起使用。

如何開始使用 React 構建項目？

掌握 React 的基礎知識後，最好的學習方法是構建項目。從簡單的項目開始，例如待辦事項列表或天氣應用程序。隨著您的經驗越來越豐富，您可以轉向更複雜的項目。這不僅可以幫助您更好地理解 React，還可以構建您的作品集。

以上是學習反應的資源：您需要開始的一切的詳細內容。更多資訊請關注PHP中文網其他相關文章！