{"id":1599,"date":"2021-08-06T23:16:22","date_gmt":"2021-08-06T14:16:22","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1599"},"modified":"2022-07-17T08:47:38","modified_gmt":"2022-07-16T23:47:38","slug":"reactbootstrap","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1599","title":{"rendered":"React(Bootstrap)"},"content":{"rendered":"\n<p>CDN\u3092\u4f7f\u3063\u3066HTMl\u306e&lt;head&gt;\u5185\u306bBtootstap\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n  &lt;title&gt;React&lt;\/title&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css&quot; crossorigin=&quot;anonymous&quot;&gt;\n  &lt;script crossorigin src=&quot;https:\/\/unpkg.com\/react@17\/umd\/react.development.js&quot;&gt;&lt;\/script&gt;\n  &lt;script crossorigin src=&quot;https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;<\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">React\u30a8\u30ec\u30e1\u30f3\u30c8\u3067Bootstrap\u3092\u4f7f\u3046<\/h3>\n\n\n\n<p>\u30a8\u30ec\u30e1\u30f3\u30c8\u4f5c\u6210\u306b\u304a\u3051\u308b\u7b2c\u4e8c\u5f15\u6570\u306b\u30bf\u30b0\u306e\u5c5e\u6027\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>    React.createElement(\n      &#39;h4&#39;, {className:&#39;alert alert-primary&#39;}, \n      &quot;React sample page.&quot;\n    ),<\/code><\/pre><\/div>\n\n\n\n<p>\u30b3\u30fc\u30c9\u306e\u4e2d\u306b&lt;div className=&#8221;&#8221;&gt;\u3068\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u304c\u3053\u308c\u306fclass\u5c5e\u6027\u306e\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>let dom = document.querySelector(&#39;#root&#39;)\n\nlet element = React.createElement(\n  &#39;div&#39;, {}, [\n    React.createElement(\n      &#39;h2&#39;, {}, &quot;Hello!&quot;\n    ),\n    React.createElement(\n      &#39;h4&#39;, {className:&#39;alert alert-primary&#39;}, \n      &quot;React sample page.&quot;\n    ),\n    React.createElement(\n      &#39;ul&#39;, {className:&#39;list-group&#39;}, [\n        React.createElement(\n          &#39;li&#39;, {className:&#39;list-group-item&#39;}, \n          &quot;First item.&quot;\n        ),\n        React.createElement(\n          &#39;li&#39;, {className:&#39;list-group-item&#39;},\n          &quot;Second item.&quot;\n        ),\n        React.createElement(\n          &#39;li&#39;, {className:&#39;list-group-item&#39;},\n          &quot;Third item.&quot;\n        ),\n      ]\n    ),\n  ])\n\nReactDOM.render(element, dom)\t<\/code><\/pre><\/div>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/04\/08\/bootstrap\/\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>npm install react-bootstrap bootstrap@5.1.3<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CDN\u3092\u4f7f\u3063\u3066HTMl\u306elt;headgt;\u5185\u306bBtootstap\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 React\u30a8\u30ec\u30e1\u30f3\u30c8\u3067Bootstrap\u3092\u4f7f\u3046 \u30a8\u30ec\u30e1\u30f3\u30c8\u4f5c\u6210\u306b\u304a\u3051\u308b\u7b2c\u4e8c\u5f15\u6570\u306b\u30bf\u30b0\u306e\u5c5e\u6027\u3092\u6307\u5b9a\u3057\u3066\u3044<\/p>\n","protected":false},"author":1,"featured_media":1600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1599"}],"version-history":[{"count":2,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1599\/revisions"}],"predecessor-version":[{"id":2076,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1599\/revisions\/2076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1600"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}