<div id="root">
</div>
console.clear()

const App = () => {
  const [ users, setUsers ] = React.useState([]);
  
  const getData = async () => {
    // 有時候會發生 CORS,只需要重新整理即可
    const { data } = await axios.get('https://randomuser.me/api/?results=10');
    setUsers(data.results);
  }
  
  React.useEffect(() => {
    getData()
  }, []);
  
  return (
    <div>
      <ul>
        {
          users.map((user) => (
            <li key={user.email}>
              { user.name.first + user.name.last }
            </li>
          ))
        }
      </ul>
    </div>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com
  2. https://unpkg.com/react@18/umd/react.development.js
  3. https://unpkg.com/react-dom@18/umd/react-dom.development.js
  4. https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js