【学】React的学习之旅1

React的学习之旅1

• 单标签要有斜杠代表结束
• 用React.createClass()方法时，赋值后的组件名称首字母一定要大写
• 一定要先定义组件，再用ReactDOM.render调用
• 组件里render对应的函数的返回值，如果有多个html标签，外面一定要再多包一层，外面可以用小括号包起来

var FirstComponent = React.createClass({ //FirstComponent首字母大写
    render:function(){
        return <img src="./image/1.png"/>
    }
});

//定义组件(组件名首字母必须大写)
//React对象调用createClass方法，把一个对象传进去,对象有个键是render，对应是个函数，有个返回值
var FirstComponent = React.createClass({
    render:function(){
        return <img src="./image/1.png"/>
    }
});

//这里将封装好的FirstComponent，用ReactDOM的render方法添加到指定的DOM中
ReactDOM.render(
    <FirstComponent />,
    document.getElementById('wrap')
);
ReactDOM.render(
    <FirstComponent />,
    document.getElementById('div1')
);

var FirstComponent = React.createClass({
    render:function(){
        return ( //这里有2个标签，外面必须再包一层，另外可以用小括号包一下
            <div>
                <img src="./image/1.png"/>
                <h2>欢迎学习React</h2>
            </div>
        )
    }
});

• 利用creatClass定义的属性，可以在html中传入不同的值，然后用{this.props[属性名]}的方式来定义这个值是可以在外面定义的，然后在后面的ReactDOM.render方法中调用时，在每个对应的html标签中传入。方法有两种，一种是直接赋值，一种是把所有属性名和属性值放进一个对象中。
• {...[对象名称]}比如{...obj}是一种语法糖，意思将obj中的键值对全部按照标签的属性名和属性值的方式添加到html标签中
• 要注意的是，在createClass时，里面标签对应的值用了{}表示，这个在标签中用{}的做法，babel会自动解析成js代码

var FirstComponent = React.createClass({
    render:function(){
        return (
            <div>
                <h2>{this.props.title}</h2>
                <input type="text" />
                <input type="button" value={this.props.btnValue}/> //注意这里的要用到this.props.btnValue，btnValue要对应好传入对象中的键，而this.props相当于谁调用渲染了这个组件，就传入该标签中属性的属性对象（属性键值对）
            </div>
        )
    }
});

var obj = {
    title: 'Welcome to study React!!!',
    btnValue: 'Confirm!'
};
var obj2 = {
    title: '欢迎学习react!!!',
    btnValue: '确认!'
};


ReactDOM.render(
    //<FirstComponent title={obj.title} btnValue = {obj.confirm} />,
    <FirstComponent {...obj} />,//这里用了语法糖，把obj中的键值对title和btnValue以及它们对应的值赋给FirstComponent标签中
    document.getElementById('wrap')
);
ReactDOM.render(
    <FirstComponent {...obj2}/>,//第二个组件标签渲染时用的是obj2中的属性名和属性值
    document.getElementById('div1')
);

• 如果要直接给组件中的html标签添加class，不能直接在标签里写class，而应该要用className，因为这里是会被解析成js代码

var Hello = React.createClass({  //这里是className，而不是class
    render:function (){
        return (<h2 className="active">Hello {this.props.title}.{this.props.name}</h2>)
    }
});

• 如果要在组件里的html标签中直接写入行间样式，不能使用字符串的形式，而是可以用json的形式，但是如果不用json存成变量，那就要写{{}}的形式，外面一层{}相当于解析js代码，里面一层才是json的那个大括号
• 行间样式如果涉及到复合样式，也要用驼峰的方式，而不是css里用-连接了，时刻记住这里是js解析，另外属性值仍然要用''包起来

var Hello = React.createClass({
    render:function (){ //这里fontSize，而不是font-size，用了2个大括号宝珠
        return (<h2 style={{color:'deeppink',fontSize:'30px'}}>Hello{this.props.name}</h2>) 
    }
});