Zenn
📝

LaravelでAPIを作成してReactから叩く

2024/03/04に公開
Laravel
PHP
React
API
#
memo
tech

GitHub リポジトリ

https://github.com/ENDOTAKUMI/sample-app

プロジェクトの構成

sample-app/
├── backend/
└── frontend/

インストール

Laravelのインストール

sample-appディレクトリで下記のコマンドを実行します

curl -s "https://laravel.build/backend" | bash

cd backend
./vendor/bin/sail up -d

✅ ブラウザで下記の画面が表示できればOK

http://localhost/

Reactのインストール

sample-appディレクトリで下記のコマンドを実行します

npx create-react-app frontend

cd frontend/
npm start

✅ ブラウザで下記の画面が表示できればOK

http://localhost:3000/

実装

APIの作成

backendディレクトリで下記のコマンドを実行します

./vendor/bin/sail php artisan make:controller ExampleListController
backend/app/Http/Controllers/ExampleListController.php
<?php

namespace App\Http\Controllers;

class ExampleListController extends Controller
{
    public function index()
    {
        return response()->json(
            [
                'content' => [
                    [
                        'id' => 1,
                        'name' => 'Example 1'
                    ],
                    [
                        'id' => 2,
                        'name' => 'Example 2'
                    ],

                ],
            ],
            200,
            [],
            JSON_UNESCAPED_UNICODE
        );
    }
}
backend/routes/api.php
<?php

use App\Http\Controllers\ExampleListController;
use Illuminate\Support\Facades\Route;

Route::get('/example-list', [ExampleListController::class, 'index']);

✅ ブラウザで下記の画面が表示できればOK

http://localhost/api/example-list

ReactからAPIを叩いて表示する

frontendディレクトリで下記のコマンドを実行します

npm install axios
frontend/src/App.js
import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [value, setValue] = useState([]);

  const API_URL = "http://localhost/api/example-list";

  useEffect(() => {
    (async () => {
      try {
        const res = await axios.get(API_URL);
        setValue(res.data.content);
        return;
      } catch (e) {
        return e;
      }
    })();
  }, []);

  return (
    <div className="App">
      {value.map((content) => {
        return (
          <div key={content.id}>
            <h1>{content.name}</h1>
          </div>
        );
      })}
    </div>
  );
};

export default App;

✅ ブラウザで下記の画面が表示できればOK

http://localhost:3000/

Discussion