前回の記事で、Laradockを使用して、docker上にlaravelの仮想環境を構築しました。

LaradockでLaravel環境を構築する

今回は、その環境を利用して、React.JS + Laravel 8 + MySQL + API RESTでCRUDを作成してみたいと思います。

Laravelプロジェクトの作成

前回の記事に沿っている方はすでに作成していますが、まず、LaravelプロジェクトをComposerでインストールします。

laravel/uiのインストール

次にlaravel/uiをインストールします。laravel/uiをインストールすると、artisan uiコマンドが使えるようになります。これはフロントエンド開発を行うためのテンプレートです。

Reactのインストール

次にReact.jsをインストールします。

npm install && npm run devの実行

インストールのメッセージにしたがって、npm install && npm run devのコマンドを実行します。
(rootでやると失敗します。)

TOP画面の作成

コントローラの作成

$ php artisan make:controller EmployeeController 

ルーティング

routes/api.php

React routerのインストール

npm install react-router-dom

Navi

resources/js/components/Nav.js

Main

resources/js/components/Main.js

Form

resources/js/components/employee/Form.js

Edit

resources/js/components/employee/Edit.js

List

resources/js/components/employee/List.js

resources/js/app.jsの編集

ここまで、終わったらnpm run devしてみてください。

上記のような画面が表示されれば、ここまではうまくいっています。
次の記事では、モデルの作成とマイグレーションを行います。

=>React.JS + Laravel 8 + MySQL + API REST でCRUDを作ってみた vol 2

=>React.JS + Laravel 8 + MySQL + API REST でCRUDを作ってみた vol 3