React 1
react 作为当今前端最热的框架之一，虽然因BSD+专利许可协议事件再三成为话题焦点，但其不可否认的设计思想还是值得学习的。再者，凡封闭者必将自掘坟墓，即便以维护开源为理由也不能排除在外；facebook作为开源精神的一个践行者不会不明白这么浅显的道理，所以，copyRight最终还是会走向coprLeft.
上帝的归上帝，凯撒的归凯撒，程序猿能安心的写代码就好。
现在有很多构建React项目的脚手架工具，很多开发者也自己开发出各种构建工具，这里推荐两个：一个是facebook官方推荐的react-cli工具create-react-app create-react-app；另一个是淘宝基于AntDesign的dva-cli dva-cli;
1. what is React:
- 相对于angular来说，react更像是一个库而非框架，因为从控制反转的角度来说，使用angular开发的过程，我们需要遵循angular的各种规范，需要按照angular的解构设计去编写逻辑，组织代码；而使用react过程，我们可以采用任何其他方案来替代react的功能，当你的项目中已经引入react的前提下，你仍然可以根据自己/团队的喜好和技术栈来选择适合的开发组件，你可以去控制react,控制你所开发的项目。所以我更赞成称react为一个优秀的前端库，而非框架。这也再次印证了大家一致认为的react的学习成本和学习难度要低于angular,学习曲线也更加平滑。
2. why React?
- 让我们先抛弃所有的框架库概念，简单的从一个最简单的hello world例子来看一下,如何在你的项目中使用react:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React </title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id='container'>
</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world</h1>,
document.getElementById('container')
)
</script>
</body>
</html>
1.仅仅需要两步即可写出一个react例子：
- 1.引入react依赖文件：①react.min.js--React的核心库文件；②react-dom.min.js--React封装/操作Dom的文件；③babel.min.js--将ES6代码转化为ES5代码的下一代javascript编译器；
- 2.构建react组件：
ReactDOM.render(domElement,container);
2. 然后再深入看下react的优秀之处：
- 专注于View层，其他交给周边生态系统，给予开发者最大个性化便利；
- 采用虚拟DOM技术，避免了直接操作Dom元素，其性能自然不用过多优化即可有很好的用户界面体验；
- 其配合使用的优秀插件（react自身并不具有）flux采用单项数据流，页面状态更新逻辑更清晰轻量；
3. how to use React?
1. 可以从零开始一点一点构建整个项目，这种方式可以促进开发者更加深入的理解react的整个构建原理及底层实现逻辑；
2. 采用构建工具，更加快捷高效的搭建项目开发环境；
这里主要介绍一下采用官方推荐的构建工具create-react-app
- 安装构建工具：
npm install create-react-app -g - 初始化项目：
create-react-app project-name - 进入项目目录：
cd project-name - 安装项目依赖包：
npm install - 运行项目：
npm start - 打开浏览器，输入
localohost:3000即可看到项目
4. react 核心概念
React的核心思想只有一个：封装组件。
最近几年，前端一直流行这各种MV*框架，其知道思想就是向后端开发学习，业务逻辑视图分离，使系统各部分之间耦合性更小、复用性更高、功能更专注；从代码逻辑结构上来讲，就是html、js(controller)、css、router进行拆分集中处理，典型的框架如Angular,Knockout,Ember；相比较而言React有一下几个特别之处:
- 模块化思想，将web页面不断拆分成各个功能集中的组件，每个组件聚焦于一个或一类功能，代码层面并未对html、js进行区分，甚至进行糅合，由此就蛋生了JSX这种html+js杂糅的‘a faster,safer,esier Javascript’;
- 虚拟DOM：页面初始化之前；react对于组件在服务端完成DOM tree + Style rules 到render tree的解析，直接将解析后的render tree 返回给浏览器，极大提高了web网站的性能；
- 单向数据流：页面元素/状态发生变化是，react各层级之间的组件、页面与服务端的数据交互，采用
props、state来进行组件间的通讯，虽然代码书写时需要创建各种action来维护UI的更新，没有双向数据绑定那么方便，但UI性能上却很容易得以保证；
总体来说react就是：
- 一个的中心思想：模块化；
- 四大核心概念：组件、JSX、Virtual DOM、 one-way-Data-Flow。
参考文章：