基本規則

1. 返回單一根元素

React 要求每個組件必須返回一個單一的根元素，這意味著如果你想要返回多個元素，必須用一個父元素（如 <div>）包住它們，或使用 React.Fragment (<> </>)。

// React.Fragment 的簡寫形式
<>
  <h1>標題</h1>
  <p>段落內容</p>
</>
// 完整形式
<React.Fragment>
  <h1>標題</h1>
  <p>段落內容</p>
</React.Fragment>

2.關閉所有標籤，明確關閉所有標籤

例如HTML的<img> 或 <input> 需變成<img /> 和 <input/>

3. 駝峰命名法

HTML 屬性如 class 和 for 在 JSX 中被替換為 className 和 htmlFor。同樣的，類似 stroke-width 這樣有破折號的屬性，應使用駝峰命名法，如 strokeWidth。

這樣不僅可以保持文章結構的清晰，還能加深讀者對於每個規則的理解。

4. 組件首字大寫

再將組件引入到index.jsx中需注意開頭英文必須為大寫如

import Practise from './Practise';

這樣 React 才能正確地識別它是一個自定義組件，而不是原生 HTML 元素(如div input等)。

5. 於return中寫js

於return中寫js，需要使用{}將它框起來

列表渲染

map循環結構，必須加上獨一無二的key，字符串或者number id

key 的作用：

• key 是 React 內部用來追蹤和識別列表項目的一個屬性，它不會被渲染到前端的 DOM 中。
• 唯一識別每個列表項：當 React 渲染一個列表時，它會根據 key 來識別每個項目。如果 key 改變了，React 會知道這個項目已經被修改。但是key並不會自動去渲染畫面需再透過useState重新渲染。
• 提升性能：當列表中的數據發生變化時，React 會通過 key 來判斷哪些元素需要更新、插入或刪除。這樣可以避免不必要的重新渲染，從而提升性能。

於Practise.jsx中寫入

function Practise(){
    const list = [
        { id: 1001, name: '天竺鼠車車', time: '17:00~18:00' },
        { id: 1002, name: '吉伊卡哇', time: '18:00~19:00' },
        { id: 1003, name: '豆豆蟲', time: '19:00~20:00' },
      ]
    return (
        <div>
            <ul>
            {list.map((item) => (
                <li key={item.id}>
                    {item.name} - {item.time}
                </li>
            ))}
            </ul>
        </div>
    )
}
export default Practise;

這就是 React 的優勢之一，讓你可以輕鬆地將 JavaScript 和 HTML 結合，通過 map 方法將 list 的數據渲染到頁面上。

相較於傳統寫法

//創建 ul 元素
const ul = document.createElement('ul');
// 迭代 list 並創建 li 元素
list.map((item) => {
  const li = document.createElement('li');  // 創建 li 元素
  li.textContent = item.name;               // 設定 li 的內容
  ul.appendChild(li);                       // 將 li 添加到 ul 中
});
// 捕抓父元素
const parent = document.getElementById('parentElementId'); // 獲取父元素
// 將 ul 放置於父元素中
parent.appendChild(ul);

傳統的方式需要逐步創建 DOM 節點，然後將它們一個一個插入到頁面中，這樣的過程容易導致代碼冗長，而且在處理更複雜的邏輯時容易出現錯誤。

條件渲染

function Practise(){
    const flag = true
    const articleType = 5
    if(articleType === 0){
        return <div>模式1</div>
    }else if (articleType === 1){
        return <div>模式2</div>
    }else{
        return (
        <div>
            模式3
            {flag && <p> this is span </p>}
            {flag ? <p> flag:true </p> : <p> flag:false </p>}
        </div>)
    }
}
export default Practise;

這很常用於組件的切換，達成特定條件切換組件已達到SPA的效果。

邏輯符號
{flag && <p> 開門 </p>}
三元運算
{flag ? <p> flag:true </p> : <p> flag:false </p>}

今天就介紹到這