JavaScript >> Javascript 文檔 >  >> React

會議 React.js:摘自“快速反應”

這是快速反應的摘錄 (曼寧,2016)。您可以在 Manning 免費下載整個第一章 .該書計劃於 2016 年第一季度發布,但 MEAP 現已推出。使用代碼“mardandz ” 獲得 39% 的折扣。

每章都有一個項目,並輔以 YouTube 上的視頻截屏 .

快速反應截屏

項目:React.js 的菜單

本文的項目將是最小的。這個想法是有一個動態生成的菜單,它將由 標籤組成。

我們將使用自定義 React 組件 Menu 和 Link。我們創建它們的方式類似於我們在前面的示例中創建 HelloWorld 組件的方式。該項目將向您展示如何以編程方式呈現嵌套元素。在前面的示例中,我們只是手動對子項進行編碼。我們將使用 map() 函數。

首先,您需要獲取 React 文件。現在讓我們使用未縮小的版本。未縮小版或開發版的名稱中不會包含 .min。

不同之處在於,在未縮小的版本中,您將收到有用的警告以及 React 代碼採用人類格式,以防您想窺視它。另一方面,在縮小版本中,警告和錯誤被抑制,代碼被縮小和優化。

如果你還沒有下載 React,現在就下載。請記住,我們使用的是 0.14.2 版本。任何其他版本都未使用我們的示例進行測試,因此使用它需要您自擔風險(不推薦)。

如果您還沒有安裝 Node.js 和 npm,那麼現在是上手的好時機。 “但 React 是一個前端庫!”你可能會說,你是對的。沒有服務器和 Node.js,React 也能正常工作。因此,請隨意跳過此步驟。但是,不建議使用 Node.js 和 npm,因為現在我認識的大多數 Web 開發人員都離不開 Node.js 作為前端應用程序的工具。節點工具已經無處不在。另外,npm 有很多前端模塊。

所以不要偷懶。如果您想保持領先,請使用 Node.js 和 npm。

我希望它很有趣,你會成為 Node.js 的朋友。讓我們回到 React 菜單。

HTML 是非常基礎的。它包括 react.js 和 react-dom.js 文件,為簡單起見,它們與 HTML 文件位於同一文件夾中。當然,稍後,您會希望將 *.js 文件放在其他文件夾中,例如 js 或 src:

<!DOCTYPE html>
<html>
  <head>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
  </head>

身體只有兩個元素。一個是帶有 ID 菜單的 div。這就是我們的菜單將被渲染的地方。另一個是帶有我們的 React 應用程序代碼的腳本標籤:

  <body>
    <div id="menu"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js 是我們的主要應用程序文件,它看起來像這樣:

var Menu = React.createClass({...}})
var Link = React.createClass({...})
ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

基本上,我們有主要組件菜單。創建是,我們使用 React.createClass():

[旁注]

閱讀博客文章很好,但觀看視頻課程更好,因為它們更具吸引力。

許多開發人員抱怨 Node.js 上缺乏負擔得起的高質量視頻材料。觀看 YouTube 視頻會讓人分心,花 500 美元購買 Node 視頻課程很瘋狂!

去看看 Node University,它有關於 Node 的免費視頻課程:node.university。

[旁注結束]

var Menu = React.createClass({

Menu 組件將呈現作為鏈接標籤的單個菜單項。在我們渲染它們之前,讓我們定義菜單項。菜單項像這樣在 menus 數組中硬編碼(您可以在更複雜的場景中從模型和/或服務器中獲取它們):

  render: function(){
    var menus = [
      'Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us'
    ]

我們將使用 Array 接口中的 map() 函數來生成四個 Link 組件。我們不要忘記 render 方法必須返回單個元素。出於這個原因,我們有

來包裹我們的鏈接。

    return React.createElement('div',
      null,

map() 函數返回一個數組,其中每個元素都是表達式 React.createElement(Link, {label:v}) 包裝在

:

中的結果
     menus.map(function(v,i){
        return React.createElement('div',

有一個很重要的關鍵屬性。它允許 React 通過將列表轉換為哈希來優化列表的呈現(哈希的訪問時間比列表/數組更好)。所以基本上,我們在一個數組中創建了一堆 Link 組件,每個組件都從 menus 數組中獲取一個帶有值的 prop 標籤:

          {key: i},
          React.createElement(Link, {label: v})
        )
      })
    )
}})

在 Link 組件的渲染中,我們編寫表達式來創建一個 URL。該 URL 將在 標記的 href 屬性中使用。 this.props.label 值是從菜單渲染函數中的地圖閉包中傳遞的:react.createElement(Link, {label:v})。

var Link = React.createClass({ 
  render: function () {
    var
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')

方法 toLowerCase()、trim() 和 replace() 是標準的 JavaScript 字符串函數。他們執行轉換為小寫,修剪邊緣的空白,並用破折號替換空格。

URL 表達式將產生以下 URL:

  • 以家為家
  • 關於關於關於的
  • 為服務服務
  • 投資組合的投資組合
  • contact-us 聯繫我們

在渲染返回的 Link 中,我們將 this.props.label 作為第三個參數傳遞給 createElement(),它成為 標籤內容的一部分,即鏈接的文本。

為了將每個鏈接彼此分開,我們添加了鏈接中斷標籤
。因為組件必須只返回一個元素,所以我們將

包裹在

中:

    return React.createElement('div',
      null,

第二個之後的 createElement() 的每個參數,例如,第 3、第 4、第 5 個,將用作內容(也稱為子項)。為了創建鏈接元素,我們將它作為第二個參數傳遞。為了在每個鏈接之後創建一個換行元素
,我們將換行元素作為第四個參數傳遞:

      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
      )
  }
})

而已。沒有驚險刺激,但頁面應該顯示五個鏈接(如果您向 menus 數組添加更多項目,則顯示更多鏈接)。這比複製粘貼五個 元素,然後在多個位置修改標籤和 URL 要好得多。

為了您的方便,我將盡可能頻繁地提供文件的完整列表。空間很便宜(我希望你和我一樣喜歡數字格式),而且我(以及我的 1000 多名讀者)發現能夠一次瀏覽整個文件而不會出現文本中斷或移動非常有用到 Github。如果您不同意,請跳過完整列表。

要查看該頁面,只需在 Chrome、Firefox 或 Safari(也可能在 Internet Explorer 中)將其作為文件打開 - 圖 1-X。

var Menu = React.createClass({
  render: function(){
    var menus = ['Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us']
    return React.createElement('div',
      null,
      menus.map(function(v,i){
        return React.createElement('div',
          {key: i},
          React.createElement(Link, {label: v})
        )
      })
    )
}})

var Link = React.createClass({
  render: function () {
    var
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')
    return React.createElement('div',
      null,
      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
      )
  }
})

ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

即使是這些瑣碎的頁面,我也喜歡使用本地網絡服務器。它使運行代碼更接近您在生產中的執行方式。此外,它還允許您使用 AJAX/XHR,如果您只是在瀏覽器中打開 HTML 文件,則無法使用。

運行本地 Web 服務器的最簡單方法是使用 node-static ,或類似的 Node.js 工具 .要安裝它,請使用 npm:

$ npm install -g [email protected]

安裝後,從項目的根文件夾運行此命令,使文件在 http://localhost:8080 上可用 (這不是外部鏈接,點擊鏈接前先運行下面的命令):

$ static

要在 Mac OS X 上停止服務器,只需按 control + c。

此示例的源代碼位於 GitHub Plunker .要使用代碼和/或在線查看演示,只需轉到 Plunker .

快速反應

您還可以觀看 React Quickly 的 YouTube 視頻或以 39% 的折扣購買書籍(代碼“mardandz “)。


下一篇
Tutorial JavaScript 教程
  1. 第 3 步:使用 React Native Web 設置 Storybook:在瀏覽器中展示您的移動組件!

  2. 在 Azure 邏輯應用中使用內聯代碼添加和運行 JavaScript 代碼片段

  3. 使用 React Portal 在 React 中構建模式

  4. 當瀏覽器失去焦點時,Chrome(也許是 Safari?)在輸入字段上觸發兩次模糊

  5. 如何在 React 中使用 Chart.js

  6. 我希望其他框架從 Svelte 中獲取的東西

  7. Bank Nue 字體文本的 React 組件

  1. 如何從堆棧溢出中獲取新問題的通知?

  2. 如何在“expo init”cli 中使用 npm 而不是 yarn(反應原生提示)

  3. JavaScript 正則表達式中的反向引用

  4. React Style:將樣式應用於組件的 4 種方法

  5. 高級 Pebble Watch 配置

  6. IE 拋出 JavaScript 錯誤:屬性 'googleMapsQuery' 的值為 null 或未定義,而不是 Function 對象(在其他瀏覽器中有效)

  7. 如何等待來自 node.js 服務器的新信息

  1. 如何使用 React 鉤子創建漸進式音頻播放器

  2. Page Speed Insights (Lighthouse) 於 2021 年 6 月 1 日進行了升級 - 發生了哪些變化,它將如何影響您?

  3. 💻 在 ⌚ 五分鐘內構建一個 CRUD Express API!

  4. 教 javascript 語言的 Javascript 書,而不是 dom