与VueJs的区别
- Vue更注重视图的自动同步，使用习惯偏向前端人员
- React更注重组件及其状态的管理，使用习惯偏向程序人员
React生态圈
- jsx:扩展了js自身的语法，是React的基础
- Flux:React的数据流组件
- Redux:比Flux更加简单，易用
- React-Native:用react编写原生移动应用
- React-Server:服务端渲染React组件
JSX
jsx是一门独立的语言，希望能改进js的很多问题，但是ES6出现后，包含了jsx的大部分特性，所以很少独立使用
- babel可以编译jsx
- react是基于jsx语法
JSX的主要特色
提供模板式创建元素的方法
//普通元素创建
let oDiv = document.createElement('div');
oDiv.title = 'DarkCode';
oDiv.innerHtml = "box";
//jsx方式
let oDiv = <div title="DarkCode">box</div>
注意：jsx并不会真正的创建DOM元素(内部名称:Node),jsx只是解析模板语法，创建虚拟DOM节点需经由ReactDOM渲染才会成为真正的DOM元素
关于虚拟DOM
直接操作DOM元素非常缓慢(资源开销是普通数据操作的数千倍),所以很多框架(Vue、React)都具备虚拟DOM特性，我们直接操作的是虚拟DOM,而非真实节点，React会在合适的时机批量更新DOM节点(一般是主进程空闲时)，从而提高性能
能否单独使用JSX
不能，React强依赖JSX用于解析jsx语法，但jsx强依赖于React用于解析模板语法
第一个Rect程序
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<div id="div1"></div>
<script type="text/babel">
let oDiv=document.getElementById('div1');
ReactDOM.render(<span>aaa</span>, oDiv);
</script>
</body>
</html>- browser:babel，用于编译jsx
- react:react核心库
- react-dom:用于渲染组件
特殊属性
在react中的"html代码"，其实并不是真正的html,而是一种jsx语法，绝大部分标签一样用，但有两个属性需要注意：
- class:className
- for:htmlFor
单标签
React中单标签必须闭合(html标签和自定义组件都是)
- <img src=""> 错误
- <img src=""/> 正确
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。