React学习（1）

来源：互联网发布：虚拟相机软件编辑：程序博客网时间：2024/05/16 09:47

react特性

- 虚拟DOM- 组件化

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

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

JSX语法

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

组件类

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

 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")        )

0 0