{"id":3473,"date":"2022-08-02T18:48:22","date_gmt":"2022-08-02T09:48:22","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=3473"},"modified":"2022-08-12T12:25:25","modified_gmt":"2022-08-12T03:25:25","slug":"%e3%80%90react%e3%80%91%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=3473","title":{"rendered":"\u3010React\u3011\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8"},"content":{"rendered":"\n

\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u5f79\u5272\u3092\u6301\u3063\u305f\u90e8\u54c1\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n\n\n\n\n

React\u3067\u4f5c\u6210\u3055\u308c\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u96c6\u5408\u4f53\u3067\u3059\u3002
\u4eca\u56de\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001\u4f7f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n

\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f8b<\/h1>\n\n\n\n

\u524d\u56de\u306f App.js \u3067\u7c21\u5358\u306a\u6587\u5b57\u3092\u30d6\u30e9\u30a6\u30b6\u306b\u8868\u793a\u3055\u305b\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u524d\u56de<\/span>\n

<\/p>\n

\u3010React\u3011\u89e6\u3063\u3066\u307f\u3088\u3046<\/a><\/p>\n<\/div>\n\n\n\n

\u4eca\u56de\u306f App.js \u4ee5\u5916\u306b Sample.js \u3068\u8a00\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
Sample.js \u306e\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n

function Sample() {\n    return (\n      <p>{"SAMPLE"}<\/p>\n    );\n  }\n  \nexport default Sample;<\/code><\/pre><\/div>\n\n\n\n
\u3053\u306e\u95a2\u6570\u306f \u30d6\u30e9\u30a6\u30b6\u306b “SAMPLE” \u3068\u8a00\u3046\u6587\u5b57\u3092\u8868\u793a\u3055\u305b\u307e\u3059\u3002
export \u3092\u4f7f\u7528\u3057\u3066\u3001Sample\u95a2\u6570\u3092\u5916\u90e8\u3067\u3082\u4f7f\u7528\u51fa\u6765\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528<\/h1>\n\n\n\n
\u4f5c\u6210\u3057\u305f Sample\u95a2\u6570 \u3092 App.js \u3067\u4f7f\u7528\u3057\u307e\u3059\u3002
App.js \u306e\u5185\u5bb9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n
import Sample from '.\/Sample';\n\nfunction App() {\n  return (\n    <>\n      <div>{"TEST"}<\/div>\n      <Sample \/>\n    <\/>\n  );\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f Sample\u95a2\u6570 \u3092\u4f7f\u7528\u3059\u308b\u306b\u306f Sample\u30bf\u30b0(\u8981\u7d20) \u3068\u3057\u3066\u4f7f\u7528\u3057\u307e\u3059\u3002HTML\u306e\u30bf\u30b0\u3068\u66f8\u304d\u65b9\u304c\u9055\u3046\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u4e0b\u3055\u3044\u3002
\u30d6\u30e9\u30a6\u30b6\u306b\u306f “TEST” \u3068 “SAMPLE” \u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f<\/h1>\n\n\n\n
\u3053\u306e\u3088\u3046\u306b App\u95a2\u6570 \u3084 Sample\u95a2\u6570 \u306b\u3088\u3063\u3066\u30d6\u30e9\u30a6\u30b6\u306b\u6587\u5b57\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002
App\u95a2\u6570 \u3084 Sample\u95a2\u6570 \u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u308c\u3089\u304c\u7d50\u5408\u3057\u3066\u4e00\u3064\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fReact\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u6210\u3059\u308b\u90e8\u54c1\u3084\u8981\u7d20\u3068\u601d\u3063\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n
\u4eca\u56de\u306f Sample.js \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001Sample \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002
\u3053\u306e\u3088\u3046\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u614b\u306f React\u8981\u7d20\u3092\u8fd4\u5374\u3059\u308b\u95a2\u6570<\/strong> \u306b\u306a\u308a\u307e\u3059\u3002
\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5f62\u5f0f\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
function \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d() {\n    return (\n      React\u8981\u7d20\n    );\n  }\n  \nexport default \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d;<\/code><\/pre><\/div>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d<\/h2>\n\n\n\n
\u95a2\u6570\u540d\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u3068\u306a\u308a\u307e\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u306f\u5148\u982d\u5927\u6587\u5b57\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8fd4\u5374\u5024<\/h2>\n\n\n\n
\u5358\u4e00\u306e\u8981\u7d20\u3092\u8fd4\u5374\u3057\u307e\u3059\u3002
\u4ee5\u4e0b\u306f2\u3064\u306e\u8981\u7d20\u3092\u8fd4\u5374\u3057\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u306e\u3067NG\u3067\u3059\u3002<\/p>\n\n\n\n
import Sample from '.\/Sample';\n\nfunction App() {\n  return (\n      <div>{"TEST"}<\/div>\n      <Sample \/>\n  );\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8<\/h3>\n\n\n\n
\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u306f\u7a7a\u306e\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u8907\u6570\u306e\u8981\u7d20\u3092\u8fd4\u3059\u6642\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002
\u4eca\u56de\u306e\u4f8b\u3067\u306f div\u8981\u7d20 \u3068 p\u8981\u7d20 \u3092\u8fd4\u5374\u3057\u305f\u8cb7\u3063\u305f\u306e\u3067\u3059\u304c\u30012\u3064\u8981\u7d20\u3092\u8fd4\u5374\u3059\u308b\u4e8b\u306b\u306a\u308b\u306e\u3067\u3001\u7a7a\u306e\u8981\u7d20\u3067\u56f2\u3044\u8fd4\u5374\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
import Sample from '.\/Sample';\n\nfunction App() {\n  return (\n    <>\n      <div>{"TEST"}<\/div>\n      <Sample \/>\n    <\/>\n  );\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5229\u7528\u65b9\u6cd5<\/h2>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u614b\u306f React\u8981\u7d20\u3092\u8fd4\u5374\u3059\u308b\u95a2\u6570<\/strong> \u306b\u306a\u308b\u306e\u3067\u3001\u8aad\u307f\u8fbc\u3093\u3060\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u8981\u7d20\u3068\u3057\u3066\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
import \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d from '.\/Sample';\n\nfunction App() {\n  return (\n      <\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d \/>\n  );\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u7c92\u5ea6<\/h2>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3069\u306e\u3088\u3046\u306a\u7c92\u5ea6\u3067\u4f5c\u6210\u3059\u308c\u3070\u826f\u3044\u304b\uff1f\u4eba\u306b\u3088\u3063\u3066\u3082\u7570\u306a\u308b\u90e8\u5206\u306a\u306e\u3067\u3001\u307e\u305a\u306f\u8272\u3005\u4f5c\u6210\u3057\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u3092\u8cb0\u3063\u305f\u308a\u3001\u81ea\u5206\u3067\u898b\u76f4\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u518d\u4f5c\u6210\u3059\u308b\u3068\u304b\u3092\u7e70\u308a\u8fd4\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\u6700\u5f8c\u306b<\/h1>\n\n\n\n
\u7279\u306b\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u5f79\u5272\u3092\u6301\u3063\u305f\u90e8\u54c1\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":968,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-3473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/3473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3473"}],"version-history":[{"count":15,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/3473\/revisions"}],"predecessor-version":[{"id":3561,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/3473\/revisions\/3561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/media\/968"}],"wp:attachment":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}