前面兩節(jié)用的是HBuilder編輯器，很多童鞋說Visual Studio Code很好用，確實(shí)如此，因?yàn)槠綍r(shí)開發(fā)用習(xí)慣了前者，寫教程的時(shí)候，為了方便大家體驗(yàn)，這一節(jié)換成VS了，打開編輯器，首先導(dǎo)入項(xiàng)目，然后在編輯器里面選擇打開終端選項(xiàng)，新建終端，輸入命令使用yarn start或者npm start，運(yùn)行項(xiàng)目。

1：綁定一個(gè)屬性的時(shí)候

直接寫就可以了<div title={this.state.title}>綁定屬性</div>，不需要像平時(shí)寫屬性那樣加雙引號(hào)，加了雙引號(hào)就會(huì)綁定了字符串了。

2：綁定class屬性，class要換成className

打開靜態(tài)資源，asset/css/index.css，寫上css相關(guān)代碼

.test{
  font-size: 40px;;
  color:red;
}

寫好之后，在組建Home.js里面引入index.css，引入方法import '../asset/css/index.css',在render()模板里面使用屬性 className="test"，這個(gè)時(shí)候就可以看到，屬性綁定成功了,同理，現(xiàn)再this.state里面定義，再去模板里面取出也可以。

 <div  className="test">綁定class屬性,我是紅色的大字體</div>
<div  className={this.state.color}>定義紅色的數(shù)據(jù)</div>

3：for要換成htmlFor

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

4：style行內(nèi)樣式

<div style={{"color":'blue'}}>行內(nèi)樣式哦</div>
<div style={this.state.style}>行內(nèi)樣式哦</div>

Home.js

import React, { Component } from 'react';

import '../asset/css/index.css'
class Home extends Component {
    constructor(){
        super();
        //react定義數(shù)據(jù)
        this.state={
            name:'我是一個(gè)組件頁面哦',
            title:'我是一個(gè)title',
            color:'test',
            style:{
                color:'blue',
                fontSize:'80px'
                
            }
        }
    }
    render() {
        return (
        <div> 
        <p>{this.state.name}</p>
        
        {/* 1：class要換成className */}
        <div  className="test">綁定class屬性,我是紅色的大字體</div>
        <div  className={this.state.color}>定義紅色的數(shù)據(jù)</div>
        
        {/* 2:for要換成htmlFor */}
        <label htmlFor="name">姓名</label>
        <input id="name"></input>
        
        {/* 3：style行內(nèi)樣式寫法 */}
        <div style={{"color":'blue'}}>行內(nèi)樣式哦</div>
        <div style={this.state.style}>行內(nèi)樣式哦</div>
        </div>
        )
    }
}
export default Home;