{"id":8247,"date":"2022-06-07T05:56:21","date_gmt":"2022-06-06T20:56:21","guid":{"rendered":"https:\/\/yumishin.com\/?p=8247"},"modified":"2022-06-07T05:56:21","modified_gmt":"2022-06-06T20:56:21","slug":"react-3","status":"publish","type":"post","link":"https:\/\/yumishin.com\/?p=8247","title":{"rendered":"\u3010React\u3011Warning: ReactDOM.render is no longer supported in React 18.\u304c\u51fa\u305f\u6642"},"content":{"rendered":"<h2 id=\"i-0\">\u3010React\u3011Warning: ReactDOM.render is no longer supported in React 18.\u304c\u51fa\u305f\u6642<\/h2>\n<h3 id=\"i-1\">\u7d50\u8ad6<\/h3>\n<ul>\n<li>create-react-app\u3067\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u30b3\u30fc\u30c9\u304cReact18\u306b\u4e00\u90e8\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u306e\u304c\u539f\u56e0<\/li>\n<li>src\/index.jsx\u306e\u8a18\u8ff0\u3092React18\u306b\u5bfe\u5fdc\u3057\u305f\u66f8\u304d\u65b9\u306b\u5909\u66f4\u3057\u3066\u3042\u3052\u308c\u3070OK<\/li>\n<\/ul>\n<h3 id=\"i-2\">\u72b6\u6cc1<\/h3>\n<ul>\n<li>create-react-app\u3067React\u30a2\u30d7\u30ea\u306e\u4f5c\u6210<\/li>\n<li>\u3042\u308b\u7a0b\u5ea6\u5b9f\u88c5\u3057\u3066\u3001\u3001\u3001<\/li>\n<li>\u30d6\u30e9\u30a6\u30b6\u304b\u3089developer tool\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u753b\u9762\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8b66\u544a<\/li>\n<\/ul>\n<div class=\"pre_tag\"><span><i class=\"fa fa-code\"><\/i> \u30b3\u30fc\u30c9<\/span><\/p>\n<pre><code>Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https:\/\/reactjs.org\/link\/switch-to-createroot\n<\/code><\/pre>\n<\/div>\n<ul>\n<li>\u8b66\u544a\u306e\u5bfe\u8c61\u306fcreate-react-app\u3067\u81ea\u52d5\u751f\u6210\u3055\u308c\u305f\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9<\/li>\n<\/ul>\n<div class=\"pre_tag\"><span><i class=\"fa fa-code\"><\/i> src\/index.jsx<\/span><\/p>\n<pre><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\n\nReactDOM.render(\n  \n    \n  ,\n  document.getElementById('root')\n);\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();<\/code><\/pre>\n<\/div>\n<h3 id=\"i-3\">\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n<ul>\n<li>src\/index.jsx\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63<\/li>\n<\/ul>\n<div class=\"pre_tag\"><span><i class=\"fa fa-code\"><\/i> \u30b3\u30fc\u30c9<\/span><\/p>\n<pre><code>import React from 'react';\nimport { createRoot } from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport reportWebVitals from '.\/reportWebVitals';\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\nroot.render();\n\n\/\/ If you want to start measuring performance in your app, pass a function\n\/\/ to log results (for example: reportWebVitals(console.log))\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals\nreportWebVitals();<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u3010React\u3011Warning: ReactDOM.render is no longer supported in React 18.\u304c\u51fa\u305f\u6642 \u7d50\u8ad6 create-react-app\u3067\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u30b3\u30fc\u30c9\u304cReact18 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":8248,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256],"tags":[],"class_list":["post-8247","post","type-post","status-publish","format-standard","has-post-thumbnail","category-it","entry"],"_links":{"self":[{"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts\/8247","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=8247"}],"version-history":[{"count":1,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts\/8247\/revisions"}],"predecessor-version":[{"id":8249,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/posts\/8247\/revisions\/8249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=\/wp\/v2\/media\/8248"}],"wp:attachment":[{"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yumishin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}