{"id":340,"date":"2022-06-17T17:21:32","date_gmt":"2022-06-17T08:21:32","guid":{"rendered":"https:\/\/www.kd2.jp\/memo3\/?p=340"},"modified":"2022-06-18T07:29:11","modified_gmt":"2022-06-17T22:29:11","slug":"react%e3%81%a7hello-world","status":"publish","type":"post","link":"https:\/\/www.kd2.jp\/memo3\/?p=340","title":{"rendered":"React\u3067Hello World"},"content":{"rendered":"

SpringBoot\u3067\u51fa\u529b\u3057\u305fRESTful\u30ec\u30b9\u30dd\u30f3\u30b9\u3092React\u3067\u53d6\u5f97\u3057\u3066\u8868\u793a\u3059\u308b\u3002
\nRESTfull API \u304b\u3089 Hello World \u3092\u53d6\u5f97\u3057\u3066\u8868\u793a\u3059\u308b\u3002<\/a><\/p>\n

 <\/p>\n

SpringBoot\u5074\u306bCORS\u5bfe\u7b56\u00a0 (CORS : \u30aa\u30ea\u30b8\u30f3\u9593\u30ea\u30bd\u30fc\u30b9\u5171\u6709 \/ Cross-Origin Resource Sharing)
\nlocalhost\u3067\u30c6\u30b9\u30c8\u3059\u308b\u304c\u3001\u30c9\u30e1\u30a4\u30f3\u3001\u30d7\u30ed\u30c8\u30b3\u30eb\u3001\u30dd\u30fc\u30c8\u756a\u53f7\u306e\u3046\u3061\u30dd\u30fc\u30c8\u756a\u53f7\u304c\u7570\u306a\u308b\u306e\u3067(8080\u30683000)\u3001CORS\u5bfe\u7b56\u304c\u5fc5\u8981\u3068\u306a\u308b\u3002<\/p>\n

 <\/p>\n

SpringBoot\u5074\u306eRestController\u306e\u30af\u30e9\u30b9\u306b@CrossOrigin\u30a2\u30ce\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u3051\u308b\u3002<\/p>\n

\n
package com.example.RestfulTest;\r\n\r\nimport org.springframework.web.bind.annotation.CrossOrigin;\r\nimport org.springframework.web.bind.annotation.GetMapping;\r\nimport org.springframework.web.bind.annotation.RestController;\r\n\r\n@RestController\r\n@CrossOrigin\r\npublic class HelloController {\r\n    @GetMapping(\"\/hello\")\r\n    public Hello hello() {\r\n        return new Hello();\r\n    }\r\n}<\/pre>\n<\/div>\n
\u74b0\u5883\u306e\u69cb\u7bc9\r\nnpx create-react-app hello-world\r\n\r\n<\/code>App.js<\/pre>\n
\n
import '.\/App.css';\r\nimport HelloWorld from '.\/HelloWorld';\r\n\r\nfunction App() {\r\n  return (\r\n    <div className=\"App\">\r\n      <HelloWorld \/>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n<\/div>\n
HelloWorld.js<\/p>\n
\n
import React from 'react'\r\n\r\nclass HelloWorld extends React.Component {\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = { hello: \"\" };\r\n        this.buttonClick1 = this.buttonClick1.bind(this);\r\n    }\r\n\r\n    \/\/ \u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u3068\u547c\u3070\u308c\u308b\u95a2\u6570\u3002\r\n    buttonClick1() {\r\n        fetch(\"http:\/\/localhost:8080\/hello\",\r\n            { method:'GET' }\r\n        )\r\n        .then(response => response.json())  \/\/ \u30ec\u30b9\u30dd\u30f3\u30b9\u304b\u3089JSON\u3092\u53d6\u308a\u51fa\u3059\u3002\r\n        .then(\r\n            (responseJSON) =>  {\r\n                this.setState({ hello: responseJSON.hello }) \/\/ JSON\u304b\u3089\u300chello\u300d\u306e\u30ad\u30fc\u3092\u53d6\u308a\u51fa\u3059\u3002\r\n            },\r\n            (error) => {\r\n                console.log(error);\r\n            }\r\n        )\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <button onClick={this.buttonClick1}>Click!<\/button>\r\n                {this.state.hello}\r\n            <\/div>\r\n        );\r\n    }\r\n}\r\n\r\nexport default HelloWorld;<\/pre>\n<\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
SpringBoot\u3067\u51fa\u529b\u3057\u305fRESTful\u30ec\u30b9\u30dd\u30f3\u30b9\u3092React\u3067\u53d6\u5f97\u3057\u3066\u8868\u793a\u3059\u308b\u3002 RESTfull API \u304b\u3089 Hello World \u3092\u53d6\u5f97\u3057\u3066\u8868\u793a\u3059\u308b\u3002   SpringBoot\u5074\u306bCORS\u5bfe\u7b56\u00a0 … \u7d9a\u304d\u3092\u8aad\u3080 React\u3067Hello World<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"_links":{"self":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/340"}],"collection":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=340"}],"version-history":[{"count":10,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/340\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=\/wp\/v2\/posts\/340\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kd2.jp\/memo3\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}