在Day01的hello範例我們可以這樣寫

const element = <h1>Hello, world!</h1>
root.render(element )

=後面直接放元素感覺會出現紅色小蚯蚓(錯誤)，這個就是JXS，是一個 JavaScript 的語法擴充，讓我們在寫React時可以在視覺上更清楚明瞭。

JXS有幾個重點規定:

1. 外層只能有一個根元件

   同時想要選染兩個div用下面的寫法會出現錯誤

   const el = <div>第一個div內容</div><div>第一個div內容</div>
   

   可以用一個container包住兩個元素解決這個問題

   const el = <div><div>第一個div內容</div><div>第一個div內容</div></div>
   //或是使用fragment的簡寫，減少多出的container
   const el = <><div>第一個div內容</div><div>第一個div內容</div></>
   

2. HTML裡可以傳遞屬性

   可以利用{}寫入JS

   const imgUrl = "https://test.com/test-img=10";
   <img src={imgUrl} />
   

3. className取代class屬性

   root.render(
   	<h1 className="headline">Hello, world!</h1>
   )
   

4. 原生屬性名稱要用駝峰法命名

   root.render(
   	<button onClick={handleClisk}>click</button>
   )