AdonisJS + React.JS + MySQLでCRUDを作成していますが、今回の記事では、実施にDBに接続せずにモックを作成していきたいと思います。
SPAと言うわけではありませんが、reactとAdonisJSの共に勉強になります。

この時点での出来上がりは、下記のような動画になります。

AdonisJS + React.JS + MySQLでCRUDを作ってみた 。vol1

AdonisJS + React.JS + MySQLでCRUDを作ってみました。PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたいと考えている方は、ぜひ参照ください。

leben.mobi

2021-02-16 03:46

AdonisJS + React.JS + MySQLでCRUDを作ってみた 。vol3

AdonisJS + React.JS + MySQLでCRUDを作ってみました。PHPのLaravelのようなフルスタックなフレームワークをNode.jsで使いたいと考えている方は、ぜひ参照ください。

leben.mobi

2021-02-23 10:34

AdonisJS

Controller

まず、AdonisJSのコントローラを作成します。

adonis make:controller Customer --type http

app/Controllers/Http/CustomerController.js
コントローラを以下のように修正します。

ルーティング

start/route.js

view

次にビューを作ります。

adonis make:view customer

resources/views/customer.edge

resources/views/customer.edge

ReactJS

React routerのインストール

npm install react-router-dom

app.jsの編集

resources/js/app.js

Components

Nav

resources/js/components/Nav.js

Main

resources/js/components/Main.js

Form

resources/js/components/customer/Form.js

Edit

resources/js/components/customer/Edit.js

List

resources/js/components/customer/List.js

Webpackでビルド

sudo webpack --watch 

今回のソースのgithub ⇨　leben-jp / adnisjs_react_crud