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

## Reactでチュートリアルを実施する
成果物の完成イメージ

![スクリーンショット 2022-05-26 19.41.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/78a45313-98f7-b79e-2e4f-5488cdd8bc3d.png)

```shell:環境情報
React: 18.1.0
node:16.14.2
```

```shell:ディレクトリ構成
~/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
```

```json: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"
  }
}

```

### 実装
```shell:テンプレートを作成する。
yarn react react-app user-management --template typescript
```

```shell: ディレクトリ構成
~/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
```

```typescript: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;
```

```typescript:api.ts
import axios from "axios"

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

```

```typescript:types.ts
export interface User {
    user_id: number
    name : string
    gender: string
}
```

```typescript: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の作成/実行
```json:db.json
{
    "users":[
        {
            "user_id":123,
            "name":"kkfactory01",
            "gender":"men"
        },
        {
            "user_id":234,
            "name":"kkfactory02",
            "gender":"women"
        }
    ]
}
```

```shell:実行コマンド
npx json-server --watch db.json --port 3030
```
3030番ポートでAPIサーバを立てる。

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