1. code

import React, { useState } from 'react';

//生成隨機顏色的函數
function getRandomColor() {
  const letters = '0123456789ABCDEF'; 
  //創建16進制顏色代碼有效字符
  let color = '#';  
  //創建一個字符串color將其初始化為#(這是16進制顏色值的前綴)
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
//在每次循環中，letters會隨機選擇一個字符將他添加到color中;Math.random()生成一個介於0和1之間的隨機小數並乘以16後，Math.floor()將結果向下取整數，進而得到一個介於0~15之間的隨機整數

function ColorChanger() {
  const [backgroundColor, setBackgroundColor] = useState('#FFFFFF');
//使用useState hook來創建一個名叫backgroundColor的狀態變量;初始值為白色(#FFFFFF)
//點擊按鈕時事件處理的函數
  const handleClick = () => {
    const newColor = getRandomColor();//生成一個新的隨機顏色
    setBackgroundColor(newColor);
    //使用setBackgroundColor函數更新backgroundColor的數值
  };
  
  return (
    <div>
      <button
        type="button"
        style={{ backgroundColor: backgroundColor }}
        onClick={handleClick}
      >
        Change Color
      </button>
    </div>
  );
}

export default ColorChanger;

2.結果