{"id":4305,"date":"2023-08-19T20:19:28","date_gmt":"2023-08-19T11:19:28","guid":{"rendered":"https:\/\/attacktube.com\/?p=4305"},"modified":"2024-03-25T05:25:01","modified_gmt":"2024-03-24T20:25:01","slug":"react%e5%85%a5%e9%96%80","status":"publish","type":"post","link":"https:\/\/attacktube.com\/?p=4305","title":{"rendered":"React\u5165\u9580"},"content":{"rendered":"\n<p>React\u3092\u52c9\u5f37\u3057\u3066\u307f\u308b\u3002<br>youtube\u306b1\u6642\u9593\u3067\u7d42\u308f\u308bReact\u5165\u9580\u304c\u3042\u3063\u305f\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<br>\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-3461056110605997\" crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-3461056110605997\" data-ad-slot=\"3137443461\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<br>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/nRCNL9T3J98\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">React\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n<p>npx create-react-app react-tutorial-youtube\u30b3\u30de\u30f3\u30c9\u306f\u3001\u65b0\u3057\u3044React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3042\u308b\u3002\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u3001\u65b0\u3057\u3044\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u4f5c\u6210\u3055\u308c\u308b\u3002\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001create-react-app\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\/\u30ed\u30fc\u30ab\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u306f\u306a\u3044\u3002<br>create-react-app\u306fReact\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u305f\u3081\u3060\u3051\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3042\u308b\u304b\u3089\u3060\u3002<br><br>\u3088\u3046\u306f\u3001\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u6307\u5b9a\u3057\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306b\u65b0\u3057\u3044React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u305f\u3081\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30b3\u30fc\u30c9\u304c\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u305f\u3089\u826f\u3044\u3068\u3044\u3046\u3053\u3068\u306b\u306a\u308b\u3002<br>\u3053\u306e\u305f\u3081\u3001\u300ccreate-react-app\u300d\u81ea\u4f53\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u306a\u3044\u3002<br>\u3053\u3046\u3044\u3046\u3068\u304d\u306f\u300cnpx\u300d\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3046\u3002<br>\u5f93\u6765\u306enpm\u30b3\u30de\u30f3\u30c9\u3067\u306f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u76f4\u63a5\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u306a\u3044\u3002\u3057\u304b\u3057\u3001npx\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u305b\u305a\u306b\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4e00\u6642\u7684\u306b\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<br><br>\u7d50\u8ad6\u3068\u3057\u3066\u3001React\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3059\u308b\u3068\u304d\u306e\u30b3\u30de\u30f3\u30c9\u304c\u300cnpx create-react-app react-tutorial-youtube\u300d\u3067\u3042\u308b\u3068\u899a\u3048\u308b\u3053\u3068\u3002<br><br>\u300ccreate-react-app\u300d\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb(\u30ed\u30fc\u30ab\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306f\u4e0d\u53ef)\u3057\u3066\u3001\u300ccreate-react-app\u300d\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3051\u3069\u3001\u300cnpx create-react-app react-tutorial-youtube\u300d\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u300ccreate-react-app\u300d\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u306a\u3044<\/p>\n\n\n\n<pre><code>\nC:\\node\\test0819&gt;npx create-react-app react-tutorial-youtube\n\nCreating a new React app in C:\\node\\test0819\\react-tutorial-youtube.\n\nInstalling packages. This might take a couple of minutes.\nInstalling react, react-dom, and react-scripts with cra-template...\n\n\nadded 1439 packages in 10m\n\n241 packages are looking for funding\n  run `npm fund` for details\n\nInitialized a git repository.\n\nInstalling template dependencies using npm...\n\nadded 69 packages, and changed 1 package in 49s\n\n245 packages are looking for funding\n  run `npm fund` for details\nRemoving template package using npm...\n\n\nremoved 1 package, and audited 1508 packages in 18s\n\n245 packages are looking for funding\n  run `npm fund` for details\n\n6 high severity vulnerabilities\n\nTo address all issues (including breaking changes), run:\n  npm audit fix --force\n\nRun `npm audit` for details.\n\nCreated git commit.\n\nSuccess! Created react-tutorial-youtube at C:\\node\\test0819\\react-tutorial-youtube\nInside that directory, you can run several commands:\n\n  npm start\n    Starts the development server.\n\n  npm run build\n    Bundles the app into static files for production.\n\n  npm test\n    Starts the test runner.\n\n  npm run eject\n    Removes this tool and copies build dependencies, configuration files\n    and scripts into the app directory. If you do this, you can\u2019t go back!\n\nWe suggest that you begin by typing:\n\n  cd react-tutorial-youtube\n  npm start\n\nHappy hacking!\n\n<\/code><\/pre>\n\n\n\n<p>VSCode\u3067\u300cnpm start\u300d\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u305f\u3089\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u305f\u3081\u3001\u6b21\u306e\u3088\u3046\u306b\u3057\u305f\u3002<br>VSCode\u3092\u7d42\u4e86\u3055\u305b\u3066\u3001\u300c\u7ba1\u7406\u8005\u3068\u3057\u3066\u5b9f\u884c\u300d\u3059\u308b\u3002<br>\u6b21\u306e\u3088\u3046\u306bSet-ExecutionPolicy RemoteSigned\u3092\u3057\u305f\u5f8c\u306b\u300cnpm start\u300d\u3057\u305f\u3089\u30a8\u30e9\u30fc\u304c\u51fa\u306a\u304f\u306a\u3063\u305f\u3002<\/p>\n\n\n\n<pre><code>\nPS C:\\node\\test0819\\react-tutorial-youtube&gt; Set-ExecutionPolicy RemoteSigned\nPS C:\\node\\test0819\\react-tutorial-youtube&gt; npm start\n\nCompiled successfully!\n\nYou can now view react-tutorial-youtube in the browser.\n\n  Local:            http:\/\/localhost:3000\n  On Your Network:  http:\/\/192.168.2.143:3000\n\nNote that the development build is not optimized.\nTo create a production build, use npm run build.\n\nwebpack compiled successfully\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">React\u306e\u6982\u8981<\/h2>\n\n\n\n<p>React\u306f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u306f\u306a\u304f\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b\u3002\u53b3\u5bc6\u306b\u306f\u3001React\u306f\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9(UI)\u306e\u69cb\u7bc9\u306b\u7279\u5316\u3057\u305fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b\u3002\u3088\u304f\u77e5\u3089\u308c\u3066\u3044\u308bjQuery\u3082\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b\u3002<\/p>\n\n\n\n<p>React\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3092\u63d0\u4f9b\u3057\u3001UI\u3092\u5c0f\u3055\u306a\u90e8\u54c1\u306b\u5206\u5272\u3059\u308b\u3053\u3068\u3067\u958b\u767a\u3092\u52b9\u7387\u7684\u306b\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u3002React\u306e\u4e3b\u306a\u7279\u5fb4\u306f\u3001\u4eee\u60f3DOM(Virtual DOM)\u306e\u4f7f\u7528\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u5229\u7528\u6027\u3001\u305d\u3057\u3066\u72b6\u614b\u7ba1\u7406\u306a\u3069\u3002<\/p>\n\n\n\n<p>windows10(64bit)\u306bReact\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u524d\u306b\u306fNode.js\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308b\u3002<br>\u3053\u308c\u306f\u3001React\u304cnpm\u30ec\u30b8\u30b9\u30c8\u30ea\u306b\u5b58\u5728\u3057\u3066\u304a\u308a\u3001React\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306b\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3084\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u305f\u3081\u306bNode.js\u304c\u5fc5\u8981\u3060\u304b\u3089\u3067\u3042\u308b\u3002<\/p>\n\n\n\n<p>React\u306enpm\u30ec\u30b8\u30b9\u30c8\u30ea\u306e\u30da\u30fc\u30b8\u306f\u4ee5\u4e0b\u306eURL\u306b\u306a\u308b\u3002<br><a href=\"https:\/\/www.npmjs.com\/package\/react\">react &#8211; npm (npmjs.com)<\/a> ExternalLink<\/p>\n\n\n\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u4f55\u304b?<br>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001React\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u6210\u3059\u308b\u90e8\u54c1\u3067\u3042\u308b\u3002UI\u306e\u4e00\u90e8\u3092\u8868\u3057\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u90e8\u54c1\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308b\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u72ec\u7acb\u3057\u3066\u5b9a\u7fa9\u3055\u308c\u3001\u30d7\u30ed\u30d1\u30c6\u30a3(props)\u3092\u53d7\u3051\u53d6\u3063\u3066\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3001\u72b6\u614b(state)\u3092\u7ba1\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u308b\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u968e\u5c64\u7684\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u8907\u96d1\u306aUI\u3092\u4f5c\u6210\u3057\u3001\u4fdd\u5b88\u6027\u3068\u518d\u5229\u7528\u6027\u3092\u9ad8\u3081\u308b\u3002<br><br>\u8ffd\u8a182024\u5e743\u670817\u65e5<br><a href=\"https:\/\/www.youtube.com\/watch?v=nRCNL9T3J98\">\u3010React\u5165\u9580\u3011\u5b8c\u5168\u521d\u5fc3\u8005OK\uff01\uff11\u304b\u3089\u7c21\u5358\u306aTodo\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066React\u306e\uff11\u6b69\u3092\u8e0f\u307f\u51fa\u3057\u3066\u307f\u3088\u3046 ~React\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb~ (youtube.com)<\/a>\u306b\u3064\u3044\u3066<br>1\u901a\u308a\u52d5\u753b\u8b1b\u5ea7\u307f\u3066\u5b66\u7fd2\u3057\u305f\u3002\u3042\u3068\u306f\u52d5\u753b\u306e\u89e3\u8aac\u306e\u7d30\u304b\u3044\u3068\u3053\u3092\u52c9\u5f37\u3057\u3088\u3002<br><br>\u8ffd\u8a182024\u5e743\u670824\u65e5<br>\u4eca\u3001\u5fa9\u7fd2\u3057\u3066\u3044\u308b\u3051\u3069input\u30bf\u30b0\u306breadOnly\u3092\u6d88\u3057\u3066\u3082\u8b66\u544a\u3067\u306a\u3044\u3051\u3069\u3001\u306a\u3093\u3067\u3060\uff1f<br>\u5148\u9031readOnly\u5165\u308c\u308b\u524d\u3063\u3066\u8b66\u544a\u51fa\u305f\u3063\u3051\uff1f\u899a\u3048\u3066\u3044\u306a\u3044\u306a\u3002<br>\u305d\u3082\u305d\u3082input\u30bf\u30b0\u306breadOnly\u306fhtml\u3067\u306f\u4e0d\u8981\u3060\u3088\u306a\u3002<br>\u4eca\u5ea6\u8abf\u3079\u3088\u3002<br><\/p>\n\n\n\n<script type=\"text\/javascript\">\njQuery(function($){\n$(\".jp-video\").hide();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>React\u3092\u52c9\u5f37\u3057\u3066\u307f\u308b\u3002youtube\u306b1\u6642\u9593\u3067\u7d42\u308f\u308bReact\u5165\u9580\u304c\u3042\u3063\u305f\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4305","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/4305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4305"}],"version-history":[{"count":31,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/4305\/revisions"}],"predecessor-version":[{"id":5409,"href":"https:\/\/attacktube.com\/index.php?rest_route=\/wp\/v2\/posts\/4305\/revisions\/5409"}],"wp:attachment":[{"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/attacktube.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}