React学习（1）

react特性

- 虚拟DOM
- 组件化

• borwser.js 将JSX语法转换为js语法
• react.js 核心库
• react-dom.js 提供与dom有关的功能

    <script type="text/bable">
        //bable  转换编译器 
    </script>

JSX语法

1. 借助React环境运行
2. jsx标签就是HTML标签
3. jsx语法转换， jsx -> js
4. 在jsx中运行js代码，js代码要用｛｝括起来
5. 属性，设置样式，事件绑定

组件类

1. 大写开头，驼峰命名
2. React.createClass（｛｝）方法创建组建类
3. 每个组件必须实现自己的render方法，输入一个定义好的模版；返回值为null，false，组件模版
4. 只能包含一个顶层标签

 var HelloReact = React.createClass({
     render:function(){
         return (
                <h1>组件</h1>
                <p>内容</p>
            )
     }
 })
 ReactDOM.render（
    <HelloReact />,
    document.getElementById("id");
）

组件样式

- 内联样式
- 对象样式
- 选择器样式

1. 以，结尾；HTML以；结尾
2. key，中不能出现“-”
3. key驼峰命名
4. value如果是字符串要加引号
5. value是数字，不需要带单位

    //这个样式需要写在头部的style标签之内
    .xzq ｛
        background: #fff;
    ｝
    //样式对象
    var sty = {
        height: 100,
        background: '#f0f'
    }
    var HelloReact = React.createClass({
        render: function(){
            return ( 
                //内联样式
                <div style={{background:'#f00',height: 200}}>内联样式和
                    //对象样式
                    <div style={sty}>对象样式</div>
                    //选择器样式
                    <div className="a">选择器样式</div>
                </div>);
        }
    });
    //渲染标签
    ReactDOM.render(
        <HelloReact />,
        document.getElementById('container')
        )

复合组件

创建多个组建合成一个组建，首先定义子组件，然后定义复合组件

    var WebName = React.createClass({
        render: function() {
            return <h1>蓝天白云</h1>
        }
    })  
    var WebLink = React.createClass({
        render: function(){
            return <a href="#">www.yuanjingzhuang.com</a>
        }
    })
    var WenShow = React.createClass({
        render: function(){
            return (
                <div>
                    <WebName/>
                    <WebLink/>
                </div>
            )

        }
    })
    ReactDOM.render(
        <WenShow />,
        document.getElementById("container")
        )