{"id":12464,"date":"2020-12-22T09:59:27","date_gmt":"2020-12-22T00:59:27","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=12464"},"modified":"2023-05-27T22:18:12","modified_gmt":"2023-05-27T13:18:12","slug":"%e3%80%90react%e3%80%91html","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=12464","title":{"rendered":"\u3010React\u3011JSX\u3001Component\u306e\u57fa\u672c"},"content":{"rendered":"

JSX\u3068\u306f\uff1f<\/h2>\n

JavaScript XML\u306e\u7565\u3067JavaScript\u3092\u62e1\u5f35\u3057\u305f\u8a00\u8a9e\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u8a00\u8a9e\u306e\u4e00\u3064\u3067\u3059\u3002Facebook\u793e\u304c\u958b\u767a\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u30e1\u30ea\u30c3\u30c8<\/h3>\n

\u898b\u305f\u76ee\u304cHTML\u3084XML\u98a8\u306a\u306e\u3067\u53ef\u8aad\u6027\u304c\u975e\u5e38\u306b\u9ad8\u3044<\/strong><\/span>\u3067\u3059\u3002<\/p>\n

\u4ed5\u7d44\u307f<\/h3>\n

\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u3067\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u304c\u884c\u308f\u308c\u3066JavaScript\u30b3\u30fc\u30c9\u306b\u5909\u63db\u3055\u308c\u307e\u3059\u3002<\/p>\n

\u5909\u63db\u4f8b<\/h4>\n

JSX\u5909\u63db\u524d<\/h5>\n
import React from 'react';\r\n\r\nfunction App() {\r\n  return React.createElement(\r\n    \"div\",\r\n    null,\r\n    \"Hello, world\"\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n
JSX\u5909\u63db\u5f8c<\/h5>\n
\u30bd\u30fc\u30b9\u304c\u3053\u3093\u306a\u306b\u77ed\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n
function App() {\r\n\u3000\u3000return <div>Hello World!<\/div >;\r\n}\r\n\r\nexport default App;<\/pre>\n
JSX\u306e\u30eb\u30fc\u30eb<\/h3>\n
JavaScript\u3092\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/h4>\n
{}\u3092\u4f7f\u3046\u3053\u3068\u3067\u6587\u5b57\u5217\u3001\u6570\u5024\u3001\u95a2\u6570\u306a\u3069\u3092\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
function App() {\r\n  const message = 'test';\r\n\r\n  return (\r\n    <div>{message}<\/div >\r\n  )\r\n}<\/pre>\n
\u4e00\u3064\u306e\u30bf\u30b0\u3067\u56f2\u3063\u3066\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3002<\/h4>\n
\u5fc5\u305ajsx\u306f\u4e00\u3064\u306e\u30bf\u30b0\u3067\u56f2\u3063\u3066\u3044\u306a\u3044\u3068\u30c0\u30e1\u3067\u3059\u3002\u30a8\u30e9\u30fc\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002\u4e0b\u8a18\u306e\u3088\u3046\u306bdiv\u306a\u3069\u3067\u56f2\u3046\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
function App() {\r\n  return (\r\n    <div>\r\n      <label htmlFor=\"bar\">bar<\/label>\r\n    <\/div >\r\n  )\r\n}<\/pre>\n
\u305f\u3060\u3001\u3053\u308c\u3060\u3068\u4f59\u8a08\u306adiv\u304c\u4e00\u3064\u5897\u3048\u3066\u3057\u307e\u3044\u307e\u3059\u306e\u3067\u4e0b\u8a18\u306e\u3088\u3046\u306bReact.Fragment<\/strong><\/span>\u3068\u3044\u3046\u30bf\u30b0\u3092\u4f7f\u3063\u3066\u8a18\u8ff0\u3057\u307e\u3059\u3002\u305d\u3046\u3059\u308b\u3053\u3068\u3067\u4f59\u8a08\u306a\u30bf\u30b0\u304c\u5897\u3048\u307e\u305b\u3093\u3002<\/p>\n
function App() {\r\n  return (\r\n    <React.Fragment>\r\n      <label htmlFor=\"bar\">bar<\/label>\r\n    <\/React.Fragment>\r\n  )\r\n}<\/pre>\n
\u3082\u3057\u304f\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u3082\u66f8\u3051\u307e\u3059\u3002<\/p>\n
function App() {\r\n  return (\r\n    <>\r\n      <label htmlFor=\"bar\">bar<\/label>\r\n    <\/>\r\n  )\r\n}<\/pre>\n
\u5168\u3066\u306e\u30bf\u30b0\u3092\u9589\u3058\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/h4>\n
\u4f8b\u3048\u3070\u3001<br>\u306f\u901a\u5e38\u306eHTML\u3067\u306f\u9589\u3058\u308b\u5fc5\u8981\u306f\u306a\u3044\u3067\u3059\u304c\u3001<br \/>\u3068\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\u5168\u3066\u306eHTML\u30bf\u30b0\u306f\u5229\u7528\u3067\u304d\u306a\u3044\u5f8c\u8ff0\u3059\u308b\u4ee3\u66ff\u30bf\u30b0\u304c\u3042\u308b\u3002<\/h4>\n
className<\/h5>\n
\u901a\u5e38\u306eHTML\u306eclass\u5c5e\u6027\u3068\u540c\u3058\u3067\u3053\u3093\u306a\u611f\u3058\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/div>\n
\n
function App() {\r\n\u3000\u3000return <div className=\"test\">Hello World!<\/div >;\r\n}<\/pre>\n<\/div>\n
htmlFor<\/h5>\n
for\u5c5e\u6027\u3082JavaScript\u306efor\u3068\u88ab\u308b\u306e\u3067htmlFor<\/strong><\/span>\u3068\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
function App() {\r\n  return (\r\n    <div>\r\n      <label htmlFor=\"bar\">bar<\/label>\r\n    <\/div >\r\n  )\r\n}<\/pre>\n
Component<\/h2>\n
React\u306eComponent\u306b\u306f2\u7a2e\u985e\u3042\u308a\u307e\u3059\u3002\u4eca\u306f\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30ca\u30ebComponent\u3067\u4f5c\u308b\u306e\u304c\u666e\u901a\u3067\u3059\u3002<\/p>\n
    \n
  • \u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30ca\u30ebComponent<\/li>\n
  • \u30af\u30e9\u30b9Component<\/li>\n<\/ul>\n
    \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u898f\u5247<\/h3>\n
    \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u306e\u5148\u982d\u6587\u5b57\u306f\u5fc5\u305a\u5927\u6587\u5b57\u306b\u3059\u308b<\/strong><\/span>\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
    \u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30ca\u30ebComponent(\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8)<\/h4>\n
    \u5b9f\u8cea\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n
    const App = () => {\r\n  return <div>Hello World!<\/div>\r\n}<\/pre>\n
    return\u3068\u3057\u3066JSX\u3092\u8fd4\u3057\u307e\u3059\u3002\u30a2\u30ed\u30fc\u95a2\u6570\u3092\u4f7f\u308f\u305a\u306b\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
    function App() {\r\n  return <div>Hello World!<\/div>\r\n}<\/pre>\n
    \u30e1\u30ea\u30c3\u30c8<\/h5>\n
      \n
    • \u7121\u99c4\u306a\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u304c\u306a\u3044\u306e\u3067\u3001\u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6bd4\u3079\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u826f\u3044\u3002(6%\u307b\u3069\u9ad8\u901f\u5316\u3067\u304d\u308b\u3089\u3057\u3044\u3002\uff09<\/li>\n
    • state\u3092\u4fdd\u6301\u3067\u304d\u306a\u3044\u304c\u3001Hooks\u306e\u767b\u5834\u306b\u3088\u3063\u3066\u4fdd\u6301\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u3002<\/li>\n<\/ul>\n
      \u30af\u30e9\u30b9Component<\/h3>\n
      App\u3068\u3044\u3046\u30af\u30e9\u30b9\u306bComponent\u3092\u7d99\u627f\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n
      import React, { Component } from 'react';\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      <div>Hello World!<\/div>\r\n    )\r\n  }\r\n}<\/pre>\n
      Component\u306eimport\u3082\u5fd8\u308c\u305a\u306b\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
      State<\/h4>\n
      Component\u304c\u6301\u3063\u3066\u3044\u308b\u72b6\u614b\u306e\u3053\u3068\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5185\u90e8\u3067\u306e\u307f\u5229\u7528\u3055\u308c\u307e\u3059\u3002props\u304c\u5909\u66f4\u4e0d\u53ef\u80fd\u306a\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u5024\u3060\u3063\u305f\u306e\u306b\u5bfe\u3057\u3066\u3001State\u306f\u5909\u66f4\u53ef\u80fd\u306a\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u5024<\/strong><\/span>\u3067\u3059\u3002\u30af\u30e9\u30b9Component\u3067\u5229\u7528\u3067\u304d\u308b\u6a5f\u80fd<\/strong><\/span>\u3067\u3059\u3002<\/p>\n
      import React, { Component } from 'react';\r\n\r\nconst App = () => (<Counter><\/Counter>)\r\n\r\nclass Counter extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = { count: 0 }\r\n  }\r\n\r\n  render() {\r\n    return (<div>count: { this.state.count}<\/div>)\r\n  }\r\n}\r\n<\/pre>\n
      constructor\u3067state\u3092\u521d\u671f\u5316\u3057\u3066render\u306e\u4e2d\u3067\u305d\u306e\u5024\u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
      State\u306e\u66f4\u65b0\u51e6\u7406<\/h5>\n
      \u4e0b\u8a18\u306e\u3088\u3046\u306b\u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u3063\u3066state\u3092\u66f4\u65b0\u3059\u308b\u3088\u3046\u306b\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n
      import React, { Component } from 'react';\r\n\r\nconst App = () => (<Counter><\/Counter>)\r\n\r\nclass Counter extends Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = { count: 0 }\r\n  }\r\n\r\n  plus = () => {\r\n    this.setState({ count: this.state.count + 1 })\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <React.Fragment>\r\n        <div>{this.state.count}<\/div>\r\n        <button onClick={this.plus}>plus<\/button>\r\n      <\/React.Fragment>\r\n    )\r\n  }\r\n}<\/pre>\n
      \u306a\u304a\u3001state\u3092\u3044\u3058\u308b\u969b\u306f\u5fc5\u305asetState<\/strong><\/span>\u3092\u4f7f\u3063\u3066\u66f4\u65b0\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3067\u3059\u3002\uff08\u76f4\u63a5\u66f4\u65b0\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\u3002\uff09\u3001\u7406\u7531\u3068\u3057\u3066\u306fsetState\u306e\u4ed5\u7d44\u307f\u3068\u3057\u3066\u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u306e\u3068\u540c\u6642\u306b\u753b\u9762\u306e\u518d\u63cf\u753b\u3092\u884c\u3063\u3066\u304f\u308c\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n
      \u88cf\u5074\u306e\u4ed5\u7d44\u307f\u3068\u3057\u3066\u306fsetState\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3068\u3057\u3066render\u30e1\u30bd\u30c3\u30c9\u304c\u5b9f\u884c<\/strong><\/span>\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"JSX\u3068\u306f\uff1f JavaScript XML\u306e\u7565\u3067JavaScript\u3092\u62e1\u5f35\u3057\u305f\u8a00\u8a9e\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u8a00\u8a9e\u306e\u4e00\u3064\u3067\u3059\u3002Facebook\u793e\u304c\u958b\u767a\u3057\u307e\u3057\u305f\u3002 \u30e1\u30ea\u30c3\u30c8 \u898b\u305f\u76ee\u304cHTML\u3084XML\u98a8\u306a\u306e\u3067\u53ef\u8aad\u6027\u304c\u975e\u5e38\u306b\u9ad8\u3044\u3067\u3059\u3002 \u4ed5\u7d44 […]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[116],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/12464"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12464"}],"version-history":[{"count":11,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/12464\/revisions"}],"predecessor-version":[{"id":20449,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/12464\/revisions\/20449"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12464"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}