{"id":1539,"date":"2017-04-13T11:39:20","date_gmt":"2017-04-13T02:39:20","guid":{"rendered":"http:\/\/lovelinux.mydns.jp\/?p=1539"},"modified":"2018-03-19T18:08:18","modified_gmt":"2018-03-19T09:08:18","slug":"reactjs%e3%81%93%e3%81%a8%e3%81%af%e3%81%98%e3%82%81-2","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1539","title":{"rendered":"ReactJS\u3053\u3068\u306f\u3058\u3081"},"content":{"rendered":"<p>\u305a\u3063\u3068\u524d\u304b\u3089\u306f\u3084\u3063\u3066\u3044\u308b\u306a\u3041\u3001\u3068\u601d\u3044\u3064\u3064\u3001\u3084\u308a\u904e\u3054\u3057\u3066\u3044\u305fReactJS\u3002<br \/>\n\u3064\u3044\u306b\u91cd\u3044\u8170\u3092\u4e0a\u3052\u3066\u5b66\u7fd2\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<br \/>\n\u305f\u3060\u3001\u30cd\u30c3\u30c8\u3067\u60c5\u5831\u3092\u6f01\u3063\u3066\u3082\u3001\u65e5\u672c\u8a9e\u3067\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u3066\u3044\u308b\u30b5\u30a4\u30c8\u3063\u3066\u5c11\u306a\u3044\u306e\u3067\u3059\u3088\u306d\u3002<br \/>\n\u4ed5\u65b9\u306a\u304f\u672c\u5bb6\u306e\u300cGet Started\u300d\u3092\u8aad\u3093\u3067\u3001\u300cTutorial\u300d\u3092\u8aad\u3093\u3067\u3001\u5927\u96d1\u628a\u306b\u7406\u89e3\u3067\u304d\u305f\u306e\u3067\u3001<br \/>\n\u3053\u308c\u304b\u3089ReactJS\u3092\u5b66\u3073\u59cb\u3081\u308b\u4eba\u306e\u5f79\u306b\u7acb\u3066\u308c\u3070\u3044\u3044\u306a\u3068\u601d\u3044\u3064\u3064\u3001\u3053\u308c\u304b\u3089\u4f55\u56de\u304b\u306b\u308f\u305f\u308a<br \/>\nReactJS\u306e\u521d\u6b69\uff08\u3068\u3044\u3046\u304b\u3053\u308c\u304c\u5168\u3066\u304b\u30fb\u30fb\u30fb\uff09\u3092\u9023\u8f09\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u305d\u3082\u305d\u3082React\u3068\u306f\u4f55\u3092\u3059\u308b\u3082\u306e\u304b\u30fb\u30fb\u30fb<br \/>\n\u3068\u3044\u3046\u3068\u3001\u4eca\u306e\u50d5\u306a\u308a\u306e\u89e3\u91c8\u3067\u3059\u304c\u3001\u52d5\u7684\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3059\u308b\u5834\u5408\u306b\u30fb\u30fb\u30fb<br \/>\n\u4e00\u822c\u7684\u306aWeb\u30a2\u30d7\u30ea\u3060\u3068\u3001HTML\u306eBody\u30bf\u30b0\u3092\u5927\u534a\u666e\u901a\u306eHTML\u30bf\u30b0\u3092\u4f7f\u3063\u3066\u8a18\u8ff0\u3057\u3001<br \/>\n\u4e00\u90e8\u52d5\u7684\u306b\u5909\u5316\u3059\u308b\u90e8\u5206\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u8a00\u8a9e\u306a\u3069\u3092\u4f7f\u3063\u3066\u3001\u52d5\u7684\u306a\u5909\u6570\u306e\u5185\u5bb9\u3092\u51fa\u529b\u3057\u307e\u3059\u3002<br \/>\nReact\u306e\u5834\u5408\u3001\u5909\u5316\u3059\u308b\u3082\u306e\u304c\u3042\u308b\u306e\u306a\u3089\u3001\u305d\u306e\u90e8\u5206\u306fHTML\u8a00\u8a9e\u3068\u3057\u3066\u8a18\u8ff0\u305b\u305a\u30fb\u30fb\u30fb<br \/>\n\u5168\u90e8JavaScript\uff08\u53b3\u5bc6\u306b\u306fBabel\u3084JSX\uff09\u3067\u8a18\u8ff0\u3057\u3061\u3083\u3048\u3070\u3044\u3044\u3058\u3083\u3093\u3001\u3068\u3044\u3046\u30b3\u30f3\u30bb\u30d7\u30c8\u3002<br \/>\n\u306a\u306e\u3067HTML\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u8a18\u8ff0\u3059\u308b\u306e\u306f\u3054\u304f\u666e\u901a\u306eHTML\u3067\u3001\u304b\u3064\u3001\u3081\u3063\u3061\u3083\u77ed\u3044\u3002<br \/>\n\u306a\u305c\u77ed\u3044\u304b\u3068\u3044\u3046\u3068\u3001ReactJS\u3067HTML\u3092\u307b\u307c\u307e\u308b\u307e\u308b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u306e\u3067\u30fb\u30fb\u30fb<br \/>\n\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u305f\u3081\u306e\u304d\u3063\u304b\u3051\u3068\u306a\u308bdiv\u30bf\u30b0\u306a\u3069\u304c\uff11\u3064\u3060\u3051\u3042\u308c\u3070OK\u3002<\/p>\n<p>\u65e5\u672c\u8a9e\u3067\u3054\u3061\u3083\u3054\u3061\u3083\u8aac\u660e\u3057\u3066\u3082\u7406\u89e3\u3057\u304c\u305f\u3044\u304b\u3082\u306a\u306e\u3067\u3001\u4f55\u306f\u3068\u3082\u3042\u308c\u3001<br \/>\n\u300cHello World\u300d\u3092\u3002<\/p>\n<p>\u307e\u305a\u306f\u96db\u5f62\u3068\u306a\u308bHTML\u3092\u4f5c\u6210\u3002<br \/>\n[bash]<br \/>\n<code><br \/>\n  <body><\/p>\n<div id=\"root\"><\/div>\n<p>  <\/body><br \/>\n<\/code><br \/>\n[\/bash]<br \/>\n\u96db\u5f62\u306f\u3053\u308c\u3060\u3051\u3067OK\u3002<br \/>\n\u4eca\u5f8c \u3069\u3093\u3069\u3093\u8907\u96d1\u306a\u51e6\u7406\u3092\u3059\u308b\u306b\u3057\u3066\u3082\u3001HTML\u306b\u66f8\u304f\u306e\u306f\u3001\u57fa\u672c\u3053\u308c\u3060\u3051\u3002<\/p>\n<p>ReactJS\u3092\u4f7f\u308f\u306a\u304d\u3083\u306a\u306e\u3067\u3001ReactJS\u306b\u5fc5\u8981\u306aJavaScript\uff13\u3064\u3092\u3001Head\u30bf\u30b0\u306b\u633f\u5165\u3002<br \/>\n[bash]<br \/>\n<head><br \/>\n\u3000\u3000\u301c \u4e2d\u7565\u3000\u301c<br \/>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react@16\/umd\/react.production.min.js\"><\/script><br \/>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.production.min.js\"><\/script><br \/>\n    <script src=\"https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js\"><\/script><\/p>\n<p>\u3000\u3000\u301c \u4e2d\u7565\u3000\u301c<br \/>\n<\/head><br \/>\n[\/bash]<\/p>\n<p>\u3053\u3053\u307e\u3067\u3067ReactJS\u3092\u884c\u3046\u6e96\u5099\u304c\u3067\u304d\u305f\u306e\u3067\u3001\u3044\u3056BabelScript\uff08ReactJS\uff09\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\u57fa\u672c\u7684\u306bReactJS\u3092\u8a18\u8ff0\u3059\u308b\u306e\u306fBody\u30bf\u30b0\u5185\u3067\u3059\u3002Body\u30bf\u30b0\u5185\u306b Script\u30bf\u30b0\u3092\u4f5c\u308a\u3001\u305d\u3053\u306b\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n[bash]<br \/>\n<body><\/p>\n<div id=\"root\"><\/div>\n<p>  <script type=\"text\/babel\">\n    class HelloWorld extends React.Component{\n       render(){\n          return (<\/p>\n<h2>Hello World!<\/h2>\n<p>          );\n       }\n    }<\/p>\n<p>    ReactDOM.render(\n      <HelloWorld \/>,\n      document.getElementById(\"root\")\n    );\n  <\/script><\/p>\n<p><\/body><br \/>\n[\/bash]<\/p>\n<p>\u7d50\u679c\u306f<\/p>\n<h2>Hello World!<\/h2>\n<p>\u4ee5\u4e0a\u3002<br \/>\n\u300cHello World\u300d\u3092\u51fa\u3059\u3060\u3051\u3067\u3001\u3069\u3093\u3060\u3051\u3081\u3093\u3069\u304f\u3055\u3044\u3093\u3060\u3088\u3068\u304a\u601d\u3044\u306b\u306a\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001<br \/>\n\u6211\u6162\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u3060\u3051\u306f\u6700\u4f4e\u306e\u30eb\u30fc\u30eb\u3067\u3059\u3002<\/p>\n<p>\u307e\u305a\u306fScript\u30bf\u30b0\u3067\u3053\u308c\u304b\u3089ReactJS\u3092\u66f8\u304d\u307e\u3059\u3088\u30fc\u3068\u76ee\u5370\u3092\u3064\u3051\u307e\u3059\u3002<br \/>\n\u305d\u3057\u3066 \u300croot\u300d\u3068\u3044\u3046ID\u3092\u6301\u3063\u305f\u30bf\u30b0\u306b HelloWorld\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u306d\u3068\u304a\u306d\u304c\u3044\u3057\u307e\u3059\u3002<br \/>\n\u305d\u306e\u90e8\u5206\u304c<\/p>\n<p>[bash]<br \/>\n    ReactDOM.render(<br \/>\n      <HelloWorld \/>,<br \/>\n      document.getElementById(&#8220;root&#8221;)<br \/>\n    );<br \/>\n[\/bash]<\/p>\n<p>\u3053\u3053\u3067\u7591\u554f\u304c\u51fa\u3066\u304f\u308b\u3068\u601d\u3044\u307e\u3059\u3002HelloWorld\u30bf\u30b0\u3063\u3066\u306a\u3093\u305e\u306d\uff1f\uff1f\uff1f<br \/>\n\u305d\u3093\u306a\u30bf\u30b0 HTML\u306b\u306f\u3042\u308a\u307e\u305b\u3093\u3088\u306d\u3002<br \/>\n\u3058\u3083\u3042\u306a\u306b\u304b\u3068\u3044\u3046\u3068\u3001\u8981\u306fReactJS\u306f\u72ec\u81ea\u306e\u30bf\u30b0\u3092Script\u3067\u4f5c\u3063\u3066\u3044\u3053\u3046\u3068\u3044\u3046\u30b3\u30f3\u30bb\u30d7\u30c8\u306a\u306e\u3067\u3059\u3002<br \/>\n\u805e\u3044\u305f\u3053\u3068\u306e\u306a\u3044\u72ec\u81ea\u306e\u30bf\u30b0\u540d\u3092 class \u540d\u3068\u3057\u3066\u3001\u30af\u30e9\u30b9\u3092\u4f5c\u308a\u307e\u3059\u3002<br \/>\n\u305d\u306e\u30af\u30e9\u30b9\u306e\u7d99\u627f\u5143\u306f\u56fa\u5b9a\u3067 React.Component\u3067\u3059\u3002<\/p>\n<p>\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u304a\u307e\u3058\u306a\u3044\u3067\u3001<\/p>\n<p>[bash]<br \/>\nclass \u81ea\u5206\u304c\u4f5c\u308a\u305f\u3044\u30bf\u30b0\u540d extends React.Component<br \/>\n[\/bash]<\/p>\n<p>\u3068\u66f8\u304f\u3068\u899a\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3058\u3083\u3042\u3001\u5b9f\u969b\u306b\u4f5c\u3063\u305f\u30bf\u30b0\u540d\u304c\u3069\u3093\u306aHTML\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u304b\u3068\u3044\u3046\u306e\u3092\u6c7a\u3081\u308b\u306e\u304c\u3001<br \/>\n\u81ea\u4f5c\u306e\u30bf\u30b0\u540d\u306e\u30af\u30e9\u30b9\uff08\u3053\u3053\u3067\u306fHelloWorld\u30af\u30e9\u30b9\uff09\u306e render\u30e1\u30bd\u30c3\u30c9\u306a\u306e\u3067\u3059\u3002<\/p>\n<p>[bash]<br \/>\n       render(){<br \/>\n          return (<\/p>\n<h2>Hello World!<\/h2>\n<p>          );<br \/>\n       }<br \/>\n[\/bash]<\/p>\n<p>render\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u306f\u3001HTML\u30e9\u30a4\u30af\u306a\u30bf\u30b0\u3092\u623b\u308a\u5024\u3068\u3057\u3066\u623b\u3057\u307e\u3059\u3002<br \/>\n\u3053\u3053\u3067\u306f\u3001 &lt;h2&gt;\u30bf\u30b0\u3067\u3059\u306d\u3002<\/p>\n<p>\u30e1\u30bd\u30c3\u30c9\u306e\u623b\u308a\u5024\u3068\u3044\u3046\u3068\u666e\u901a\u306f\u5909\u6570\u3092\u9023\u60f3\u3059\u308b\u3082\u306e\u3067\u3059\u304c\u30fb\u30fb\u30fb<br \/>\nReactJS\u306e\u5834\u5408\u306f\u3053\u306e\u30bf\u30b0\u306e\u3088\u3046\u306a\u3082\u306e \u3092\u623b\u3059\u306e\u304c\u30eb\u30fc\u30eb\u3067\u3059\u3002<br \/>\n\u300c\u30bf\u30b0\u306e\u3088\u3046\u306a\u3082\u306e\u300d\u3068\u3044\u3046\u306e\u304c\u5473\u564c\u3067\u3001\u3053\u308c\u304c\u30bf\u30b0\u3067\u306f\u306a\u304f ReactJS\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3044\u3046\u3082\u306e\u306e\u3088\u3046\u3067\u3059\u3002<br \/>\n\uff08\u6b63\u78ba\u306b\u306f\u9593\u9055\u3063\u3066\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u30fb\u30fb\u30fb\uff09<\/p>\n<p>\u305f\u3093\u306b &lt;h2&gt;Hello World!&lt;\/h2&gt; \u3068\u51fa\u529b\u3059\u308b\u306e\u306b\u3069\u3093\u3060\u3051\u8a18\u8ff0\u3057\u306a\u304d\u3083\u306a\u3089\u306a\u3044\u3093\u3060\u3088\u3068<br \/>\n\u304a\u601d\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u30fb\u30fb\u30fb\u3053\u308c\u306f\u6700\u4f4e\u9650\u306e\u30eb\u30fc\u30eb\u3067\u3059\u306e\u3067\u6211\u6162\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3053\u308c\u3060\u3051\u3058\u3083\u3042\u307e\u308a\u306b\u3064\u307e\u3089\u306a\u3044\u306e\u3067\u3001\u52d5\u7684\u306b\u5909\u5316\u3059\u308b\u3082\u306e\u3082\u5165\u308c\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>[bash]<br \/>\n    class HelloWorld extends React.Component{<br \/>\n       render(){<br \/>\n          var dt = new Date();<br \/>\n          var hms = dt.getHours() + &#8220;:&#8221; + dt.getMinutes() + &#8220;.&#8221; + dt.getSeconds();<\/p>\n<p>          return (<\/p>\n<h2>Hello World!{hms}<\/h2>\n<p>          );<br \/>\n       }<br \/>\n    }<br \/>\n[\/bash]<\/p>\n<p>\u3053\u3046\u3059\u308b\u3068\u51fa\u529b\u7d50\u679c\u306f\u30d6\u30e9\u30a6\u30b6\u30fc\u3092\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3059\u308b\u305f\u3073\u306b\u5909\u5316\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u7d50\u679c\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<h2>Hello World!19:20.33<\/h2>\n<p>\u3068\u308a\u3042\u3048\u305a\u3001\u521d\u56de\u306f\u3053\u3053\u307e\u3067\u3002<br \/>\n\u899a\u3048\u3066\u304a\u304b\u306a\u304d\u3083\u306a\u3089\u306a\u3044\u3053\u3068\u306f \u72ec\u81ea\u306e\u30bf\u30b0\u540d\u3092\u4f5c\u308a\u3001\u305d\u308c\u3092\u30af\u30e9\u30b9\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u3001<br \/>\n\u30af\u30e9\u30b9\u5185\u306b render\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3057\u3066\u3001\u305d\u3053\u306b\u51fa\u529b\u3057\u305f\u3044HTML\u30e9\u30a4\u30af\u306a\u3082\u306e\u3092\u8a18\u8ff0\u3059\u308b\u3002<br \/>\n\u6700\u5f8c\u306b ReactDOM.render \u3067\u3001HTML\u4e0a\u306e\u56fa\u5b9a\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u5185\u306b render\u3067\u51fa\u529b\u3059\u308b\u3002<\/p>\n<p>\u308f\u304b\u308a\u306b\u304f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u3056\u3063\u3068\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n<p>\u6b21\u56de\u306f TODO\u30ea\u30b9\u30c8\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u305a\u3063\u3068\u524d\u304b\u3089\u306f\u3084\u3063\u3066\u3044\u308b\u306a\u3041\u3001\u3068\u601d\u3044\u3064\u3064\u3001\u3084\u308a\u904e\u3054\u3057\u3066\u3044\u305fReactJS\u3002 \u3064\u3044\u306b\u91cd\u3044\u8170\u3092\u4e0a\u3052\u3066\u5b66\u7fd2\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002 \u305f\u3060\u3001\u30cd\u30c3\u30c8\u3067\u60c5\u5831\u3092\u6f01\u3063\u3066\u3082\u3001\u65e5\u672c\u8a9e\u3067\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u3066\u3044\u308b\u30b5\u30a4\u30c8\u3063\u3066\u5c11\u306a\u3044\u306e\u3067\u3059\u3088\u306d\u3002 \u4ed5\u65b9\u306a\u304f\u672c\u5bb6\u306e\u300cGet Started\u300d\u3092\u8aad\u3093\u3067\u3001\u300cTutorial\u300d\u3092\u8aad\u3093\u3067\u3001\u5927\u96d1\u628a\u306b\u7406\u89e3\u3067\u304d\u305f\u306e\u3067\u3001 \u3053\u308c\u304b\u3089ReactJS\u3092\u5b66\u3073\u59cb\u3081\u308b\u4eba\u306e\u5f79\u306b\u7acb\u3066\u308c\u3070\u3044\u3044\u306a\u3068\u601d\u3044\u3064\u3064\u3001\u3053\u308c\u304b\u3089\u4f55\u56de\u304b\u306b\u308f\u305f\u308a ReactJS\u306e\u521d\u6b69\uff08\u3068\u3044\u3046\u304b\u3053\u308c\u304c\u5168\u3066\u304b\u30fb\u30fb\u30fb\uff09\u3092\u9023\u8f09\u3057\u3066\u3044\u3053\u3046\u3068\u601d\u3044\u307e\u3059\u3002 \u307e\u305a\u306f\u305d\u3082\u305d\u3082React\u3068\u306f\u4f55\u3092\u3059\u308b\u3082\u306e\u304b\u30fb\u30fb\u30fb \u3068\u3044\u3046\u3068\u3001\u4eca\u306e\u50d5\u306a\u308a\u306e\u89e3\u91c8\u3067\u3059\u304c\u3001\u52d5\u7684\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3059\u308b\u5834\u5408\u306b\u30fb\u30fb\u30fb \u4e00\u822c\u7684\u306aWeb\u30a2\u30d7\u30ea\u3060\u3068\u3001HTML\u306eBody\u30bf\u30b0\u3092\u5927\u534a\u666e\u901a\u306eHTML\u30bf\u30b0\u3092\u4f7f\u3063\u3066\u8a18\u8ff0\u3057\u3001 \u4e00\u90e8\u52d5\u7684\u306b\u5909\u5316\u3059\u308b\u90e8\u5206\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u8a00\u8a9e\u306a\u3069\u3092\u4f7f\u3063\u3066\u3001\u52d5\u7684\u306a\u5909\u6570\u306e\u5185\u5bb9\u3092\u51fa\u529b\u3057\u307e\u3059\u3002 React\u306e\u5834\u5408\u3001\u5909\u5316\u3059\u308b\u3082\u306e\u304c\u3042\u308b\u306e\u306a\u3089\u3001\u305d\u306e\u90e8\u5206\u306fHTML\u8a00\u8a9e\u3068\u3057\u3066\u8a18\u8ff0\u305b\u305a\u30fb\u30fb\u30fb \u5168\u90e8JavaScript\uff08\u53b3\u5bc6\u306b\u306fBabel\u3084JSX\uff09\u3067\u8a18\u8ff0\u3057\u3061\u3083\u3048\u3070\u3044\u3044\u3058\u3083\u3093\u3001\u3068\u3044\u3046\u30b3\u30f3\u30bb\u30d7\u30c8\u3002 \u306a\u306e\u3067HTML\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u8a18\u8ff0\u3059\u308b\u306e\u306f\u3054\u304f\u666e\u901a\u306eHTML\u3067\u3001\u304b\u3064\u3001\u3081\u3063\u3061\u3083\u77ed\u3044\u3002 \u306a\u305c\u77ed\u3044\u304b\u3068\u3044\u3046\u3068\u3001ReactJS\u3067HTML\u3092\u307b\u307c\u307e\u308b\u307e\u308b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u306e\u3067\u30fb\u30fb\u30fb \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u305f\u3081\u306e\u304d\u3063\u304b\u3051\u3068\u306a\u308bdiv\u30bf\u30b0\u306a\u3069\u304c\uff11\u3064\u3060\u3051\u3042\u308c\u3070OK\u3002 \u65e5\u672c\u8a9e\u3067\u3054\u3061\u3083\u3054\u3061\u3083\u8aac\u660e\u3057\u3066\u3082\u7406\u89e3\u3057\u304c\u305f\u3044\u304b\u3082\u306a\u306e\u3067\u3001\u4f55\u306f\u3068\u3082\u3042\u308c\u3001 \u300cHello World\u300d\u3092\u3002 \u307e\u305a\u306f\u96db\u5f62\u3068\u306a\u308bHTML\u3092\u4f5c\u6210\u3002 [bash] [\/bash] \u96db\u5f62\u306f\u3053\u308c\u3060\u3051\u3067OK\u3002 \u4eca\u5f8c \u3069\u3093\u3069\u3093\u8907\u96d1\u306a\u51e6\u7406\u3092\u3059\u308b\u306b\u3057\u3066\u3082\u3001HTML\u306b\u66f8\u304f\u306e\u306f\u3001\u57fa\u672c\u3053\u308c\u3060\u3051\u3002 ReactJS\u3092\u4f7f\u308f\u306a\u304d\u3083\u306a\u306e\u3067\u3001ReactJS\u306b\u5fc5\u8981\u306aJavaScript\uff13\u3064\u3092\u3001Head\u30bf\u30b0\u306b\u633f\u5165\u3002 [bash] \u3000\u3000\u301c \u4e2d\u7565\u3000\u301c \u3000\u3000\u301c \u4e2d\u7565\u3000\u301c [\/bash] \u3053\u3053\u307e\u3067\u3067ReactJS\u3092\u884c\u3046\u6e96\u5099\u304c\u3067\u304d\u305f\u306e\u3067\u3001\u3044\u3056BabelScript\uff08ReactJS\uff09\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002 \u57fa\u672c\u7684\u306bReactJS\u3092\u8a18\u8ff0\u3059\u308b\u306e\u306fBody\u30bf\u30b0\u5185\u3067\u3059\u3002Body\u30bf\u30b0\u5185\u306b Script\u30bf\u30b0\u3092\u4f5c\u308a\u3001\u305d\u3053\u306b\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002 [bash] [\/bash] \u7d50\u679c\u306f Hello World! \u4ee5\u4e0a\u3002 \u300cHello World\u300d\u3092\u51fa\u3059\u3060\u3051\u3067\u3001\u3069\u3093\u3060\u3051\u3081\u3093\u3069\u304f\u3055\u3044\u3093\u3060\u3088\u3068\u304a\u601d\u3044\u306b\u306a\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001 \u6211\u6162\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u3060\u3051\u306f\u6700\u4f4e\u306e\u30eb\u30fc\u30eb\u3067\u3059\u3002 \u307e\u305a\u306fScript\u30bf\u30b0\u3067\u3053\u308c\u304b\u3089ReactJS\u3092\u66f8\u304d\u307e\u3059\u3088\u30fc\u3068\u76ee\u5370\u3092\u3064\u3051\u307e\u3059\u3002 \u305d\u3057\u3066 \u300croot\u300d\u3068\u3044\u3046ID\u3092\u6301\u3063\u305f\u30bf\u30b0\u306b HelloWorld\u30af\u30e9\u30b9\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u306d\u3068\u304a\u306d\u304c\u3044\u3057\u307e\u3059\u3002 \u305d\u306e\u90e8\u5206\u304c [bash] ReactDOM.render( , document.getElementById(&#8220;root&#8221;) ); [\/bash] \u3053\u3053\u3067\u7591\u554f\u304c\u51fa\u3066\u304f\u308b\u3068\u601d\u3044\u307e\u3059\u3002HelloWorld\u30bf\u30b0\u3063\u3066\u306a\u3093\u305e\u306d\uff1f\uff1f\uff1f \u305d\u3093\u306a\u30bf\u30b0 HTML\u306b\u306f\u3042\u308a\u307e\u305b\u3093\u3088\u306d\u3002 \u3058\u3083\u3042\u306a\u306b\u304b\u3068\u3044\u3046\u3068\u3001\u8981\u306fReactJS\u306f\u72ec\u81ea\u306e\u30bf\u30b0\u3092Script\u3067\u4f5c\u3063\u3066\u3044\u3053\u3046\u3068\u3044\u3046\u30b3\u30f3\u30bb\u30d7\u30c8\u306a\u306e\u3067\u3059\u3002 \u805e\u3044\u305f\u3053\u3068\u306e\u306a\u3044\u72ec\u81ea\u306e\u30bf\u30b0\u540d\u3092 class \u540d\u3068\u3057\u3066\u3001\u30af\u30e9\u30b9\u3092\u4f5c\u308a\u307e\u3059\u3002 \u305d\u306e\u30af\u30e9\u30b9\u306e\u7d99\u627f\u5143\u306f\u56fa\u5b9a\u3067 React.Component\u3067\u3059\u3002 \u3088\u304f\u308f\u304b\u3089\u306a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u304a\u307e\u3058\u306a\u3044\u3067\u3001 [bash] class \u81ea\u5206\u304c\u4f5c\u308a\u305f\u3044\u30bf\u30b0\u540d extends React.Component [\/bash] \u3068\u66f8\u304f\u3068\u899a\u3048\u3066\u304f\u3060\u3055\u3044\u3002 \u3058\u3083\u3042\u3001\u5b9f\u969b\u306b\u4f5c\u3063\u305f\u30bf\u30b0\u540d\u304c\u3069\u3093\u306aHTML\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u304b\u3068\u3044\u3046\u306e\u3092\u6c7a\u3081\u308b\u306e\u304c\u3001 \u81ea\u4f5c\u306e\u30bf\u30b0\u540d\u306e\u30af\u30e9\u30b9\uff08\u3053\u3053\u3067\u306fHelloWorld\u30af\u30e9\u30b9\uff09\u306e render\u30e1\u30bd\u30c3\u30c9\u306a\u306e\u3067\u3059\u3002 [bash] render(){ return ( Hello World! ); } [\/bash] render\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u306f\u3001HTML\u30e9\u30a4\u30af\u306a\u30bf\u30b0\u3092\u623b\u308a\u5024\u3068\u3057\u3066\u623b\u3057\u307e\u3059\u3002 \u3053\u3053\u3067\u306f\u3001 &lt;h2&gt;\u30bf\u30b0\u3067\u3059\u306d\u3002 \u30e1\u30bd\u30c3\u30c9\u306e\u623b\u308a\u5024\u3068\u3044\u3046\u3068\u666e\u901a\u306f\u5909\u6570\u3092\u9023\u60f3\u3059\u308b\u3082\u306e\u3067\u3059\u304c\u30fb\u30fb\u30fb ReactJS\u306e\u5834\u5408\u306f\u3053\u306e\u30bf\u30b0\u306e\u3088\u3046\u306a\u3082\u306e \u3092\u623b\u3059\u306e\u304c\u30eb\u30fc\u30eb\u3067\u3059\u3002 \u300c\u30bf\u30b0\u306e\u3088\u3046\u306a\u3082\u306e\u300d\u3068\u3044\u3046\u306e\u304c\u5473\u564c\u3067\u3001\u3053\u308c\u304c\u30bf\u30b0\u3067\u306f\u306a\u304f ReactJS\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3044\u3046\u3082\u306e\u306e\u3088\u3046\u3067\u3059\u3002 \uff08\u6b63\u78ba\u306b\u306f\u9593\u9055\u3063\u3066\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u30fb\u30fb\u30fb\uff09 \u305f\u3093\u306b &lt;h2&gt;Hello World!&lt;\/h2&gt; \u3068\u51fa\u529b\u3059\u308b\u306e\u306b\u3069\u3093\u3060\u3051\u8a18\u8ff0\u3057\u306a\u304d\u3083\u306a\u3089\u306a\u3044\u3093\u3060\u3088\u3068 \u304a\u601d\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u30fb\u30fb\u30fb\u3053\u308c\u306f\u6700\u4f4e\u9650\u306e\u30eb\u30fc\u30eb\u3067\u3059\u306e\u3067\u6211\u6162\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u3053\u308c\u3060\u3051\u3058\u3083\u3042\u307e\u308a\u306b\u3064\u307e\u3089\u306a\u3044\u306e\u3067\u3001\u52d5\u7684\u306b\u5909\u5316\u3059\u308b\u3082\u306e\u3082\u5165\u308c\u3066\u307f\u307e\u3057\u3087\u3046\u3002 [bash] class HelloWorld extends React.Component{ render(){ var dt = new Date(); var hms = dt.getHours() + &#8220;:&#8221; + dt.getMinutes() + &#8220;.&#8221; + dt.getSeconds(); return ( Hello World!{hms} ); } } [\/bash] \u3053\u3046\u3059\u308b\u3068\u51fa\u529b\u7d50\u679c\u306f\u30d6\u30e9\u30a6\u30b6\u30fc\u3092\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3059\u308b\u305f\u3073\u306b\u5909\u5316\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u7d50\u679c\u306f\u3053\u3093\u306a\u611f\u3058\u3002 Hello World!19:20.33 \u3068\u308a\u3042\u3048\u305a\u3001\u521d\u56de\u306f\u3053\u3053\u307e\u3067\u3002 \u899a\u3048\u3066\u304a\u304b\u306a\u304d\u3083\u306a\u3089\u306a\u3044\u3053\u3068\u306f \u72ec\u81ea\u306e\u30bf\u30b0\u540d\u3092\u4f5c\u308a\u3001\u305d\u308c\u3092\u30af\u30e9\u30b9\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u3001 \u30af\u30e9\u30b9\u5185\u306b render\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3057\u3066\u3001\u305d\u3053\u306b\u51fa\u529b\u3057\u305f\u3044HTML\u30e9\u30a4\u30af\u306a\u3082\u306e\u3092\u8a18\u8ff0\u3059\u308b\u3002 \u6700\u5f8c\u306b ReactDOM.render \u3067\u3001HTML\u4e0a\u306e\u56fa\u5b9a\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u5185\u306b render\u3067\u51fa\u529b\u3059\u308b\u3002 \u308f\u304b\u308a\u306b\u304f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u3056\u3063\u3068\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002 \u6b21\u56de\u306f TODO\u30ea\u30b9\u30c8\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n","protected":false},"author":1,"featured_media":1297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[77],"tags":[72],"class_list":{"0":"post-1539","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-reactjs"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1539"}],"version-history":[{"count":2,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1539\/revisions"}],"predecessor-version":[{"id":1794,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1539\/revisions\/1794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/1297"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}