* 屬性

JSX的特性更接近JavaScript而不是HTML，所以在React DOM 使用camelCase小駝峰來命名，
用這方始來定義屬性名稱，而不是使用HTML的屬性名稱
例如:
class改為className
for 改為 htmlFor

class HelloWorld extends React.Component {
    render() {
        return (
            <div className="text">Hello World!</div>
        )
    }
}

* 樣式

最外層的{}是JSX語法，內層為JavaScript物件，而屬性與一般命名方式不同，為駝峰命名：
<HelloWorld style={{ color: '#FFFFFF',fontSize: '24px'}} />

* 事件處理

在JSX中透過inline事件綁定來監聽處理事件，也是駝峰式命名:
<HelloWorld onClick={this.handleClick} />

* 撰寫風格

1. 當一般字串值當成屬性值時，字串使用雙括號""刮住，等號=和屬性之間不需要加空格。
   <HelloWorld text="hi" />
2. 當花括號{}作為屬性值時，不需要加上雙引號""，同樣地，等號和屬性之間不需要加空格。
   <HelloWorld text={hi} />
3. 多個屬性值時盡量使用多行(換行)的風格，否則太長難以閱讀。

<HelloWorld 
    style={{ color: '#FFFFFF',fontSize: '24px'}}
    onClick={this.handleClick}
    className="title"
/>

4. 當字串與物件相遇，透過``符號來組合字串和物件
5. {}裡面還可以塞什麼? 可以塞三運算式。
   <HelloWorld className={isNumber ? 'colorBlue' : 'colorRed' } />

看到這裡可以回頭看第25篇"React 快速建置開發環境與開發工具介紹" 中提到的ESLint套件，對於剛接觸JSX有極大的幫助，可以針對JSX語法撰寫格式做檢查。