在JSX Style不可以有多的個class屬性，像是<div class=’abc’ class={‘def}>這樣就會有錯，若要多個class使用，可以改寫成

import './App.css'
       ... ...
// abc和test為App.css的class
let testclass = "test"
<div>
   <h1 className={"abc " + testclass}>TEST</h1>
</div>

Style (example)表達式，如果存多個屬性，必須使用駝峰式命名 或是 用引號包住，如果style只有單個屬性，則是寫成<div style={{background:'blue'}}>Test</div>，外層的大括號表示JSX語法，內層的大括號則表示物件，跟多個屬性的表達方式意思一樣

let example = {
    background: "skyblue",
    borderBottom: "2px solid red",
    'background-image': 'url(https://fakeimg.pl/300/)',
    width: '300px',
    height: '300px'
}

let color = 'bgRed'
let center = 'App ' //這是來自引入App.js的class，後面有個空格，這樣串接class才有效，否則會連一起
function Clock(props) {
    return (
        <div>
            <h1 className={center + color}>現在時間</h1>
            <strong style={example}>{props.time.toLocaleTimeString()}</strong>
            <div style={example}></div>
        </div >
    )
}

var rc = () => { ReactDOM.render(<Clock time={new Date()} />, document.getElementById('root')) }

setInterval(rc, 1000)

註解：

在JSX裡要寫註解必須在大括號裡做，像是

let example = (
    <div>
      { /*這裡寫註解*/ }
    </div>
)

參考資料：

深入 JSX