[譯] React 入門指南，react入門指南

[譯] React 入門指南，react入門指南

原文連結：The React Quick Start Guide

這篇文章將概括性的介紹一下如何用 ReactJS 進行開發。我將介紹一些基礎知識，不會有過於深入的分析。你可以結合這些代碼閱讀本文。更新：本文已經由 Hugo Bessa 翻譯了葡萄牙語版。

一些概念

React 的 API 非常少，簡單易懂易用。在正式開始之前先介紹幾個概念，一個一個來。

React 元素 是表現為 HTML 元素的 JavaScript 對象，他們並不真實存在於瀏覽器中。他們最終表現為類似h1, div 或 section 之類的瀏覽器元素。

JSX 是一種建立 React 元素和 components 的技術。例如 <h1>Hello</h1> 是一個用 JSX 寫的 React 元素。同樣可以用純 JavaScript 寫成 React.DOM.h1(null, 'Hello');。JSX 讀寫起來更輕鬆，最終上線之前必須將 JSX 語句轉為 JavaScript 語句。

虛擬DOM 是由 React 元素和 components 組成的 JavaScript 樹形結構對象。React 將虛擬 DOM 渲染到瀏覽器中變成最終的使用者介面。React 會觀察虛擬 DOM 的變化，並自動將這些變化渲染到瀏覽器端。

理解了上面這些概念，我們可以開始使用 React 寫一些例子了。下面會開發一系列功能，每一個例子都是在前一個例子的基礎上進行改進。我們會編寫一個類似 instagram 的照片流程式 - 沒有比這更好的樣本程式了。

渲染

第一步是渲染虛擬元素（React 元素或 component）。注意，虛擬元素只存在於記憶體中，必須顯式地告訴 React 將它渲染到瀏覽器上。

React.render(<img src='http://tinyurl.com/lkevsb9' />, document.body)

查看 JSBin

render 函數接收兩個參數：虛擬元素和真實的瀏覽器 DOM 元素。React 將虛擬元素插入到指定的 DOM 元素中。上例中可以看到圖片被渲染出來了。

組件(Components)

組件是 React 的精髓所在。它們是自訂的 React 元素，通常有一些功能和結構定義。

var Photo = React.createClass({  render: function() {    return <img src='http://tinyurl.com/lkevsb9' />  }});React.render(<Photo />, document.body);

查看 JSBin

createClass 函數接收一個對象，這個對象實現了 render 方法。

這個Photo組件定義了 <Photo />元素，並且渲染到 document.body 裡。

這個組件跟之前的渲染圖片沒有太大區別，但是它為將來添加自訂功能奠定了基礎。

屬性(Props)

可以把屬性看做組件的配置參數，看起來非常像 HTML 屬性。

var Photo = React.createClass({  render: function() {    return (      <div className='photo'>        <img src={this.props.imageURL} />        <span>{this.props.caption}</span>        </div>    );    }});React.render(<Photo imageURL='http://tinyurl.com/lkevsb9' caption='Hong Kong!' />, document.body);

查看 JSBin

imageURL 和 caption 兩個屬性被傳遞到 Photo 組件內的 render 函數裡。

imageURL 被用在 React 圖片元素的 src 屬性，caption 被用作 React span 元素內的文本。

組件不會改變它的屬性，他們是靜止不變的。如果組件裡包含動態資料，就要用到狀態(State)對象。

狀態(State)

狀態物件用來記錄隨時可能變化的資料。

var Photo = React.createClass({  toggleLiked: function() {    this.setState({      liked: !this.state.liked    });  },  getInitialState: function() {    return {      liked: false    };  },  render: function() {    var buttonClass = this.state.liked ? 'active' : '';    return (      <div className='photo'>        <img src={this.props.src} />        <div className='bar'>          <button onClick={this.toggoleLiked} className={buttonClass}>                      </button>          <span>{this.props.caption}</span>        </div>      </div>    );  }});React.render(<Photo src='http://tinyurl.com/lkevsb9' caption='Hong Kong!') />, document.body);

查看 JSBin

組件的狀態給組件引入了一些複雜性。

這個組件有一個新的函數 getInitialState。 當組件初始化時 React 會去調用這個函數。根據它返回的對象來設定組件的初始狀態（正如函數名所表達的那樣）。

這個組件還有另一個新函數 toggleLiked。它調用了 setState 來切換 liked 的值。

在 render 函數裡有個 buttonClass 的變數，根據 liked 狀態被標記為 ‘active’ 或 空值。

buttonClass 被用作 React button 元素的類名。這個按鈕還將 toggleLiked 函數綁定到 onClick 事件上。

看看在瀏覽器中渲染出來是什麼效果：
- 當組件裡的按鈕被點擊時，觸發 toggleLiked 函數
- liked 狀態被改變
- React 重新渲染虛擬 DOM
- 新老虛擬 DOM 進行對比
- React 識別出變化的部分並渲染到瀏覽器

上例示範了點擊按鈕來改變類名

組合組件(Composition)

將一些小的組件(components)連結起來形成一個大的組合組件。例如 Photo 組件可以用在 PhotoGallery 組件中，如下：

var Photo = React.createClass({  toggleLiked: function() {    this.setState({      liked: !this.state.liked    });  },  getInitialState: function() {    return {      liked: false    };  },  render: function() {    var buttonClass = this.state.liked ? 'active' : '';    return (      <div className='photo'>        <img src={this.props.src} />        <div className='bar'>          <button onClick={this.toggleLiked} className={buttonClass}>                      </button>          <span>{this.props.caption}</span>        </div>      </div>    );  }});var PhotoGallery = React.createClass({  render: function() {    var photos = this.props.photos.map(function(photo) {      return <Photo src={photo.url} caption={photo.caption} />    });    return (      <div className='photo-gallery'>        {photos}      </div>    );  }});var data = [  {    url: 'http://tinyurl.com/lkevsb9',    caption: 'Hong Kong!'  },  {    url: 'http://tinyurl.com/mxkwh56',    caption: 'Cows'  },  {    url: 'http://tinyurl.com/nc7jv28',    caption: 'Scooters'  }];React.render(<PhotoGallery photos={data} />, document.body);

查看 JSBin

Photo 組件跟之前的沒什麼兩樣。新組件 PhotoGallery 根據 3 條假資料產生了 3 個 Photo 組件。

結語

本文只是一篇 React 入門，我強烈推薦大家去讀 React 官方文檔，裡麵包含了所有你想要的細節。

還有一些值得一看的視頻資源。Pete Hunt 講的 re-thinking web application architecture with React 和 Tom Occhino 講的 React Native for building native mobile applications with React (WIP)。

本文並沒有介紹如何設定你的本地開發環境，官方文檔有相關介紹，或者，你還可以看看我的解決方案 boilerplate。

如果本文有什麼錯誤之處，歡迎在 twitter 上聯絡我，或者給我提 pull request。盡情給我發郵件吧，我很樂意效勞。

P.S - 如果你準備開發一個更複雜的 React 應用，推薦 The Flux Quick Start Guide。