認識 React JSX

React 提供了稱作 JSX 的語法，作為 JavaScript extension syntax，JSX 是一種跟 HTML/XML 很相似的語法，用來寫所謂的 React elements (React 元素)。

const jsxItem = <h1>Hello, world!</h1>;

這個語法叫做 JSX，是一個 JavaScript 的語法擴充。 JSX 可能為讓你想到一些樣板語言，但不一樣的地方是 JSX 允許你使用 JavaScript 所有的功能。 <h1>Hello, world!</h1> 這一段 code 就是所謂的 JSX，注意它不是字串喔 (前後沒有引號包著)，而 jsxItem 這個變數的值則是一個 React element，你可以把 JSX 想像成是 JavaScript 的 HTML DOM literal 表示法，這樣你就會更好理解 JSX 了！

JSX 的特性與優點

React 擁抱了 render 邏輯從根本上就得跟其他 UI 邏輯綁在一起的事實：

事件要怎麼處理？
隨著時間經過 state 會如何變化？以及要怎麼將資料準備好用於顯示？

與其刻意的將技術拆開，把標籤語法跟邏輯拆放於不同檔案之中，React 關注點分離的方法是將其拆分為很多同時包含 UI 與邏輯的 component，而彼此之間很少互相依賴。

React 並不要求使用 JSX，但大部分人覺得在 JavaScript 程式碼中撰寫使用者介面的同時，這是一個很好的視覺輔助。這也允許 React 顯示更有用的錯誤及警告訊息。

好，說完這個了，讓我們開始吧！

首先來測試看看 JSX 到底多麽如何撰寫，使用宣告變數以及解構物件來進行撰寫練習，JSX 裡頭可以用 {} 大括號來取得變數的數值

<div id="root">
  <!-- 這個 div 的內容將由 React 處理 -->
</div>

const user = {
  firstName: "Michael",
  lastName: "Luo",
  description: "前端工程師",
};

// 練習區塊ㄧ
function formatName() {
  const { firstName, lastName, description } = user;
  return `${firstName} ${lastName} 是一位 ${description}`;
}
// 區塊結束

// 練習區塊二
const element = <h1>{formatName(user)}</h1>;
// 區塊結束

// react 綁定 html 元素來做 render 顯示
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);