編者語：久違了的博客，由於身體和工作的原因很久沒有寫Blog了。今天開始將會重新執筆寫，希望大家沒有忘記我，也希望主題會吸引你。
React來自Facebook,這和AngularJS來自Google那樣。AngularJS也好，Backbone也好，都解決了一個MV*的問題。簡單來說就是前端的MV*結構。那React有和不同呢？我們爲什麼還需要選擇React? React並不像AngularJS ，他只集中解決了Views,而且它是單向數據流的。React 相對於AngularJS來說，並不是一個解決MV*的框架，更接近AngularJS directives. React 提供了獨立的UI模塊化組件，方便開發，測試，和組件重用。React有別於我們熟悉的Jquery，不直接控制DOM元素，而是通過JavaScript與DOM之間的虛擬DOM元素完成對操作。大家如果想了解更多可以參考（https://www.quora.com/profile/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look）。
TypeScript在1.6版本開始已經支持React的JSX當然你得把名字換成TSX ，這讓編寫React更有範兒了。說到這個也是滿心的歡喜，因爲微軟不止愛Google,也愛Facebook. 通過TypeScript你可以寫出更漂亮的React代碼。
來個Hello World 吧！
1. 先通過tsd把React所對應的TypeScript 下載下來輸入tsd install react-global , 這裏包含了React基礎庫以及如React-Dom,React-AddOn等相對應的TypeScript描述。
2. 創建一個簡單的HelloWorld.tsx（因爲這是TypeScript哦），再入以下代碼 ：
<span style="font-size:14px;">/// <reference path="typings/react/react-global.d.ts" />
interface HelloWorldProps {
name: string;
}
class HelloMessage extends React.Component<HelloWorldProps, any> {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="React" />, document.getElementById('container'));</span>3. 通過命令行編譯HelloWorld.tsx , 在終端輸入 tsc --jsx react HelloWorld.tsx編譯通過後就可以生成HelloWorld.js了。
4. 添加一個index.html 頁面 ，去嵌套你的HelloWorld.js
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<script src="/js/react.js"></script>
<script src="/js/react-dom.js"></script>
<script src="/scripts/HelloWorld.js"></script>
</body>
</html></span>5. 直接運行index.html (這裏你需要選擇放在nodejs/.net/java/php等服務上)就可以看到Hello React了
它究竟做了什麼？ 簡單來說就是創建了一個虛擬DOM HelloMessage ，然後傳遞一個React的參數進去，然後放到頁面contents的元素內。從語法上來說，沒有多大需要學習的。你只需要理解什麼是虛擬DOM就可以了。（當然今天只談概要，更多知識我會放在後面說）。
有人會說，React只做View ，那麼剩下的M,*(Controller/Presenter/ViewModel)如何做？其實Facebook給了你一個很好的答案Flux ，完全的單項數據流傳遞，方便拆分，方便測試。如圖，這是一個經典的Flux解決方案，通過整合React能高效完成開發任務。在接下來幾天我會一一和大家解答。
React是一個比較新的前端解決方案，現在是0.14.x的版本，有很多不太成熟的地方。不過有Facebook的後臺撐腰也是非常不錯的，畢竟把它用在了Facebook/Instagram的項目中。隨着越來越多的開發人員加入到React中來，我相信會加快產品的迭代和進步。
晚安吧！！希望大家會繼續看我接下來的文章。