在開始進入React章節前，書中提到JavaScript必備觀念有哪些，於是就想說利用一段小實作來複習一下JS基本功：

以下是透過 jsonplaceholder 網站服務來存取使用者資料並渲染成元件

import React, { useState, useEffect } from 'react';

const UserCards = () => {
  const [users, setUsers] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  // 使用 fetch API 取得使用者資料
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, []);

  // 過濾使用者名稱
  const filteredUsers = users.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      {/* 搜尋輸入框 */}
      <input
        type="text"
        placeholder="搜尋使用者"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      
      {/* 使用 map 方法渲染使用者卡片，並用 slice 限制顯示數量 */}
      <div className="user-cards">
        {filteredUsers.slice(0, 5).map(user => (
          <div key={user.id} className="user-card">
            <h2>{user.name}</h2>
            <p>Email: {user.email}</p>
            <p>Phone: {user.phone}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default UserCards;

• 渲染資料: 使用 Array 陣列 map 方法遍歷 filteredUsers，並以卡片元件顯示，每個卡片包括使用者的名稱、Email 和電話。
• 使用 slice(0, 5) 來限制顯示的卡片數量。
• 使用 filter 方法來檢查每個使用者名稱是否包含搜尋詞，並且將結果儲存在 filteredUsers 中。
• 使用 useEffect 並搭配 async/await 的箭頭函式從 API 得到使用者資料。