Laravel10 | React連携のCRUDサンプル(REST API版)

Laravel

Reactのシンプルなサンプルをまとめているサイトはたくさんあるのですが、自分の環境に合っていない部分もあり、覚書のために本記事にまとめました。

本記事をまとめるにあたって、こちらの記事を参考にさせていただきました。
たいへん分かりやすくまとまっていて、こちらのサイトの情報だけでも完全に環境を構築することが出来ると思います。

Laravelで REST API を実装し Reactと連携したCRUDアプリ作成
https://qiita.com/masakichi_eng/items/af50d9a3e6a975b601e6

Laravel側

API作成

モデルとマイグレーションの作成

作成されたProductモデルに追記します。

app/Models/Product.php

マイグレーションファイルを追記します。

database/migrations/xxxx_xx_xx_xxxxxx_create_products_table.php

マイグレーション実行

コントローラーの作成

いったん、コントローラーを作成し、実装は後ほど追記していきます。

ルーティング設定

ルーティング確認

コントローラーの実装

フォームリクエストバリデーション作成

確認

curlコマンドでAPIを確認してみます。

新規作成

すべてのレコードを確認

ブラウザで確認した場合には、このようにデータが表示されます。

React側

React

Appコンポーネントを以下の記述に変更

実行結果

下記の画面のように、一覧表示、登録ができる画面が表示されます。

参考サイト

手順はこちらの記事を参考にさせていただきました。

Laravelで REST API を実装し Reactと連携したCRUDアプリ作成
https://qiita.com/masakichi_eng/items/af50d9a3e6a975b601e6

おススメ商品

タイトルとURLをコピーしました