開篇前言
最近在嘗試如何做一個全棧程序員，考慮到Facebook的React Native可以用在Android和IOS，自然想前端也可以直接使用Facebook的產(chǎn)品React來完成，這樣學(xué)習(xí)的成本會低一些。
學(xué)習(xí)React當(dāng)然首選官網(wǎng)的教程：https://facebook.github.io/react/
而本系列文章，其實也是這個官方教程的學(xué)習(xí)筆記，除了記錄外，還會補(bǔ)充一些初學(xué)者可能遇到的問題（特別是移動端轉(zhuǎn)前端不清楚的概念），以及自己的一些心得體會，希望對初學(xué)者有所幫助。
React是什么
如何告訴一個不知道React的人，React是什么？
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
簡單來說，React一個用來構(gòu)建View端的JavaScript庫。
React的三個特點(diǎn)：
Declarative
Component-Based
Learn Once, Write Anywhere
"Component-Based"基于組件及"Learn Once, Write Anywhere"這兩點(diǎn)都比較好理解。但初次接觸前端，Declarative一時半會還沒搞明白。
React的組件其實本質(zhì)上就是一個函數(shù)（function），而且React中的數(shù)據(jù)是單向流動的。
新概念Declarative：
在stackoverflow上也有網(wǎng)友在問：Difference between declarative and imperative in React.js?
A declarative style, like what react has, allows you to control flow and state in your application by saying "It should look like this". An imperative style turns that around and allows you to control your application by saying "This is what you should do".
按這個說法來說是，declarative的風(fēng)格是“how you do something”，而imperative風(fēng)格是“what you do, or something.”
玩英文的文字游戲更讓人一頭霧水。
這篇文章的解釋不錯：https://medium.freecodecamp.com/imperative-vs-declarative-programming-283e96bf8aea#.m4co0r4gv 最后看到作者用編程語言做例子，恍然大悟。
Imperative: C, C++, Java
Declarative: SQL, HTML
(Can Be) Mix: JavaScript, C#, Python
SQL, HTML屬于Declarative語言，可以理解成標(biāo)識型語言。
如：
SELECT * FROM Users WHERE Country=’Mexico’;
<article>
<header>
<h1>Declarative Programming</h1>
<p>Sprinkle Declarative in your verbiage to sound smart</p>
</header>
</article>
Declarative只關(guān)心要做什么（只要描述出要做什么就可以了），而Imperative關(guān)心怎么做，具體的步驟是什么。
Most declarative solutions are an abstraction over some imperative implementation.
Declarative的好處，組件代碼只關(guān)心目標(biāo)（要做什么），代碼中沒有具體的要達(dá)到目標(biāo)的執(zhí)行步驟，這樣你的代碼就會是上下文無關(guān)的（context-independent），極大的增強(qiáng)了代碼的可重用性。面Imperative的代碼和當(dāng)前狀態(tài)有關(guān)，很難獨(dú)立出去。
JSX
React的組件必需要實現(xiàn)render方法處理輸入的數(shù)據(jù)和返回要繪制的界面元素。如下是一個簡單的UI組件，使用JSX的風(fēng)格：
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
JSX是可選的，你也可以不使用它，用純的JavaScript代碼來實現(xiàn)：
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
}
ReactDOM.render(React.createElement(HelloMessage, { name: "Jane" }), mountNode);
最終顯示：
Hello Jane
練習(xí)環(huán)境
雖然看到這里，我們對React.js已經(jīng)有一下初步的了解，但是學(xué)習(xí)編程只看不動手的話，是很難真正搞懂并獲得快速提高的。雖然可以用官方提供的第三方在線編輯器直接修改運(yùn)行代碼（http://codepen.io/gaearon/pen/rrpgNB?editors=0010 ）或自己下載Html文件編輯代碼，但還是不及自己重新創(chuàng)建一個完整的React應(yīng)用。
現(xiàn)在我們來看看如何搭建一個環(huán)境，方便我們進(jìn)行編碼和調(diào)試。詳情可以看：https://github.com/facebookincubator/create-react-app
現(xiàn)在說一下簡要過程：
1.使用npm安裝create-react-app，create-react-app是一個創(chuàng)建React項目的命令行工具。
npm install -g create-react-app
2.使用create-react-app創(chuàng)建一個Hello World項目：
create-react-app hello-world
看一下創(chuàng)建成功的提示，“npm start”和“npm run build”都好理解，“npm run eject”是什么呢？這個問題我們留在下一節(jié)來回答。
3.切換到新建的項目并運(yùn)行
cd hello-world
npm start
我們調(diào)用npm start在開發(fā)模式下遠(yuǎn)行項目：
暫時不用太關(guān)注：Webpack and Babel，先把注意力放在創(chuàng)建一個實際能跑的React項目上。
如何在原有的項目上安裝React
對于初學(xué)者來說，暫時不考慮這節(jié)。參考：Adding React to an Existing Application
