Laravelで作成したAPIをフロントエンドで受け取り画面へ描画する

前提

今回はaxiosを利用して下記URLで作成した一覧取得のapiを受け取って表示するまでを行います。
LaravelでAPIを作成

axiosとは...
バックエンドとのデータのやり取りを簡単にできるライブラリです。

下記コマンドで取得するAPIのパスを確認する

php artisan route:list

axiosを利用してみる

tsxファイルに下記を記述する。

import React, { useEffect, useState } from "react"
import axios from "axios"

# 型を定義する
type Hoge = {
  id: number
  hoge: string
  fuga: boolean
  created_at: Date
  updated_at: Date
}

const HogePage: React.VFC = () => {
  const [hoges, setHoges] = useState<Hoge[]>([])

  # 確認したAPIを叩いて、データを取得する
  const getHoges = async () =>  {
    const { data } = await axios.get<Hoge[]>('api/hoges')
    console.log(data)
    setHoges(data)
  }

  # ページにアクセスしたら実行する
  useEffect(() => {
    getHoges
  })
}

return (
<>
  <div clasName="inner">
    # 取得したデータを描画する
    <ul className="hoge-list">
      {hoges.map(hoge => (
        <li key={hoge.id}>
          <label className="checkbox-label">
            <input type="checkbox" className="checkbox-input" />
          </label>
          <div><span>{hoge.title}</span</div>
        </li>
      )) }
    </ul>
  </div>
<>

下記の記事のようにreactRouterのルーティングになっている前提でlocalhost:8000//hogesへアクセスすると...
Laravelで作成した投稿一覧APIを取得して画面に描画することができました！

Laravel環境でreactRouterのルーティングを使用できるようにする