【03】React中JSX語法

jsx特色：
a、jsx能夠直接建立組件，直接寫組件的html
b、有且僅有一個父級
c、添加class名時，由class變爲 className
d、label標籤 裏的for 屬性變爲 htmlFor
e、表達式 { } ，寫變量
f、循環能夠直接寫在{ } 裏面，徹底是js的形式寫法

jsxStudy.js

//引入 react
import React,{Component} from 'react';
//建立組件
class JsxStudy extends Component{
    constructor(...props){
        super(...props)
        this.str = '夢中不知歲已老，朦朧人間誰登高。'
        this.numbers = [10,20,30]
    }
    //有且僅有一個父級
    render(){
        return(
            <div>
                {/*添加class名時，由class變爲className*/}
                <p className="active">風飄飄，雪遙遙。</p>
                {/*變量寫在 {} 裏*/}
                <p>{this.str}</p>
                {/*label標籤 裏的for 屬性變爲 htmlFor*/}
                <label htmlFor="aaa">點我也能選中</label>
                <input type="checkbox" id="aaa"  />
                {/*循環能夠直接寫在{ }裏面，徹底是js的形式寫法*/}
                <ul>
                    {
                        this.numbers.map((val)=>{
                            return <li key={val}>{val}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
//導出組件
export default JsxStudy;

 

效果：