{"id":8144,"date":"2022-05-11T05:43:30","date_gmt":"2022-05-10T20:43:30","guid":{"rendered":"https:\/\/yumishin.com\/?p=8144"},"modified":"2022-05-11T05:43:30","modified_gmt":"2022-05-10T20:43:30","slug":"react-materialui","status":"publish","type":"post","link":"https:\/\/yumishin.com\/?p=8144","title":{"rendered":"\u3010React\u30fbMaterial UI\u3011\u30a2\u30a4\u30b3\u30f3\u4e00\u89a7\u306eindex.js\u3092\u4f5c\u308b\u3068\u4fbf\u5229"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h2 id=\"i-0\">\u3010React\u3011\u30a2\u30a4\u30b3\u30f3\u4e00\u89a7\u306eindex.js\u3092\u4f5c\u308b\u3068\u4fbf\u5229<\/h2>\n<h3 id=\"i-1\">\u7d50\u8ad6<\/h3>\n<ul>\n<li>\u30d5\u30ed\u30f3\u30c8\u5074\u3067\u4f7f\u3046\u30a2\u30a4\u30b3\u30f3(Material UI)\u3092\u90fd\u5ea6\u76f4\u63a5\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd<\/li>\n<li>\u305f\u3060\u30a2\u30a4\u30b3\u30f3\u3092\u307e\u3068\u3081\u305f\u4e00\u89a7\u306eindex.js\u3092\u5b9a\u7fa9\u3057\u3066\u304a\u304f\u3068\u4fbf\u5229\n<ul>\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u305d\u306e\u30a2\u30a4\u30b3\u30f3\u306b\u5bfe\u3057\u3066\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u5f53\u3066\u305f\u3044\u5834\u5408\u306a\u3069\u306b\u4f7f\u3048\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 id=\"i-2\">\u5b9f\u88c5\u306e\u4ed5\u65b9\uff08\u30b5\u30f3\u30d7\u30eb\uff09<\/h3>\n<h4 id=\"i-3\">\u2460\u30a2\u30a4\u30b3\u30f3\u3092\u4e00\u62ec\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306eindex.js\u3092\u4f5c\u6210<\/h4>\n<ol>\n<li>components\u914d\u4e0b\u306bIcons\u30d5\u30a9\u30eb\u30c0\u4f5c\u6210<\/li>\n<li>Icons\u30d5\u30a9\u30eb\u30c0\u306e\u4e0b\u306b\u3001\u30a2\u30a4\u30b3\u30f3\u3092\u4e00\u62ec\u3067\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306eindex.js\u3092\u4f5c\u6210<\/li>\n<\/ol>\n<div class=\"pre_tag\"><span><i class=\"fa fa-code\"><\/i> \u30bf\u30fc\u30df\u30ca\u30eb<\/span><\/p>\n<pre><code>$ mkdir -p src\/components\/Icons\n$ touch src\/components\/Icons\/index.js<\/code><\/pre>\n<\/div>\n<h4 id=\"i-4\">\u2461index.js\u306b\u5404\u7a2e\u30a2\u30a4\u30b3\u30f3\u3092\u5b9a\u7fa9<\/h4>\n<ol>\n<li>\u30a2\u30a4\u30b3\u30f3\u3092Material UI\u304b\u3089import<\/li>\n<li>\u3055\u3089\u306b\u305d\u306e\u307e\u307eexport<\/li>\n<\/ol>\n<div class=\"pre_tag\"><span><i class=\"fa fa-code\"><\/i> components\/Icons\/index.js<\/span><\/p>\n<pre><code>export { default as LocalMallIcon } from '@material-ui\/icons\/LocalMall';\nexport { default as QueryBuilderIcon } from '@material-ui\/icons\/QueryBuilder';\n\/\/ \u5fc5\u8981\u306a\u5206\u3060\u3051\u5168\u3066\u5b9a\u7fa9\u3000\uff06\u3000\u65b0\u305f\u306b\u30a2\u30a4\u30b3\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u969b\u3082\u3053\u3053\u3078<\/code><\/pre>\n<\/div>\n<h4 id=\"i-5\">\u2462\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u3046\u3068\u304d<\/h4>\n<ul>\n<li>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u66f8\u304f\u3053\u3068\u3067\u3001\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<div class=\"pre_tag\"><span><i class=\"fa fa-code\"><\/i> js<\/span><\/p>\n<pre><code>import { LocalMallIcon } from '..\/components\/Icons';<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; \u3010React\u3011\u30a2\u30a4\u30b3\u30f3\u4e00\u89a7\u306eindex.js\u3092\u4f5c\u308b\u3068\u4fbf\u5229 \u7d50\u8ad6 \u30d5\u30ed\u30f3\u30c8\u5074\u3067\u4f7f\u3046\u30a2\u30a4\u30b3\u30f3(Material UI)\u3092\u90fd\u5ea6\u76f4\u63a5\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd \u305f\u3060\u30a2\u30a4\u30b3\u30f3\u3092\u307e\u3068\u3081\u305f\u4e00\u89a7\u306eindex.js\u3092\u5b9a\u7fa9\u3057\u3066\u304a\u304f\u3068\u4fbf &#8230; <\/p>\n","protected":false},"author":1,"featured_media":8146,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256],"tags":[],"class_list":{"0":"post-8144","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-it","8":"entry"},"_links":{"self":[{"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts\/8144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8144"}],"version-history":[{"count":3,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts\/8144\/revisions"}],"predecessor-version":[{"id":8148,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts\/8144\/revisions\/8148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/media\/8146"}],"wp:attachment":[{"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}