介绍：
该框架设计没有过分依赖某个环境，它自建一套环境，就是virtual dom(虚拟dom),你想寄生哪种环境直接拿过去使用即可；
我们这里关心向浏览器中渲染，因此需要两个库
一个是react库,构建虚拟dom库,提供一个createElement方法
一个是react-dom库,将虚拟dom渲染到页面中,提供render方法
在html中引用
===================================
React.createElement()
/*createElement 创建dom的一个方法接收多个参数
- React.createElement()
- 第一个参数表示元素名称，比如div,p,h1
- 第二个参数表示属性集合，title,class,id,style
- 第三个参数开始，表示的是该元素的子元素，通常这些元素是通过createElement创建的（当遇到文本节点可以直接写入文本）
*/
var ul = React.createElement(
'ul',
{
title:'这是一个ul'
},
'这是ul的内容'
)
========================================
把上面创建的虚拟dom渲染到页面中
ReactDOM.render(ul,document.getElementById('app'))
=========================================
复杂的创建
var ul = React.createElement(
'ul',
null,
React.createElement(
'li',
null,
'女装 / 男装 / 内衣'
),
React.createElement(
'li',
null,
'鞋靴 / 箱包 / 配件'
),
React.createElement(
'li',
null,
'童装玩具 / 孕产 / 用品'
)
)
=========================================
如何复用：封装组件
React.createClass({})
var Uls = React.createClass({
render:function(){
return React.createElement(
'ul',
null,
React.createElement(
'li',
null,
'女装 / 男装 / 内衣'
),
React.createElement(
'li',
null,
'鞋靴 / 箱包 / 配件'
),
React.createElement(
'li',
null,
'童装玩具 / 孕产 / 用品'
)
)
}
})
// console.log(Uls) 可以看出这个是一个构造函数，如果要使用这个组件，需要再对它创建元素
var ul = React.createElement(Uls,null);
ReactDOM.render(ul,document.getElementById('app'))
var ul2 = React.createElement(Uls,null);
ReactDOM.render(ul2,document.getElementById('app2'))
===========================================================
jsx语法
在创建虚拟dom的时候，每次调用react.createElement很麻烦，并且嵌套元素也很麻烦，他们为了解决这类问题，定义jsx语法;
我们创建虚拟dom的时候可以像写html一样写虚拟dom
html :
jsx :
用html语法书写虚拟dom
但是该语法不能直接写入js，react提供了一套编译器，专门用来编译jsx语法，因此如果书写jsx语法就要用这个编译器编译它；
在html上引用jsx文件：
//成功编译后会自动链接到js/03.js
编译需要用到fis和fis-parser-babel2插件,cmd中使用 npm i -g fis-parser-babel2 下载插件，新建一个fis-conf.js配置文件:
fis.match('**.jsx',{
parser:fis.plugin('babel2'),
rExt:'.js'
})
===========================================
把上面复杂的案例用jsx实现
var Uls = React.createClass({
render:function(){
//输出虚拟dom
return (
- 女装 / 男装 / 内衣
- 鞋靴 / 箱包 / 配件
- 童装玩具 / 孕产 / 用品
)
}
})
// console.log(Uls) 可以看出这个是一个构造函数，如果要使用这个组件，需要再对它创建元素
ReactDOM.render(在这里
还可以在ReactDOM.render前定义变量传入
如：
var ul = (然后cmd执行 fis release -d ../test
为方便编译可以监听 fis release -wd ../test 实时编译
别忘记放个app.js，node就可以启动服务器查看效果
================================================
html内部jsx语法：在html内部书写jsx，
//这是上面外部引用jsx
在fis-conf.js中书写html:jsx来捕捉
fis.match('**.html:jsx',{
parser:fis.plugin('babel2'),
})
============================================================
jsx语法应该知道的：
- className:给节点一个类和id，类名的属性名不能写为 class,因为class在js中是保留字，所以你要用驼峰写为className;
- htmlFor:
label中for来对应要点击的id名,因为js中for是关键字,所以要要用htmlFor
3.标签闭合： ,一定要加上正斜杠闭合标签；
4.只能在一个盒子下包裹：最外层一定是一个盒子而不是多个盒子；
5.定义组件首字母大写；
例如：
============================================================
插值
动态改变虚拟dom中的属性值或者内容
语法：{表达式}
表达式中可以写变量，可以写js语句，可以写运算符号（+、-、*、/）等等等
var Header = React.createClass({
render:function(){
var userName = '瑞源先生';
var data = new Date();
return (
{userName}
{data.getHours() > 12 ? '下午' : '上午'}
)
}
})
ReactDOM.render(