現在對React.js的歡迎程度正在瘋狂的增長，也發生了許多有趣的事情，我的朋友大學同學都開始問我許多關於怎樣學習Reat和怎樣使用React的思想思考問題。
(2013年5月29號開始，谷歌搜索引擎搜索React的趨勢圖)
但是 React不是一個框架，它是一個概念，庫和原則，用來讓事情變得更快，以緊湊並且漂亮的方式在客戶端和服務器端改進你的app。
在這篇博客的第三部分我會解釋這些概念並且對於它用來做什麼和怎樣去用給一些建議，我們會討論一些想法和技術。ES6 React
- virtual DOM
- Component-driven development
- Immutability
- Top-down rendering
- Rendering path and optimization
- Common tools/libs for bundling, ES6, request making, debugging, routing, etc.
- Isomorphic Reactok
ok，我們會寫代碼，讓它儘可能的使用，在RisingStack GitHub repository所有文章中涉及到的代碼片段都是直接可以使用的。
這篇文章首先從這三部分來介紹，讓我們一起進入React的世界！
項目地址：
https://github.com/risingstack/react-way-getting-started
1.從React.js Tutorial開始React.js
如果你已經熟悉React並且了簡單瞭解了它的基礎知識，像virtual DOM的概念，組件概念等等，那麼這篇React.js的介紹可能不是爲你準備的。我們將討論即將到來的衆多部分的中心議題，它將會非常的有趣，讀完之後我建議你再讀一遍。
React是一個框架嗎？
簡言之：它不是
那麼到底它是何方神聖，讓如此的多的人對它癡迷瘋狂
React 在應用程序中屬於 視圖 層，它也提供不同的方式去組織你的模板並且讓你將它用做組件，在一個React的應用中，你應該將你的網站，頁面，功能分成更小的多個組件，也就意味着你的網站有多個不同的
組件結合而成。這些組件也是有其他的組件組成的。當遇到一個難題非常有挑戰性，那麼你應該講這個大的難題變成一個個更小難題，去各個擊破。同樣這個方式也是用於其他地方。
把它想象成 樂高玩具一樣，接下來，我們將更深入的討論組件驅動開發。
React也有虛擬DOM的概念，是什麼讓他渲染非常快的同時又非常容易理解和掌握。你可以把它和組件的思想和自上而下的渲染進行結合，在文章的第二部分我們會討論這個主題。
ok，我承認，我仍然不能回答這個問題。我們又組建並且渲染得更快-但是爲什麼他是這個改變遊戲規則的人？因爲其似乎React主要是一個概念，其次是一個庫。
已經有跟這個思想一樣的庫- 讓他更快或者更慢-但是稍微有點不一樣，跟其他每一個編程概念一樣，React有他自己的解決方案，工具，庫，使他成爲一個完整的生態系統。在這個生態系統中，你必須選擇你自己
的工具並且建立你自己的框架。我知道聽起來非常可怕，但是請相信我，大部分的這些工具你已經瞭解了，我們只是將他們聯繫起來而已，你會非常驚訝於它是如此的簡單，例如我們建立在以前的基礎上，
沒有使用任何魔法，然和節點的需要和 NPM。對於開源項目，我們會使用節點的時間觸發器等其他的東西。（2015年1月，Facebook宣佈用React.js Conf 中的React替換他們的框架，不過現在還不可用，第一次公開發布的日期還不知道）
2.簡述下虛擬DOM的概念
追蹤模型變換並且將他們應用於DOM，我們必須注意兩件重要的事情
1.當數據已經改變的時候
2.那個（些）DOM元素被更新了
對於這些改變的檢測，React用了觀察者模型而不是粗暴的檢查（持續不斷的對於變化的檢查）。那就是爲什麼不去預測什麼
被改變了，它會立即知道。它降低了計算次數並且讓app更加流暢。但是他真正的非常棒的思想是它對DOM的管理和控制：
對於DOM變化檢測的挑戰，React在內存中建立了DOM樹來計算哪個DOM節點應該改變。對DOM的操作是重量級的，我們希望最低限度的較少花費。幸運的是，React嘗試儘可能的保持不觸碰其他的DOM元素
基於對象爲單位，對更少的DOM節點的操作能計算得更快，DOM節點改變的花費也有效的降低了。
自從React比較算法 使用 樹來表示DOM 並且 重新計算所有的子樹，當他的父節點被改變（被粗暴的標記），你應該注意你的模型的變化，因爲整個字數會被重新渲染，
不要失望，之後我們將一起優化這種情況。
追蹤模型變換並且將他們應用於DOM，我們必須注意兩件重要的事情
1.當數據已經改變的時候
2.那個（些）DOM元素被更新了
對於這些改變的檢測，React用了觀察者模型而不是粗暴的檢查（持續不斷的對於變化的檢查）。那就是爲什麼不去預測什麼
被改變了，它會立即知道。它降低了計算次數並且讓app更加流暢。但是他真正的非常棒的思想是它對DOM的管理和控制：
對於DOM變化檢測的挑戰，React在內存中建立了DOM樹來計算哪個DOM節點應該改變。對DOM的操作是重量級的，我們希望最低限度的較少花費。幸運的是，React嘗試儘可能的保持不觸碰其他的DOM元素
基於對象爲單位，對更少的DOM節點的操作能計算得更快，DOM節點改變的花費也有效的降低了。
自從React比較算法 使用 樹來表示DOM 並且 重新計算所有的子樹，當他的父節點被改變（被粗暴的標記），你應該注意你的模型的變化，因爲整個字數會被重新渲染，
不要失望，之後我們將一起優化這種情況。
怎樣在服務器上也這樣渲染?
實話說，這種DOM表示用的假DOM，它不可能渲染成HTML以及在服務器端輸出（沒有JSDom，PhantomJS etc.）,React也足夠智能的識別 標記已經在哪兒（來自服務器端） 並且只會在客戶端增加事件處理。
在我們會用React寫一個同構應用的第三篇文章中，這會是非常有用的
有趣的是：被渲染成HTML的React的標記包括 data-reactid屬性，那將幫助React跟蹤DOM節點
其他有用的鏈接，其他虛擬 DOM庫:
The Secrets of React's virtual DOM
Why is React's concept of virtual DOM said to be more performant than dirty model checking?
3.組件驅動開發
這是我學習React中遇到的最難的部分之一。在組件驅動開發中，在一個模板中，你看不到整個站點，最開始，你可能會認爲簡直糟糕透了。但是我非常肯定的說你以後會意識到大問題化成許多小問題的強大，
並且工作中承擔的責任更小。它讓事情跟容易理解，維護和測試
我應該用它做什麼呢？
下面我們來看下面的圖片。這可能是一個功能或網站被分解的不同組件。每一個用不同的代表不同的簡單組件的顏色來表示邊框區域。根據這個，你就有了下面的組件層次結構。
FilterableProductTable
- SearchBar
- ProductTable
- ProductCategoryRow
- ProductRow
一個組件應該包含什麼？
首先，遵循單一責任原則是明智的和理想的。把你的組件設計成僅僅以爲一個事情具有代表性。當你覺得用你的組件做起來不是很順的時候，你就應該把你的組件拆分成一個個更小的。
從我們開始討論組件分層後，你的組件也應該使用其他的組件。但是讓我們看下這個ES5組件的代碼
var HelloComponent = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});讓我們看下在ES6中跟ES5的同樣的組件
class HelloComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}正如你看到的，我們的組件中融合了JS和HTML的代碼。等等，什麼？在我JavaScript中竟然包含HTML？是的，可能你覺得不可思議（奇怪），但是在某方面這個思想代表一切。記住，
單一原則。它讓一個組件及其靈活並且極好服用。
用React，你可以用純JS寫你的組件
render () {
return React.createElement("div", null, "Hello ",
this.props.name);
}但是我認爲這種方式不太適合寫你的HTML。幸運的是我們能用叫做JSX（JS擴展<一種可以讓我們寫內聯HTML的東東>）語法的來寫
render () {
return <div>Hello {this.props.name}</div>;
}JSX類似XML語法擴展的ECMAScript。JSX和HTML語法很相似，但是有一些點不同。例如，HTML中的class屬性在JSX中中叫做className，其他的更深層次的不同之處可以看看Facebook的 "HTML Tags vs. React Components "
的指導。
因爲默認情況下，JSX不是所有瀏覽器都支持。所有我們必須將他編譯成JS。之後在安裝部分我會寫一些關於怎樣使用JSX。（順便說一下：Bable也能將JSX解析成JS）
非常有用的關於JSX的相關鏈接：
Babel: How to use the react transformer
其他的我們能增加的呢？
每一個組件都有一個內部狀態，邏輯，甚至是包括處理程序（例如：按鈕點擊，表單輸入東西的改變）並且也有內部樣式。基本上包含所有需要顯示的東東。
在代碼片段中你可以看下這部分{this.props.name}。那意味着當我們建立完我們的組件結構後，我們可以通過改變屬性改變我們的組件。就像: <MyComponent name="John Doe" />
他讓我們的組件可複用並且讓我們的應用狀態從根組件傳遞給子組件，貫穿整個應用成爲可能，他也是數據的必要部分。
看看下面一個簡單的Rect app代碼片段：
class UserName extends React.Component {
render() {
return <div>name: {this.props.name}</div>;
}
}
class User extends React.Component {
render() {
return <div>
<h1>City: {this.props.user.city}</h1>
<UserName name={this.props.user.name} />
</div>;
}
}
var user = { name: 'John', city: 'San Francisco' };
React.render(<User user={user} />, mountNode);4.React擁抱ES6
在你的新的React項目中，沒有其他的地方比ES6更好的值得嘗試的了。
React不是來自於ES6語法，今天1月在版本v0.13.0中開始支持。
但是，這篇文章的討論範圍不會深入解釋ES6；我們會使用他當中的組件，例如許多的類，arrows,consts 和 模塊。例如，我們將從React.Component 類中繼承我們的組件。
給出的ES6 只是被部分瀏覽器支持，我們將用ES6來寫代碼，之後會將他翻譯成ES5並且將他能在所有的現代瀏覽器中能正常工作，哪怕沒有ES6的支持。爲了達到這個目的，
我們會使用Babel解析器。這兒有一個非常棒的並且非常簡潔的對於ES6模塊的介紹，我推薦大家可以看下這個：
關於ES6的有用的網址鏈接
5.用webpack和babel的綁定
我較早前提到過，我們將涉及到一些我們熟悉的工具並且用這些工具的組合來創建我們的應用。這第一個工具也是廣爲人知的就是node.js模塊系統，他是一個包管理者，
我們會用 node 的風格寫代碼和規定我們需要的每件事情。React 就是一個像npm包一樣簡單並且可用。
我們的組件就會像這個樣子：
// would be in ES5: var React = require('react/addons');
import React from 'react/addons';
class MyComponent extends React.Component { ... }
// would be in ES5: module.exports = MyComponent;
export default MyComponent; 比如我們會用debug去調試和搞定構成請求。
現在我們通過node就有了一個可依賴的系統。我們通過 npm幾乎能解決所有的事情。那接下來呢？我們會選擇我們最喜歡的庫去解決我們的問題並且在客戶端將他作爲一個
單一的代碼庫給綁定在一起。爲了達到這個目的，我們需要一個解決方案，讓其在服務器上運行。
重點是我們需要選擇一個綁定者。當今最著名的解決方案之一就是Browserify 和 Webpack 項目。現在我們正在使用Webpack，因爲就我的經驗看來Webpack 是React社區更加適合的首選的。
但是我也十分確定，你也能用Browserify達到同樣的效果
它是怎樣工作的？
Webpack將我們的代碼和請求的包綁定到輸出文件的。
實際上，Babel 這兩件事都可以做。讓我們來使用它吧！
我們做起來非常容易，因爲Webpack 是配置型的
我們需要什麼？首先 我們需要安裝必要的模塊
在你的終端運行下面的命令
npm install --save-dev webpack
npm install --save-dev babel
npm install --save-dev babel-loader var path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/client/scripts/client.js'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /src\/.+.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
};在這之後，你可以只需要在你的index.html頁面引用bundle.js，如下：
<script src="bundle.js"></script>
（小貼士：你可以使用node-static命令，並安裝依賴模塊，以便啓用你的站點。npm install -g node-static ，然後從static . 去使你文件夾的內容展示到這個地址: 127.0.0.1:8080.）
6.設置項目
現在我們已經安裝並且配置了W惡補P啊出口和Babel屬性。但是在每個項目中，我們都需要一個項目結構。
文件夾結構
我更喜歡採用下面的項目結構：
config/
app.js
webpack.js (js config over json -> flexible)
src/
app/ (the React app: runs on server and client too)
components/
__tests__ (Jest test folder)
AppRoot.jsx
Cart.jsx
Item.jsx
index.js (just to export app)
app.js
client/ (only browser: attach app to DOM)
styles/
scripts/
client.js
index.html
server/
index.js
server.js
.gitignore
.jshintrc
package.json
README.md 這個想法在這個結構之後是爲了將React app從客戶端和服務器端的代碼分離出來。因爲我們的React app可以同時在客戶端運行和服務器端運行。（=isomorphic app, 我們將會在之後的博客中深入的探討這個問題)
7.怎樣測試我的React應用
當我們接觸一個新的技術的時候，最重要的一些問題都應該測試。如果沒有測試，你就是在玩火。
那我們應該使用什麼測試框架呢？我的經驗告訴我，前端最好的測試是有他的開發者來完成。因此，我用Jest來測試我的app應用。Jest是facebo出的一個測試框架。
Jest還有很多強大的功能，在本文我不一一介紹。
我覺得討論Reat app的測試時非常重要的。幸運的是，單一原則是我們的組件只做一件事情。所以我們只是專注於測試那一件事情。通過組件的屬性，觸發事件，查看渲染出來的樣子，聽出來很容易，實際也如此。
要看更多的實際的例子，可以下載React.js的輔助文檔。
測試JSX和 EX6文件
去測試我們EX6語法和JSX文件。我們應該將他們翻譯成Jest.Jest有一個你可以定義的預處理其的配置變量。
首先我們應該定義一個預處理器，然後把路徑傳給Jest.在我們的知識庫中，你可以找到一個可運行的例子。
jet也有一個叫做 React ES6 testing 的例子。
8.贈送的
在本文中，我們會探討爲什麼React速度非常快並且擴展性很好，但是他的方法又非常不同。怎樣渲染，組件驅動開發是什麼，你怎樣創建，組織你的項目，這些都是基礎。
在接下來的“the react way”這篇文章中，我們將深入的探討。
我任然相信，學習一個新的變成思想最重要的方式就是開發和寫代碼。
那就是爲什麼我想叫你去寫一些非常棒的東西並且花一些時間查看官方的react web站點，尤其是導航部分。良好的資源，facebook的開發者，還有react社區的人一起做了這個非常棒的事情。
9.下一步
如果你喜歡這篇文章。訂閱我們的郵件，其餘關於React的東西你就會很快獲得。
我們會討論的一些有趣的話題。
希望很快見到你，在那之前，豐富你的知識庫
原文地址：http://blog.risingstack.com/the-react-way-getting-started-tutorial/