前 言
毫無疑問，react是目前最最熱門的框架(沒有之一)，了解並學習使用React，可以說是現在每個前端工程師都需要的。
在前端領域，一個框架為何會如此之火爆，無外乎兩個原因：性能優秀，開發效率高。React當然集成了這兩大優點。
這要歸功於React的兩大特點，也是該框架一直強調的優勢：
1.虛擬dom與dom diff：在React中，一切的更新都是先更新虛擬dom，再根據react自帶的dom diff 算法，進行對比計算，在實際dom中實現最小粒度的更新，這就是React性能優秀的原因了！
2.一切皆是組件：React強調一切皆是組件，那么組件就是React的核心元素，在使用React開發時，開發人員會對各種顆粒進行組件化開發，自然而然的提升了代碼復用度，提升了開發效率。
本系列文章，每篇都會有個小實例，帶領大家一步步的走進React開發的世界。
文章預告
本系列文章分為
React實例入門教程(1)基礎API,JSX語法--hello world
React實例入門教程(2)組件與組件的生命周期--彈窗組件
React實例入門教程(3)數據流之props與state--實時更新的倒計時組件
React實例入門教程(4)事件處理--事件豐富的swipe組件
React實例入門教程(5)總結--咪咕閱讀首頁開發實戰
LET'S START
作為本系列教程的第一篇，按照國際慣例，我們先從HELLO WORLD 開始~，那么先看看本例的代碼吧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="browser.min.js"></script> </head> <body> <div id="demo"></div> <script type="text/babel"> var Helloworld = React.createClass({ render:function(){ return <div>hello world</div>; } }); ReactDOM.render(<Helloworld/>,document.getElementById("demo")); </script> </body> </html>
以上代碼需要注意：最后的<script>標簽type是“text/babel”。因為React使用的是JSX語法，他與傳統js語法不兼容，所以type要選擇babel。
最開始引入的js中，react和react-dom是react基礎庫，而browser.js是用來線上分析JSX語法的，真實項目上線中並不會引用這個，而是再上線前進行編譯（使用工具babel等）轉換成傳統js語法再上線。（因為browser線上編譯很影響性能）。為了方便大家的學習，現在這里直接引入了該js。
基礎API
從上面示例代碼可以看到，我們使用一些API，這些API都是非常基礎的，下面我來做簡單的介紹：
React.createClass:
前言里說到react一切皆是組件，那么React.createClass就是最基本的創建組件的方法，它的第一個傳入參數是json對象，代表組件的主體，該json其中，有必帶的和可選擇的參數，其必帶參數為render，類型是函數要求返回該組件的模版。
使用方式可見篇頭示例，具體細節會在后續組件章節中做介紹。
ReactDOM.render:
ReactDOM.render 是 React 的最基本方法，用於將模板(html，jsx,React.createElement等)轉為 HTML ，並插入指定的 DOM 節點。
看下面的示例代碼
ReactDOM.render(<h1>HELLO,REACT!</h1>,document.getElementById("example"));
就是將一段html結構輸出到id為example瀏覽器，效果如下：
JSX
JSX即JavaScript XML，即一種在React內部構建的標簽語法，React不使用JSX一樣可以工作，但是使用JSX可以讓代碼簡潔，提高代碼可讀性，因此推薦使用：
那么，我們來看看對比，前面示例代碼中，使用了JSX語法的語句為：
<Helloword/>
如果不使用JSX語法將變成：
React.createElement("Helloword",{},"");
可見JSX語法的優勢。
那么讓我們來學習JSX語法：
JSX和HTML很像，但卻不同於HTML，JSX中標簽名可以是HTML標簽，也可以是自己定義的組件，如前面示例中的Helloworld組件。那么我們來具體看看JSX與HTML的不同處和需要注意的地方：
屬性引用：
HTML ：
<div id="some-id" class="some-class" style="color:red;">...</div>
JSX ：
<div id="someId" className={someClass} style={{color:red}}>...</div>
如上示例所示，JSX語法中，屬性的引入擁有HTML的方式（文本直接賦值）；也可以引用JS變量（如：someClass）,方式是使用大括號包裹，其中要注意的是，class在JSX中要寫成className，style的 賦值要寫成json的引入 ，如上例。
條件判斷：
在JSX標簽的屬性中，我們可以使用條件判斷來根據條件生成JSX，JSX允許的條件判斷方式是，三目運算符，邏輯與(&&)運算符，使用變量，使用函數。
看面的示例代碼：
給出一個函數：
function getNumber(){ return Math.floor(Math.random()*100); }
對應JSX片段：
<div className={this.state.num>1?"demo1":"demo2"} >{getNumber()}</div>
這段jsx 會根據this.state.num值來選擇對應的class，並隨機生成數字來填充內容。
事件綁定
JSX中，和HTML事件綁定類似，對應的事件名稱為onClick,onChange等：
<div onClick={this.handleClick}>...</div>
特殊用法
數組引入：
var jsxArr = [<div>1</div>,<div>2</div>,<div>3</div>,<div>4</div>]; ReactDOM.render(<div>{jsxArr}</div>,...); 輸出的結果等同於 ReactDOM.render(<div><div>1</div><div>2</div><div>3</div><div>4</div></div>,...);
JSX可以根據數組直接遍歷產出JSX結構
循環遍歷：
類似於數組，我們可以使用循環的方式產生jsx 結構
var demos= ['demo1', 'demo2', 'demo3']; ReactDOM.render( <div> { demos.map(function (demo) { return <div>Hello, {demo}</div> }) } </div>,...);
產出的結果為：
Hello，demo1！ Hello，demo2！ Hello，demo3！
你看懂了么~
以上就是對React 基礎API，和 JSX語法的介紹講解了，那么回頭看看最初的示例代碼，是不是已經了解如何使用了呢？
預知后續內容 請關注微信公眾號 --Web前端Talk （微信號:migufe）
每周更新一篇~