React入门2组件，数据绑定

在项目的src目录下新增components，用于存放组件

新增Home.js，代码如下：

import React,{Component} from 'react';

class Home extends Component{

    constructor(props){
        super(props);
    }


    render(){
        return <div>this is Home!</div>
    }
}
//暴露这个Home组件
export default Home;

修改App.js，代码如下

import React from 'react';
import './App.css';

//引入Home组件
import Home from './components/Home';

function App() {

    return (
        //挂载Home组件
        <Home></Home>
    );
}

export default App;

绑定数据

在里面定义数据即可

    constructor(){
        super();

        //定义数据
        this.state={
            id:123,
            name:"Tom",
        }
    }

修改render方法

    render(){
        return (
            <div>
                <p>this is Home!</p>
                <p>ID:{this.state.id}</p>
                <p>Name:{this.state.name}</p>
            </div>
        )
    }

浏览页面可以看到页面上已经显示了构造函数里面定义的数据

这里App.js的return方法和Home.js的render方法里面嵌套html的语法叫jsx
jsx语法规定最外的节点个数只能有1个，标签外的注释不能使用花括号，标签内的注释必须使用花括号

    return (
        /*标签外的注释不能使用花括号*/
        /*最外的节点个数只能有1个*/
        <div>
            {/*标签内的注释必须使用花括号*/}
            <Home></Home>
            <Home></Home>
        </div>
    );

部分绑定数据需要注意的点：
html标签的属性值不用加花括号，直接绑定即可
html标签的class要改成className，标签label的for改成htmlFor，
style也要调整，
完整实例如下：

<p title="this.state.name" className="p1" style={{'color':'blue'}}>Name:{this.state.name}</p>
<label htmlFor="theInput"></lable>