开篇前言
最近在尝试如何做一个全栈程序员，考虑到Facebook的React Native可以用在Android和IOS，自然想前端也可以直接使用Facebook的产品React来完成，这样学习的成本会低一些。
学习React当然首选官网的教程：https://facebook.github.io/react/
而本系列文章，其实也是这个官方教程的学习笔记，除了记录外，还会补充一些初学者可能遇到的问题（特别是移动端转前端不清楚的概念），以及自己的一些心得体会，希望对初学者有所帮助。
React是什么
如何告诉一个不知道React的人，React是什么？
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
简单来说，React一个用来构建View端的JavaScript库。
React的三个特点：
Declarative
Component-Based
Learn Once, Write Anywhere
"Component-Based"基于组件及"Learn Once, Write Anywhere"这两点都比较好理解。但初次接触前端，Declarative一时半会还没搞明白。
React的组件其实本质上就是一个函数（function），而且React中的数据是单向流动的。
新概念Declarative：
在stackoverflow上也有网友在问：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的风格是“how you do something”，而imperative风格是“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语言，可以理解成标识型语言。
如：
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只关心要做什么（只要描述出要做什么就可以了），而Imperative关心怎么做，具体的步骤是什么。
Most declarative solutions are an abstraction over some imperative implementation.
Declarative的好处，组件代码只关心目标（要做什么），代码中没有具体的要达到目标的执行步骤，这样你的代码就会是上下文无关的（context-independent），极大的增强了代码的可重用性。面Imperative的代码和当前状态有关，很难独立出去。
JSX
React的组件必需要实现render方法处理输入的数据和返回要绘制的界面元素。如下是一个简单的UI组件，使用JSX的风格：
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
JSX是可选的，你也可以不使用它，用纯的JavaScript代码来实现：
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
练习环境
虽然看到这里，我们对React.js已经有一下初步的了解，但是学习编程只看不动手的话，是很难真正搞懂并获得快速提高的。虽然可以用官方提供的第三方在线编辑器直接修改运行代码（http://codepen.io/gaearon/pen/rrpgNB?editors=0010 ）或自己下载Html文件编辑代码，但还是不及自己重新创建一个完整的React应用。
现在我们来看看如何搭建一个环境，方便我们进行编码和调试。详情可以看：https://github.com/facebookincubator/create-react-app
现在说一下简要过程：
1.使用npm安装create-react-app，create-react-app是一个创建React项目的命令行工具。
npm install -g create-react-app
2.使用create-react-app创建一个Hello World项目：
create-react-app hello-world
看一下创建成功的提示，“npm start”和“npm run build”都好理解，“npm run eject”是什么呢？这个问题我们留在下一节来回答。
3.切换到新建的项目并运行
cd hello-world
npm start
我们调用npm start在开发模式下远行项目：
暂时不用太关注：Webpack and Babel，先把注意力放在创建一个实际能跑的React项目上。
如何在原有的项目上安装React
对于初学者来说，暂时不考虑这节。参考：Adding React to an Existing Application
网友评论