/*
    JSX（javaScriptXML）语法入门：
        1、不是一门语言，是一个语法或者说是语法糖
        2、JSX标签其实就是HTML标签，只不过在javascript中这些标签的时候，
            不使用“”,遇到HTML标签（以<开始），就用HTML规则解析，遇到代码块
            （以{开始），就用javascript规则解析
        3、JSX语法浏览器无法解析，需要使用插件将其转化为js代码
        4、代码更加直观
*/
/*
    1、首字母必须大写
    2、驼峰命名
    3、使用className与htmlFor代替class和for
    4、组件与组件之间是可以嵌套的
    5、在JSX语法中只能使用求值表达式，不能使用语句
    6、只有一个顶层标签
*/
var Demo = React.createClass({
    change:function (){
        return 'demo'
    },
    handleClick:function(){
        alert(1)
    },
    render: function(){
        // this指向整个（当前的组件）组件
        return <div className="demo" onClick={this.handleClick}>这是一个{this.change()}</div>
    }
})
// console.log(Demo)
ReactDOM.render(<Demo />,document.getElementById('app'))

var HelloWorld = React.createClass({
    render:function(){
        // 现在这里是属于js的部分,不属于JSX语法的部分
        return (
            <div className="box" // class名字
            >
                {/*这是一个标题*/}
                <h1 className="title">Hello World</h1>
                {/*这是说明*/}
                <p>你好世界！</