Reactのチュートリアルを実施する。(API)

Reactでチュートリアルを実施する

成果物の完成イメージ

環境情報

React: 18.1.0
node:16.14.2

ディレクトリ構成

~/develop/react/todos/user-management $ tree -I node_modules 
.
├── README.md
├── db.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── components
│   │   ├── api.ts
│   │   └── types.ts
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   └── react-app-env.d.ts
├── tsconfig.json
└── yarn.lock

3 directories, 18 files

package.json

{
  "name": "user-management",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "ulid": "^2.3.0",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "jsonserver": "^0.1.6"
  }
}

実装

テンプレートを作成する。

yarn react react-app user-management --template typescript

ディレクトリ構成

~/develop/react/todos/user-management $ tree src 
src
├── App.tsx
├── components
│   ├── api.ts
│   └── types.ts
├── index.css
├── index.tsx
├── logo.svg
└── react-app-env.d.ts

1 directory, 7 files

App.tsx

import { useEffect, useState } from "react"
import { User } from "./components/types"
import { getUsers } from "./components/api"

function App() {
    const [userList, setUserList] = useState([])
    useEffect(()=>{
      const fetchData = async () =>{
        const response = await getUsers()
        setUserList(response.data)
      }
      fetchData()
    },[])
    return (
      <>
        <h1>User一覧</h1>
        <ul>
          {userList.map((todo: User)=>(
            <li key={todo.user_id}>{todo.name}: {todo.gender}</li>
          ))}
        </ul>
      </>
    );
}

export default App;

api.ts

import axios from "axios"

export const getUsers = async () =>{
    const response = await axios.get(
        "http://localhost:3030/users"
    )
    return response
}

types.ts

export interface User {
    user_id: number
    name : string
    gender: string
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

json-serverの作成/実行

db.json

{
    "users":[
        {
            "user_id":123,
            "name":"kkfactory01",
            "gender":"men"
        },
        {
            "user_id":234,
            "name":"kkfactory02",
            "gender":"women"
        }
    ]
}

実行コマンド

npx json-server --watch db.json --port 3030

3030番ポートでAPIサーバを立てる。

localhost:3000でブラウザで開くと立ち上がります。