<\/span><\/h2>\n\n\n\n\u81ea\u5206\u306fnpm init<\/code>\u3057\u3066\u304b\u3089npm install --save-dev ...<\/code>\u3067\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3057\u305f\u304c\u3001\u5177\u4f53\u7684\u306a\u30b3\u30de\u30f3\u30c9\u3092\u5fd8\u308c\u3066\u3057\u307e\u3063\u305f\u306e\u3068\u3001\u65b0\u3057\u304fnpm install --save-dev ...<\/code>\u3059\u308b\u3068\u81ea\u5206\u306e\u74b0\u5883\u3068\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u5909\u308f\u3063\u3066\u3044\u3066\u52d5\u4f5c\u3057\u306a\u304f\u306a\u3063\u305f\u308a\u3057\u305d\u3046\u306a\u306e\u3067\u3001\u81ea\u5206\u306e\u624b\u5143\u306b\u3042\u308bpackage.json\u3092\u5171\u6709\u3057\u307e\u3059\u3002<\/p>\n\n\n\n{\n \"name\": \"reactsample\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"webpack serve --mode development\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"@babel\/core\": \"^7.22.5\",\n \"@babel\/preset-env\": \"^7.22.5\",\n \"@babel\/preset-react\": \"^7.22.5\",\n \"babel-loader\": \"^9.1.2\",\n \"prettier\": \"^2.8.8\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-router\": \"^6.12.1\",\n \"react-router-dom\": \"^6.12.1\",\n \"webpack\": \"^5.86.0\",\n \"webpack-cli\": \"^5.1.4\",\n \"webpack-dev-server\": \"^4.15.1\"\n }\n}<\/code><\/pre>\n\n\n\npackage.json\u3092\u4f5c\u6210\u3057\u305f\u3089\u3001npm install<\/code>\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002
\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u304cnode_modules\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u914d\u4e0b\u306b\u4e00\u901a\u308a\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n<\/span>webpack.config.js<\/span><\/h2>\n\n\n\nwebpack.config.js\u306fWebpack\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n
Webpack\u306f\u8907\u6570\u306eJavaScript\u30d5\u30a1\u30a4\u30eb\u3092\u4e00\u3064\u306b\u307e\u3068\u3081\u308b(bundle)\u30c4\u30fc\u30eb\u3067\u3059\u3002
\u958b\u767a\u6642\u306b\u306f\u30da\u30fc\u30b8\u3084\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3054\u3068\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u5206\u3051\u3066\u958b\u767a\u3057\u307e\u3059\u304c\u3001Webpack\u3092\u4f7f\u3046\u3068\u305d\u308c\u3089\u3092\u4e00\u3064\u306b\u307e\u3068\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\u30d5\u30a1\u30a4\u30eb\u3092\u307e\u3068\u3081\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u30d6\u30e9\u30a6\u30b6\u304b\u3089Web\u30b5\u30fc\u30d0\u30fc\u3078\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u6570\u304c\u6e1b\u5c11\u3057\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6539\u5584\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
const debug=process.env.NODE_ENV!==\"production\";\n\nconst webpack=require(\"webpack\");\nconst path=require(\"path\");\n\nmodule.exports={\n context: path.join(__dirname,\"src\"),\n entry: \".\/js\/index.js\",\n module: {\n rules: [{\n test: \/\\.jsx?$\/,\n exclude: \/(node_modules|bower_components)\/,\n use: [{\n loader: \"babel-loader\",\n options: {\n presets: [\"@babel\/preset-react\",\"@babel\/preset-env\"]\n }\n }]\n }]\n },\n output: {\n path: __dirname+\"\/src\/\",\n filename: \"index.min.js\",\n publicPath: \"\/\"\n },\n devServer: {\n static: {\n directory: path.join(__dirname,\"src\")\n },\n historyApiFallback: true\n },\n plugins: debug?[]:[\n new webpack.optimize.OccurrenceOrderPlugin(),\n new webpack.optimize.UglifyJsPlugin({mangle:false,sourcemap:false})\n ]\n}<\/code><\/pre>\n\n\n\n<\/span>src\/index.html<\/span><\/h2>\n\n\n\n\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"ja\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\n <meta name=\"description\" content=\"React sample application\" \/>\n <meta name=\"author\" content=\"maeda6uiui\" \/>\n <title>React sample application<\/title>\n\n <link\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\"\n rel=\"stylesheet\"\n integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\"\n crossorigin=\"anonymous\"\n \/>\n <\/head>\n <body>\n <!--\u3053\u3053\u306bReact\u3067\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3057\u307e\u3059-->\n <div id=\"app\"><\/div>\n <script src=\"index.min.js\"><\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\u7ba1\u7406\u4eba\u306b\u306fCSS\u3092\u4f5c\u6210\u3059\u308b\u80fd\u529b\u304c\u306a\u3044\u306e\u3067\u3001Bootstrap\u3092\u305d\u306e\u307e\u307e\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
<\/span>src\/js\/index.js<\/span><\/h2>\n\n\n\n\u3053\u3053\u304cReact\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
import React from \"react\";\nimport ReactDOM from \"react-dom\/client\";\n\nimport App from \".\/App\";\n\nconst app = document.getElementById(\"app\");\nconst root = ReactDOM.createRoot(app);\n\nroot.render(<App \/>);<\/code><\/pre>\n\n\n\n\u5148\u306b\u7d39\u4ecb\u3057\u305findex.html\u3067\u3001id=\"app\"<\/code>\u3092\u3082\u3064div\u8981\u7d20\u304c\u3042\u308a\u307e\u3057\u305f\u3002
\u3053\u3053\u3067\u306f\u3001\u305d\u306ediv\u8981\u7d20\u306e\u3068\u3053\u308d\u306bReact\u3067\u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u57cb\u3081\u8fbc\u3080\u51e6\u7406\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002(\u305f\u3076\u3093)
\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306fApp.js\u3067\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<\/span>src\/js\/App.js<\/span><\/h2>\n\n\n\n\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4e2d\u8eab\u3067\u3059\u3002
\u3053\u3053\u3067\u306f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002
\u305f\u3068\u3048\u3070\u3001\/page-1\u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u305f\u5834\u5408\u306b\u306fPage1\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3059\u308b\u3001\u3068\u3044\u3063\u305f\u6d41\u308c\u3067\u3059\u3002
\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5177\u4f53\u7684\u306a\u4e2d\u8eab\u306f\u305d\u308c\u305e\u308c\u5225\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
import React from \"react\";\nimport { BrowserRouter as Router, Routes, Route } from \"react-router-dom\";\n\nimport Home from \".\/pages\/Home\";\nimport Page1 from \".\/pages\/Page1\";\nimport Page2 from \".\/pages\/Page2\";\nimport Page3 from \".\/pages\/Page3\";\n\nconst App = () => {\n return (\n <Router>\n <Routes>\n <Route exact path=\"\/\" element={<Home \/>} \/>\n <Route path=\"\/page-1\" element={<Page1 \/>} \/>\n <Route path=\"\/page-2\" element={<Page2 \/>} \/>\n <Route path=\"\/page-3\" element={<Page3 \/>} \/>\n <\/Routes>\n <\/Router>\n );\n};\n\nexport default App;<\/code><\/pre>\n\n\n\n<\/span>src\/js\/components\/NavBar.js<\/span><\/h2>\n\n\n\n\u753b\u9762\u4e0a\u90e8\u306b\u8868\u793a\u3055\u308c\u308b\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u3067\u3059\u3002<\/p>\n\n\n\n
import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nconst NavBar = () => {\n return (\n <nav className=\"navbar navbar-expand-md navbar-light bg-light\">\n <div className=\"container-fluid\">\n <Link to=\"\/\" className=\"navbar-brand\">\n React\u30b5\u30f3\u30d7\u30eb\n <\/Link>\n <ul className=\"navbar-nav me-auto\">\n <li className=\"nav-item\">\n <Link to=\"\/page-1\" className=\"nav-link\">\n \u30da\u30fc\u30b81\n <\/Link>\n <\/li>\n <li className=\"nav-item\">\n <Link to=\"\/page-2\" className=\"nav-link\">\n \u30da\u30fc\u30b82\n <\/Link>\n <\/li>\n <li className=\"nav-item\">\n <Link to=\"\/page-3\" className=\"nav-link\">\n \u30da\u30fc\u30b83\n <\/Link>\n <\/li>\n <\/ul>\n <ul className=\"navbar-nav ms-auto\">\n <li className=\"nav-item\">\n <Link to=\"https:\/\/www.google.com\/\" className=\"nav-link\">\n \u9000\u51fa\u3059\u308b\n <\/Link>\n <\/li>\n <\/ul>\n <\/div>\n <\/nav>\n );\n};\n\nexport default NavBar;<\/code><\/pre>\n\n\n\n<\/span>src\/js\/pages\/Home.js<\/span><\/h2>\n\n\n\n\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n\n\n
import React from \"react\";\n\nimport NavBar from \"..\/components\/NavBar\";\n\nconst Home = () => {\n return (\n <div>\n <NavBar \/>\n <div className=\"container-fluid\">\n <h1>\u3088\u3046\u3053\u305d\uff01<\/h1>\n <p>React\u3092\u7528\u3044\u305f\u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n );\n};\n\nexport default Home;<\/code><\/pre>\n\n\n\n<\/span>src\/js\/pages\/Page1.js<\/span><\/h2>\n\n\n\n\u4e00\u3064\u76ee\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n\n\n
import React from \"react\";\n\nimport NavBar from \"..\/components\/NavBar\";\n\nconst Page1 = () => {\n return (\n <div>\n <NavBar \/>\n <div className=\"container-fluid\">\n <h1>\u30da\u30fc\u30b81<\/h1>\n <p>\u4e00\u3064\u76ee\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n );\n};\n\nexport default Page1;<\/code><\/pre>\n\n\n\n<\/span>src\/js\/pages\/Page2.js<\/span><\/h2>\n\n\n\n\u4e8c\u3064\u76ee\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002
\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u30c1\u30a7\u30c3\u30af\u72b6\u614b\u306b\u3088\u3063\u3066\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u306e\u8868\u793a\u30fb\u975e\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
import React, { useState } from \"react\";\n\nimport NavBar from \"..\/components\/NavBar\";\n\nconst Page2 = () => {\n const [checked, setChecked] = useState(true);\n\n return (\n <div>\n {checked ? <NavBar \/> : undefined}\n <div className=\"container-fluid\">\n <h1>\u30da\u30fc\u30b82<\/h1>\n <p>\u4e8c\u3064\u76ee\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n <div className=\"form-check\">\n <input\n className=\"form-check-input\"\n type=\"checkbox\"\n value=\"\"\n id=\"shouldShowNavBarCheckbox\"\n checked={checked}\n onChange={() => setChecked((prevState) => !prevState)}\n \/>\n <label\n className=\"form-check-label\"\n htmlFor=\"shouldShowNavBarCheckbox\"\n >\n \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc\u3092\u8868\u793a\u3059\u308b\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n );\n};\n\nexport default Page2;<\/code><\/pre>\n\n\n\n<\/span>src\/js\/pages\/Page3.js<\/span><\/h2>\n\n\n\n\u4e09\u3064\u76ee\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002
\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066OK\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30a2\u30e9\u30fc\u30c8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
import React, { useState } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nimport NavBar from \"..\/components\/NavBar\";\n\nconst Page3 = () => {\n const [text, setText] = useState(\"\");\n\n return (\n <div>\n <NavBar \/>\n <div className=\"container-fluid\">\n <h1>\u30da\u30fc\u30b83<\/h1>\n <p>\u4e09\u3064\u76ee\u306e\u30da\u30fc\u30b8\u3067\u3059\u3002<\/p>\n\n <div className=\"mb-3\">\n <label className=\"form-label\" htmlFor=\"myRandomTextarea\">\n \u9069\u5f53\u306b\u4f5c\u3063\u305f\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\n <\/label>\n <textarea\n className=\"form-control\"\n id=\"myRandomTextarea\"\n rows=\"3\"\n placeholder=\"Hello, world!\"\n value={text}\n onChange={(e) => setText(e.target.value)}\n \/>\n <\/div>\n\n <div className=\"row justify-content-md-end\">\n <div className=\"col-md-auto\">\n <Link to=\"\/\" className=\"btn btn-secondary\">\n \u30ad\u30e3\u30f3\u30bb\u30eb\n <\/Link>\n <\/div>\n <div className=\"col-md-auto\">\n <button\n className={\n text === \"\" ? \"btn btn-primary disabled\" : \"btn btn-primary\"\n }\n onClick={() => alert(text)}\n >\n OK\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n};\n\nexport default Page3;<\/code><\/pre>\n\n\n\n<\/span>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u884c<\/span><\/h2>\n\n\n\nnpm start<\/code>\u3067\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002
\u3053\u3053\u3067\u5b9f\u969b\u306b\u5b9f\u884c\u3055\u308c\u3066\u3044\u308b\u30b3\u30de\u30f3\u30c9\u306f\u3001package.json\u306b\u8a18\u8f09\u3057\u3066\u3044\u308bwebpack serve --mode development<\/code>\u3067\u3059\u3002
\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3067\u306f\u3001localhost:8080\u3067\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"React\u3092\u4f7f\u3063\u3066\u7c21\u5358\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\u753b\u9762\u306e\u30a4\u30e1\u30fc\u30b8\u3068\u3057\u3066\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3059\u3002 \u30db\u30fc\u30e0\u30da\u30fc\u30b8 \u30da\u30fc\u30b81 \u30da\u30fc\u30b82 \u30da\u30fc\u30b83 \u3061\u306a\u307f\u306b\u7ba1\u7406\u4eba\u306fReact\u521d\u5fc3\u8005\u3067\u3059\u3002React\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u5dee […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-952","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=\/wp\/v2\/posts\/952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=952"}],"version-history":[{"count":7,"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=\/wp\/v2\/posts\/952\/revisions"}],"predecessor-version":[{"id":963,"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=\/wp\/v2\/posts\/952\/revisions\/963"}],"wp:attachment":[{"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daba-no-heya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/daba-no-heya.com\/wp-content\/uploads\/2023\/07\/\u30db\u30fc\u30e0\u30da\u30fc\u30b8.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/daba-no-heya.com\/wp-content\/uploads\/2023\/07\/\u30da\u30fc\u30b81.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/daba-no-heya.com\/wp-content\/uploads\/2023\/07\/\u30da\u30fc\u30b82.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/daba-no-heya.com\/wp-content\/uploads\/2023\/07\/\u30da\u30fc\u30b83.png\")
<\/figure>\n\n\n\n