react繫結屬性

/*
react繫結屬性注意：

    class要換成className

    for要換成 htmlFor

    style:

           <div style={{"color":'red'}}>我是一個紅的的 div  行內樣式</div>


    其他的屬性和以前寫法是一樣的

*/    

//元件名稱首字母大寫、元件類名稱首字母大寫
class Home extends React.Component{
// 子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。這是因為子類沒有自己的this物件，而是繼承父類的this物件，然後對其進行加工。如果不呼叫super方法，子類就得不到this物件
 

    constructor(props){
        super(props);   //固定寫法

        this.state={

            msg:'我是一個home元件',
            title:'我是一個title',
            color:'red',
            style:{

                color:'red',
                fontSize:'40px'
            }
        }
    }
    render(){
        return
 
(
            <div> //所有的模板要被一個根節點div包含起來
                <h2>{this.state.msg}</h2>

                <div title="1111">我是一個div</div>

                <br />
                <div title={this.state.title}>我是一個div</div>

                <br />

                <div id="
 
box" className='red'>我是一個紅的的div---id</div>


                 <br />

                <div className={this.state.color}>我是一個紅的的div  1111</div>

                <br />

                <label htmlFor="name">姓名</label>

                <input id="name"  />


                 <br />
                 <br />
                 <div style={{"color":'red'}}>我是一個紅的的 div  行內樣式</div>


                 <br />
                 <br />
                 <div style={this.state.style}>我是一個紅的的 div  行內樣式</div>
         
            </div>
        )

    }    
}
export default Home;