JavaScript >> Javascript 文檔 >  >> React

5 個學習 React 框架的實際例子

您可能聽說過 Facebook 流行的 JavaScript 框架 - React。它被許多流行的網站使用,包括 Facebook 本身和 Instagram。在本文中,您將找到 5 個使用 React 構建的實際示例,這些示例將使您在使用該框架時搶占先機。

React 有什麼特別之處?

React 是圍繞組件的概念構建的。這與 Angular 和 Ember 等框架形成對比,後者使用雙向數據綁定來更新頁面的 HTML。在我看來,React 比 Angular 和 Ember 更容易學習——它要小得多,並且可以很好地與 jQuery 和其他框架配合使用。它也非常快,因為它使用虛擬 DOM,並且僅將更改的部分與底層頁面同步(訪問 DOM 仍然是現代 Web 應用程序中最慢的部分,這就是框架通過優化它來提高性能的原因)。

然而,另一方面是在 React 中需要更多的代碼來實現可以通過數據綁定輕鬆完成的相同事情,正如您從下面的示例中看到的那樣。如需比較,請參閱我們關於 Angular 的文章。

如何使用?

要使用 React,您需要在頁面中包含一個 JavaScript 文件。 Facebook 好心提供一個 CDN,您可以直接鏈接到:

<script src="http://fb.me/react-0.10.0.min.js"></script>

這使您可以訪問全局 React 對象,它包含許多有用的方法,您可以在這些示例中看到其中的一些。編寫 React Web 應用程序的推薦方法是使用稱為 JSX 的語言 .這是一個略微增強的 JavaScript 版本,它允許您直接在代碼中使用類似 HTML 的語法來初始化 React 組件。它在被瀏覽器解釋之前被編譯成 JavaScript。 JSX 是完全可選的 - 如果您願意,可以使用常規 JavaScript。

不過廢話不多說,看代碼吧!

1。計時器

正如我所提到的,React 應用程序的構建塊是組件。它們是通過調用 React.createClass() 創建的 帶有選項和方法的對象。每個組件都有狀態(一個帶有數據的對象)並且每個組件都負責自己的渲染 - render() 每當狀態改變時調用方法。下面是一個構建簡單計時器的示例:

(點擊 Result 鏈接查看示例)

創建組件時,您可以在大括號 {} 中嵌入任何 JavaScript 表達式。在這個例子中,我們傳遞了一個開始日期,它將在每個 tick() 函數調用中用於計算經過的秒數。

2。導航菜單

讓我們看看我們如何通過構建導航菜單來處理 React 中的點擊事件:

您可能已經從這些示例的代碼中註意到,我們使用了像 className 這樣的屬性 在 HTML 中實際上並不存在。這是因為當您返回一個新的

元素時,您不會返回 HTML,而是組件 React.DOM.p 的一個實例 .您可以在此處閱讀更多相關信息。

3。實時搜索

我們一次又一次地了解到人們討厭等待。以下是使用 React 構建實時搜索體驗的方法。 (為了比較,請參閱我們的 AngularJS 版本)。

這個例子還演示了 React 中的另一個重要概念——控制器狀態的更新應該影響 HTML,而不是相反。在這種情況下,一旦您設置了文本框的值,它將保持不變,忽略用戶的按鍵,除非您在 onChange 中更新它 函數(您可以更改此行為,但這是推薦的處理方式)。

4。訂購單

當你組合多個組件時,React 的真正威力就來了。這使您可以更好地構建代碼並引入關注點分離。它還將使您的代碼可在 Web 應用程序的不同部分重用。以下是幫助客戶計劃預算的訂單示例(請參閱此處的 Angular 版本):

組合多個組件時出現的第一個問題是如何使它們通信。一種方法是在初始化屬性時傳遞您需要的數據。這僅適用於父組件到子組件。對於另一個方向的通信,您可以將父組件的方法之一作為屬性傳遞給子組件。然後孩子可以調用這個方法,並通知父母事件。您可以在此處閱讀更多相關信息。

5。使用 AJAX 的圖像應用

本示例將演示如何將 react 與 jQuery 結合使用,以及如何通過 AJAX 加載結果。 Angular 等框架在執行 AJAX 時有其自定義方法,而 React 允許您使用您喜歡的任何其他庫(請參閱此處的 Angular 版本)。

請注意,我們的示例在渲染圖片列表和收藏列表時使用了相同的圖片組件。這種重用是將代碼組織成組件的好處之一。

測試你學到的東西

什麼是反應?

誰製作了 React?

React 是做什麼用的?

React 有什麼特別之處?

這是什麼語言?

這個組件有什麼作用?

這段代碼有什麼作用?

這段代碼有什麼作用?

幹得好!

.

現在讓你的朋友嫉妒:

回答

12 22

下一步要去哪裡?

React 允許您為應用程序提供清晰的結構並促進代碼重用。並且由於其強大的虛擬 dom,該框架可以加速復雜的接口。 React 既適用於服務端渲染,也適用於客戶端渲染,使得構建在客戶端和服務端之間無縫轉換的同構應用成為可能。

但是還有更多關於反應的知識。我建議你從這裡開始:

  • React 主頁。
  • 入門工具包和入門指南。
  • 詳細的分步教程。
  • React 插件。
  • 堆棧溢出標記。

下一篇
No
Tutorial JavaScript 教程
  1. 在 Angular 應用程序中顯示當前環境

  2. 使用裝飾器為 Koa API 創建 Swagger 文檔的更好方法?

  3. 使用 Cypress 進行 API 測試:第 1 部分 - 設置

  4. 初學者 Node.js:多對多關係

  5. JS 中的可組合對象驗證

  6. Jason Docton 如何使用 React 和 WoW 幫助人們的心理健康

  7. JavaScript 中的遞歸簡介

  1. react中兩個不相關組件之間共享數據的最簡單方法

  2. Moment.js 與開發者的無私

  3. 在 appscript 中創建詳細視圖選項卡時遇到問題

  4. JavaScript 方程求解器庫

  5. 如何讓你的 Javascript 代碼運行得更快

  6. NodeJS 項目中的 PeerDependencies 是什麼?

  7. 公共解決:地球,火,雪遊戲

  1. 刪除 lodash

  2. React Router Redirect:使用 react-router 在 React 中進行編程導航

  3. Angular Routing - 企業應用程序的最佳實踐

  4. 為什麼你必須在 React 中使用 className,而不是在 Preact 中?