介绍：

该框架设计没有过分依赖某个环境，它自建一套环境，就是virtual dom(虚拟dom),你想寄生哪种环境直接拿过去使用即可；
我们这里关心向浏览器中渲染，因此需要两个库

一个是react库,构建虚拟dom库,提供一个createElement方法
一个是react-dom库,将虚拟dom渲染到页面中,提供render方法
在html中引用

<script src="react.js"></script>
<script src="react-dom.js"></script>

===================================

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 : <div></div>
jsx : <div></div>
用html语法书写虚拟dom

但是该语法不能直接写入js，react提供了一套编译器，专门用来编译jsx语法，因此如果书写jsx语法就要用这个编译器编译它；

在html上引用jsx文件：

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="js/03.jsx"></script> //成功编译后会自动链接到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 (<ul>
            <li>女装 / 男装 / 内衣</li>
            <li>鞋靴 / 箱包 / 配件</li>
            <li>童装玩具 / 孕产 / 用品</li>
            </ul>)
    }
})
// console.log(Uls) 可以看出这个是一个构造函数，如果要使用这个组件，需要再对它创建元素
ReactDOM.render(<Uls />,document.getElementById('app'))

在这里<Uls /> 因为定义时Uls还是一个构造函数，并没有对自己创建虚拟dom

还可以在ReactDOM.render前定义变量传入
如：

var ul = (<Uls></Uls>);
ReactDOM.render(ul,document.getElementById('app'))

然后cmd执行 fis release -d ../test

为方便编译可以监听 fis release -wd ../test 实时编译

别忘记放个app.js，node就可以启动服务器查看效果

================================================

html内部jsx语法：在html内部书写jsx，

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="js/03.jsx"></script>//这是上面外部引用jsx

<script type="text/x-jsx"> // 这里修改type为text/x=jsx
var div = (<div></div>);
console.log(div)
</script>

在fis-conf.js中书写html:jsx来捕捉

fis.match('**.html:jsx',{
    parser:fis.plugin('babel2'),
})

============================================================

jsx语法应该知道的：

1. className:给节点一个类和id，类名的属性名不能写为 class,因为class在js中是保留字，所以你要用驼峰写为className;
2. htmlFor:<label htmlFor="chooseC">选中</label><input type="checkbox" id="chooseC" />
   label中for来对应要点击的id名,因为js中for是关键字,所以要要用htmlFor
   3.标签闭合：<input /> ,一定要加上正斜杠闭合标签；
   4.只能在一个盒子下包裹：最外层一定是一个盒子而不是多个盒子；
   5.定义组件首字母大写；

例如：

<script type="text/x-jsx">
    var Div = (<div title="这是瑞源先生公众号" className="bg-green" id="red">瑞源先生访问指数<br/><label htmlFor="chooseC">选中这里这里这里</label><input type="checkbox" id="chooseC" /></div>);

    ReactDOM.render(Div,document.getElementById('app'))

    console.log(Div)
</script>

============================================================

插值

动态改变虚拟dom中的属性值或者内容

语法：{表达式}

表达式中可以写变量，可以写js语句，可以写运算符号（+、-、*、/）等等等

var Header = React.createClass({
    render:function(){
        var userName = '瑞源先生';
        var data = new Date();
        return (
            <div className="header">
                <div className="inner">
                    <div className="left">
                        <span>{userName} </span>
                        <span>{data.getHours() > 12 ? '下午' : '上午'}</span>
                    </div>
                </div>
            </div>
            )
    }
})

ReactDOM.render(<Header />,document.getElementById('app'));