React + SpringBoot でアプリを作成してみた【Daily Devotional App】

1.プロジェクトを作成する

公式：spring initializr

① ブラウザを開き、(https://start.spring.io/) を入力し、開く
② 下記を入力し、Dependenciesで下記を選択し、『GENERATE』ボタンを押す

• Project: Maven

• Language: Java

• SpringBoot: 3.1.1

• jar

• 17

• Group: com.example

• Artifact: springboot_3_daily_devotional

• Name : springboot_3_daily_devotional

• Description: Demo projects for Spring Boot

• Package name: com.example.springboot_3_daily_devotional

Dependencies

• Spring Boot DevTools
• Lombok
• Spring Web
• H2 Database
• Spring Data JPA

2.基本的なデータベースをセットアップする

(1)application.propertiesを編集する

(2)resources/data.sqlを作成する

(3)resources/schema.sqlを作成する

3.パッケージの設定する

(1)src/main/java/com/example/springboot_3_daily_devotionalにmodelパッケージと
Devotinal.javaを作成する

(2)src/main/java/com/example/springboot_3_daily_devotionalにrepositoriesパッケージとDevotinalRepository.javaを作成する

(3)src/main/java/com/example/springboot_3_daily_devotionalにservicesパッケージとDevotionalService.javaを作成する

(4)src/main/java/com/example/springboot_3_daily_devotionalにcontrollersパッケージとDevotionalController.javaを作成する

4.プロジェクトを生成する

(1)Vite.js を使用する

$ cd src/main
$ npm create vite@latest
cd frontend 
npm install

(2)frontend/srcにAppRoot.jsxを作成する

(3)main.jsxを編集する

5.フロントエンドのプロキシの作成する

(1)vite.config.jsを編集する

6. Boostrapを使用する

(1)bootstrapをインストールする

npm install bootstrap --save

(2)index.cssを編集する

参考サイト

Master React & Spring Boot with This Step-By-Step Daily Devotional App Tutorial!