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的語法,我們稱作
安裝
最快的學習方式是訪問CDN的JavaScript庫,如:cdnjs,jsdelivr.
#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檔案(知識共識許可),提供公開庫和文件的例子(單獨許可)
更多
在這裡只能學到這麼多,想閱讀更多關於社群以及指南資訊可以遞交申請,謝謝!