Create component to list Users

src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import { UsersList } from "./components/UsersList";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
           Learn React
         </a>
       </header>
+      <UsersList />
     </div>
   );
 }

src/components/UsersList/UsersList.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+
+type User = {
+  id: string;
+  fullName: string;
+  email: string;
+  username: string;
+};
+
+const UsersList = () => {
+  const [loading, setLoading] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+  useEffect(() => {
+    const loadUsers = async () => {
+      setLoading(true);
+      const data = await fetch("http://127.0.0.1:3001/users");
+      setUsers(data);
+    };
+
+    loadUsers();
+  });
+
+  if (loading) return <h1>Loading</h1>;
+
+  return (
+    <ul>
+      {users.map(user => (
+        <li>{user.fullName}</li>
+      ))}
+    </ul>
+  );
+};
+
+export { UsersList };

src/components/UsersList/index.ts

@@ -0,0 +1 @@
+export * from "./UsersList";