Express & Prisma【１５React GetUsers】

Express & Prisma【１５React GetUsers】

YouTube: https://youtu.be/9LQdeU6b6-A

App.tsx

import { useState, useEffect } from 'react';
import axios from 'axios';
import Table from 'react-bootstrap/Table';
import { User } from './types/user';

import './App.css';

function App() {
  const [users, setUsers] = useState<User[]>([])

  useEffect(() => {
    (async () => {
      const res = await axios.get(`http://localhost:4000/api/users`)
      // console.log(res.data);
      setUsers(res.data)
    })()
  }, [])

  return (
    <div className='container py-3'>
      <h2 className='text-center'>User List</h2>
      <Table striped bordered hover variant="dark">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {
            users?.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.email}</td>
            </tr>
            ))
          }
        </tbody>
      </Table>
    </div>
  );
}

export default App;

user.ts

export type User = {
  id: number
  name: string
  email: string
}