---
# System prepended metadata

title: SpringBootのAPIを、Reactから読み込む
tags: [SpringBoot, React]

---

# SpringBootのAPIを、Reactから読み込む
## SpringBoot（バックエンド側）の設定
1. コントローラークラス外の@RequestMappingで指定したパスにエンドポイントを設定する。
2. コントローラークラス内の@RequestMappingでHTTPリクエストとその種類(GET or POST)を記述する。（今回はGET）
3. @ResponseBodyの下に、レスポンスを記入する。レスポンスに必要な要素は別ファイルから取得しても良い。
4. サーバを起動させてRequestが通っているかを確認する。
## React（フロントエンド側）の設定
1. Appクラス内のcomponentWillMount()に、SpringBootのリクエスト先のURLや、表示するJson形式のデータを記述する。
2. renderにHTML形式での表示を記述する。
3. Reactを起動させて、フロントサーバ（ローカルホスト3000）側でバックエンド側（ローカルホスト8080）のレスポンスを表示できるかを確認する。

###### tags: `SpringBoot`, `React`