React-[入門篇]- JSX聲明式語法

我們可以了解元件是組成使用者UI介面的一部分：

因此，每一個元件都有自己的資料/邏輯/外觀：

在上面單一元件的圖片中，專注在紅色區塊的"appearance"，這就跟JSX有很大的關係！

什麼是JSX？

JSX是描述元件外觀和工作模式的聲明性語法：

• 元件必須返回一個JSX的區塊
• JSX是JS語法的擴展，允許我們將JavaScript、CSS和React元件嵌入HTML中(瀏覽器不懂JSX，會需要透過babel工具來編譯)
• 每個JSX元素都轉換為一個React.createElement函式調用
• 我們可以在React中不使用JSX
  
  （圖片取自：udemy- Jonas-The Ultimate React Course）

但如上圖所示，我們當然可以不寫JSX，但是仔細看程式碼，如果全部都調用React.createElement函式，真的很不好閱讀，通常我們寫元件都會return JSX 區塊，透過babel編譯

（圖片取自：udemy- Jonas-The Ultimate React Course）

在React中，我們會利用JSX聲明式語法來告訴React我們想要在螢幕上看到什麼

補充：

Imperative (命令式):

• Imperative編程風格關注的是如何完成一個任務，通過指定具體的指令和步驟來達到目標。
• 它需要明確地指定每個操作的執行順序，通常包括控制結構（如if語句、for循環等）和改變狀態的操作。
• 典型的示例是使用命令式風格編寫的傳統的JavaScript或其他編程語言。

  function findElement(arr, target) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      return i;
    }
  }
  return -1;
  }
  

Declarative (聲明式):

• Declarative編程風格關注的是描述期望的結果，而不是指定具體的執行步驟。
• 它更加抽象，通常使用高級函數、配置文件或特定語法來定義所需的操作。
• Declarative編程風格使得代碼更容易閱讀、理解和維護，因為它隱藏了實現細節，只需要關心目標。
• React和SQL等領域中的某些語言和庫，以及許多界面和數據處理框架，都使用了聲明式編程風格

  function findElement(arr, target) {
  return arr.indexOf(target);
  }
  

命令式版本需要明確地定義循環和條件，而聲明式版本只需一行代碼就能達到相同的目標，這是一個簡單的比較，但它展示了這兩種風格之間的差異。聲明式編程風格通常更具可讀性和維護性，因為它專注於"做什麼"而不是"怎麼做"