React.js + Spring Boot

こんばんは。React.js + Spring Bootが流行っているという噂を聞いたので試しに触ってみます。

参考サイト：spring.io

準備

まずはSpring InitializrでMaven、Javaプロジェクトを選択し、Dependenciesに「Rest Repositories」「Thymeleaf」「JPA」「H2」「Lombok」を選択します。

ダウンロードしたZIPファイルを展開してEclipseのworkspaceに配置し、Eclipse上から既存のMavenプロジェクトとしてインポートします。インポートするとこんな感じ。

データ定義Employee.java

EmployeeRepository.java

データ初期設定DatabaseLoader.java

あとapi用にpathを切ります。

コマンドプロンプト用のmvnw.cmdがあるのでコマンドプロンプトで「mvnw.cmd spring-boot:run」を実行します。

ずらずらっと流れて起動します。

RestClientで確認します。GET http://localhost:8080/api

employees配下にデータがあるようなのでGET  http://localhost:8080/api/employees

初期設定したデータが取得できました。

次はPOST http://localhost:8080/api/employees

確認します。GET http://localhost:8080/api/employees

データが登録されていることが確認できます。

これでバックエンド側の処理が作成できました。

React.jsのフロントエンド

Controllerは通常通り、Thymeleafでやるときと同じ。

HTMLはwebpackで生成されるbuilt/bundle.jsを呼ぶようにしておく。

pom.xmlに赤枠の内容を追加。

上記の設定でnpmが利くようになるのでnpm initで作成しても良いのだが、package.jsonを適当に作成（プロジェクトのルートフォルダ）

webpackの詳しい説明はこちら。これで先ほどのbuilt/bundle.jsを作成する。

webpack.config.js

ここでやっとreactの記述

src/main/js/app.js

始めの2行はreactのメインライブラリの呼び出し。3行目は今回の表示用rest apiをうまく扱うjs。reactと関係ないので省略。

componentDidMount()は、ReactがDOM内のコンポーネントをレンダリングした後用のAPI。ここではGET /api/employeesのデータ取得。

render()は、画面上にコンポーネントを描画するAPI。

EmployeeList、Employeeをさらに定義。親子関係が綺麗に定義されているのがわかる。

最後にid=reactを指定する。

コマンドプロンプトから先ほどと同様にmvnw spring-boot:runを実行して、http://localhost:8080/にアクセスすると

参考サイトのチュートリアルは続くのですが長くなりそうなので次回へ。

おわりに

今日はReact.js + Spring Bootのアプリケーションを動かしてみました。React.jsがシンプルで理解しやすい記述方法で使用できるのが印象的でした。