以下內容、範例來自React - 官方文件

React 開發的應用都是由元件組成，元件可以有自己的邏輯、外觀，小至一顆按鈕，大至整個頁面都可以作為一個元件。

關於元件

React 元件是一個回傳 markup 的 JS 函式

例如：

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

在其他元件中使用 MyButton

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

• React 元件名稱首字必須為大寫字母 (MyButton)
• HTML 標籤使用全小(button)
• React 在元件中使用 export default 做匯出

React 使用的 markup 語法為 JSX (JSX 比 HTML 再嚴謹一些)

• 必須使用結尾標籤，像是 <br />
• 元件只能 Return 一個 JSX
• 必須在同一個 Parent 底下，像是最外層用 <div>...</div> 或是 <>...</> 包起來

在 React 元件中使用 className 來指定 CSS 樣式，作用和 HTML 使用 class 屬性一樣。在 JSX 中可使用 {}來嵌入程式碼的變數，用在資料或是屬性上都可以。

例如：

export default function User() {
    return (
        <section>
            <h1>
                {user.name}
            </h1>
            <img
                className="avatar"
                src={user.imageUrl}
            />
        </section>
    );
}

React 條件判斷式就和寫 JavaScript 一樣，利用 if 決定 JSX 的內容

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

或是直接將 if 寫在 JSX 中

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

也一樣可以利用 for loop 或是 map() 來渲染列表元件

例如：透過 map 函式將 products 陣列的內容轉換成 <li>

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

在元件中宣告事件處理器

function MyButton() {
  // 負責 click 事件
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

＊onClick={handleClick}，結尾沒有括號！只需要傳入函式，沒有要執行！

使用 state 讓元件可以暫存一些資訊，例如：點擊按鈕的次數

import { useState } from 'react';

function MyButton() {
  // 宣告一個 state 變數
  const [count, setCount] = useState(0);

透過 useState 可以得到 目前的狀態值 count 以及用來更新的函式 setCount
每一個元件都有自己的 state，即使渲染多個相同的元件也不會相互影響！

使用{}傳遞 props 資料給子元件

MyApp 將 state 以及 click handler 傳給每一個 MyButton 元件

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

MyButton 讀取 props

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

小結

React - Learn 每一個單元最後會有Recap、Challenges 的部分，對學習蠻有幫助的，感覺得出來官方的用心 (?)