ReactでHello World

SpringBootで出力したRESTfulレスポンスをReactで取得して表示する。
RESTfull API から Hello World を取得して表示する。

 

SpringBoot側にCORS対策  (CORS : オリジン間リソース共有 / Cross-Origin Resource Sharing)
localhostでテストするが、ドメイン、プロトコル、ポート番号のうちポート番号が異なるので(8080と3000)、CORS対策が必要となる。

 

SpringBoot側のRestControllerのクラスに@CrossOriginアノテーションをつける。

package com.example.RestfulTest;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
public class HelloController {
    @GetMapping("/hello")
    public Hello hello() {
        return new Hello();
    }
}
環境の構築
npx create-react-app hello-world

App.js
import './App.css';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

HelloWorld.js

import React from 'react'

class HelloWorld extends React.Component {

    constructor(props) {
        super(props);
        this.state = { hello: "" };
        this.buttonClick1 = this.buttonClick1.bind(this);
    }

    // ボタンがクリックされると呼ばれる関数。
    buttonClick1() {
        fetch("http://localhost:8080/hello",
            { method:'GET' }
        )
        .then(response => response.json())  // レスポンスからJSONを取り出す。
        .then(
            (responseJSON) =>  {
                this.setState({ hello: responseJSON.hello }) // JSONから「hello」のキーを取り出す。
            },
            (error) => {
                console.log(error);
            }
        )
    }

    render() {
        return (
            <div>
                <button onClick={this.buttonClick1}>Click!</button>
                {this.state.hello}
            </div>
        );
    }
}

export default HelloWorld;

 

投稿日: