第四天將接著昨日的內容繼續！

第一次接觸React的朋友們可能心裡會os: "X! 這到底是甚麼語法，又像JS但又有HTML包在裡面。"別擔心，今天就要來為大家解惑，讓大家看懂React的語法。

前篇文章中有說過，React 是藉由 JS 產生 HTML ，如果使用原生JS寫法應該很快就會崩潰了吧，例如:

JSX

<a href="https://ithelp.ithome.com.tw">IT邦幫忙首頁</a>

換成原生 JS 需要這樣寫:

React.createElement('a', {href: 'https://ithelp.ithome.com.tw'}, 'IT邦幫忙首頁')

透過一行程式碼可能無法看出差別，但萬一專案變的複雜，父子元件慢慢增多時，原生JS絕對不是一個好的選擇。

這邊可以得出一個小結論:
React 可以用原生JS撰寫，但將會使程式難以閱讀與維護，因此建議使用JSX語法，最後再透過babel等工具轉換為正常JS。

JSX 怎麼寫?

其實如果熟悉HTML與JS的朋友應該可以快速上手JSX語法，HTML的語法基本上在JSX都是通用的，除了幾個比較特殊的地方要額外介紹:

1. HTML 的 class 屬性在 JSX 須寫為 className (class 為 JSX 保留字)

<div className="testClass">Test</div>

2. JSX中所有元素都需要關閉 例如:

<div>content</div> 或 <img /> (self-closing)

3. 事件觸發需使用駝峰式命名，例:

<div onClick={() => console.log('click test'}>Click Me</div>

4. style 屬性要以 JS 物件的格式撰寫，採用駝峰式命名法而非-，單位要用單引號包住 (例: '50%')。外面則要再加上一層大括號。 例：

<p style={{fontSize: '15px',marginTop: '20px'}}>Some text</p>

5. 在JSX中仍然可以撰寫JS，但是需使用大括號包起來 (後面篇章會解說)
6. 函式return需要由一個頂端tag包住內容，直接看以下範例
   以下語法不會出錯

const App = () => {
  return (
    <div className="App">
      This is my first react app!
    </div>
  );
}

以下語法則會報錯(沒有一個最外層包住所有內容的tag)

const App = () => {
  return (
    <p>some text</p>
    <div className="App">
      This is my first react app!
    </div>
  );
}

以上就是 JSX 的基本介紹，雖然JSX需要透過轉譯才能執行，但是create-react-app已經幫我們處理好這些設定了，我們就放心使用JSX語法吧!

Virtual DOM介紹

Virtual DOM，顧名思義，就是虛擬的DOM，以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM，因為直接操作DOM的成本可是非常昂貴的，因此改操作這些物件。最後再將變動的部分更新到真的DOM上，也就是期望達到更動最小數量的DOM，以此提升效能。

而React背後就實作了這個機制，React 希望在頁面資料更動時，能即時重新渲染頁面，讓頁面能呈現最新的資料，提升使用者體驗。但頁面重新渲染的成本可是非常高的，所以才需要 Virtual DOM 的幫忙，資料更動後先重新繪製 Virtual DOM，再與真實的 DOM 進行 Diff演算法比對 ，最後把有變動的部分改動到真實的DOM上，如此就比起直接重新渲染提高了許多效能，也降低了資料與頁面交互更動的複雜度。

上圖清楚呈現React頁面更動的機制，首先當頁面狀態更動後，Virtual DOM 與 真實DOM經過Diff比對後才會將真正變動的部分推上真實的DOM。

今天主要是以講解觀念為主，明天就會開始寫程式啦，也會介紹第一個 React hooks - useState ，明天見!