1. 程式人生 > >React初學者教程(說明文件)--中文翻譯

React初學者教程(說明文件)--中文翻譯

譯者序言:筆者作為一個React愛好者(四級未過),精心審譯,難免有錯,望海納!

React初學者教程【react-0.13.0】 下載

文章摘要:本文只是對於初學者關於React的簡單講解,如需更深學習,請獲取更過資源學習!

譯文

react是一個用於構建使用者介面的JavaScript庫

  • 用做UI: 許多人把React當做MVC設計模式中的檢視(view),當把React成為你的技術掌握之後, 它可以很輕鬆應用於一個小功能的專案。
  • 虛擬DOM:React用一個”虛擬DOM”實現了超高的效能,配合nodeJS也可以實現在服務端的渲染,不存在耗時的瀏覽器dom渲染。
  • 資料流: React是一種減少引用資料流的實現方式,並且比傳統的方式更容易實現資料繫結。

例子
你可以學習在專案中如何使用React 學習,我們放了幾個例子在這個網站上:可以作為你學習的一個開始。

#Js Code

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

這個例子將在頁面的div容器中渲染出“Hello John”,你可以發現我們在使用一種類似HTML的語法,我們稱作

JSX,不需要為了React使用JSX,而是JSX使得程式碼變得易讀,書寫起來像在寫HTML一樣。

安裝
最快的學習方式是訪問CDN的JavaScript庫,如:cdnjsjsdelivr.

#HTML Code

<!--React的核心庫-->
<script src="http://fb.me/react-0.13.0.js"></script>
<!--在編譯JSX的時候,瀏覽器把JSX翻譯成對應的DOM-->
<script src="http://fb.me/JSXTransformer-0.13.0.js"></script>

我們這裡有一個新手教程.zip,如果你是第一次使用React,或許對你是有幫助的。裡面包含了我們用程式碼寫的簡單例項,可以在網頁中呈現。

如果你喜歡用bower,那就變得很簡單

bower install --save react

貢獻
此版本主要目的是為了推進React的核心, 使React更簡單更便捷的被使用,如果你對它非常感興趣,請堅持閱讀,如果你現在不感興趣,請積極反饋我們,我們將感激不盡。

建立一個關於React的副本
我們在使用react.js之前要先搭建nodeJs,因為要引用其中大量的庫,或許是你已經熟悉的。

學習先決條件

  • 你的node版本應該在v0.10.0+以上(或許能在低版本上執行,我們沒有測試過)
  • 你應該熟悉npm,並且使用’sudo’以保證依賴包為全域性安裝
  • 你應該熟悉git

搭建
版本庫只要克隆過一次,以後搭建就非常方便。(ps:因為第一次需要下載必備的依賴包)

//grunt-cli 需要使用 grunt,你可能已經安裝了這個
npm install -g grunt-cli
npm install
grunt build

在這搭建的時候,你現在應該新建一個資料夾,用來承載React專案,這都是應該做的工作。

Grunt
我們用自動化工具Grunt來減輕大量的工作,執行grunt -h可以看到主要的目錄,這幾個重要的點應該知道:

/*用PhantomJS建立並執行測試程式*/
grunt test
/*在你的瀏覽器上建立執行*/
grunt test --debug
/*你可以執行一個程式的時候加上'--filter'獲得更快的速度。*/
grunt fasttest --filter=ReactIdentity
/*用ESLint保證高質量程式碼*/
grunt lint
/*銷燬建立的目錄*/
grunt clean

許可
React是BSD許可,我們也提供額外的專利許可,React檔案(知識共識許可),提供公開庫和文件的例子(單獨許可)

更多
在這裡只能學到這麼多,想閱讀更多關於社群以及指南資訊可以遞交申請,謝謝!