{"id":2361,"date":"2022-01-26T13:05:53","date_gmt":"2022-01-26T13:05:53","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2361"},"modified":"2022-01-26T13:05:53","modified_gmt":"2022-01-26T13:05:53","slug":"%d1%88%d0%bf%d0%b0%d1%80%d0%b3%d0%b0%d0%bb%d0%ba%d0%b0-%d0%bf%d0%be-create-react-app-2","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2361","title":{"rendered":"\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e Create React App"},"content":{"rendered":"\n<h2>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h2>\n\n\n\n<p>Create react app (CRA) \u2014 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 (command line interface, CLI), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 React-\u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f, \u043d\u043e \u043d\u0435 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 Webpack \u0438 Babel.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0\"><\/a>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n\n\n\n<p>\u00abmy-app\u00bb \u2014 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn create react-app my-app\n# \u0438\u043b\u0438\nnpm init react-app my-app\n# \u0438\u043b\u0438\nnpx create-react-app my-app\n\n# \u0441\u043c\u0435\u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438\ncd my-app\n\n# \u0437\u0430\u043f\u0443\u0441\u043a \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\nyarn start\n# \u0438\u043b\u0438\nnpm run start\n\n# \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430\nyarn build\n# \u0438\u043b\u0438\nnpm run build<\/pre>\n\n\n\n<p>\u0424\u043b\u0430\u0433 \u00ab\u2014template\u00bb \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn create react-app my-app --template cra-template-typescript\n# \"cra-template\" \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c\nyarn create my-app --template typescript<\/pre>\n\n\n\n<p>\u0418\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b.<\/p>\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0\"><\/a>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>my-app\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 public\n\u2502   \u251c\u2500\u2500 favicon.ico\n\u2502   \u251c\u2500\u2500 index.html\n\u2502   \u251c\u2500\u2500 logo192.png\n\u2502   \u251c\u2500\u2500 logo512.png\n\u2502   \u251c\u2500\u2500 manifest.json\n\u2502   \u2514\u2500\u2500 robots.txt\n\u2514\u2500\u2500 src\n    \u251c\u2500\u2500 App.css\n    \u251c\u2500\u2500 App.js\n    \u251c\u2500\u2500 App.test.js\n    \u251c\u2500\u2500 index.css\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 logo.svg\n    \u251c\u2500\u2500 serviceWorker.js\n    \u2514\u2500\u2500 setupTests.js\n<\/code><\/pre>\n\n\n\n<p>\u0421\u0430\u043c\u044b\u043c\u0438 \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u0449\u0438\u0435:<\/p>\n\n\n\n<ul><li><code>public\/index.html<\/code>&nbsp;\u2014 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f)<\/li><li><code>src\/index.js<\/code>&nbsp;\u2014 \u00ab\u0432\u0445\u043e\u0434\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430\u00bb JavaScript \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u00ab\u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432\u00bb<\/li><\/ul>\n\n\n\n<p>\u042d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0443\u0434\u0430\u043b\u044f\u0442\u044c&nbsp;<strong>\u043d\u0435\u043b\u044c\u0437\u044f<\/strong>.&nbsp;<em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/em>&nbsp;\u0412\u0435\u0431\u043f\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u044b, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438&nbsp;<code>src<\/code>.<\/p>\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D0%B2%D1%81%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B\"><\/a>\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/h2>\n\n\n\n<ul><li>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f VSCode<ul><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dsznajder.es7-react-js-snippets\">ES7 React\/Redux\/GraphQL\/React-Native snippets<\/a><\/li><li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\">Prettier \u2014 Code formatter<\/a><\/li><\/ul><\/li><li>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f Google Chrome<ul><li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/react-developer-tools\/fmkadmapgofadopljbjfkapdkoienihi?hl=ru\">React Developer Tools<\/a><\/li><li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/redux-devtools\/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ru\">Redux DevTools<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 VSCode \u0434\u043b\u044f Prettier (<code>settings.json<\/code>):<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n\"prettier.endOfLine\": \"auto\",\n\"prettier.jsxSingleQuote\": true,\n\"prettier.packageManager\": \"yarn\",\n\"prettier.singleQuote\": true,\n\"prettier.semi\": false,\n\"prettier.trailingComma\": \"none\",\n\"prettier.useEditorConfig\": false,<\/pre>\n\n\n\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/prettier.io\/docs\/en\/options.html\">\u0437\u0434\u0435\u0441\u044c<\/a>.\u0420\u0435\u043a\u043b\u0430\u043c\u0430https:\/\/yastatic.net\/safeframe-bundles\/0.83\/1-1-0\/protected\/render.html<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npx -p @storybook\/cli sb init<\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0431\u0430\u043d\u0434\u043b\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/source-map-explorer\">source-map-explorer<\/a>.<\/p>\n\n\n\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0430\u043a\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;<code>yarn add source-map-explorer<\/code>. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b&nbsp;<code>scripts<\/code>&nbsp;\u0444\u0430\u0439\u043b\u0430&nbsp;<code>package.json<\/code>&nbsp;\u0441\u0442\u0440\u043e\u043a\u0443&nbsp;<code>\"analyze\": \"source-map-explorer 'build\/static\/js\/*.js'\"<\/code>. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0430\u043d\u0430\u043b\u0438\u0437:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn build\nyarn analyze<\/pre>\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D1%81%D1%82%D0%B8%D0%BB%D0%B8-%D0%B8-%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%B5-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5-%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B\"><\/a>\u0421\u0442\u0438\u043b\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/h2>\n\n\n\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0412\u0435\u0431\u043f\u0430\u043a, \u0432\u0441\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b (\u0441\u0442\u0438\u043b\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0442.\u0434.) \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 JavaScript-\u0444\u0430\u0439\u043b\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Button.css \u0438\u043b\u0438 Button.modules.css\n@font-face {\n  font-family: 'Montserrat';\n  src: url('.\/Montserrat-Regular.ttf');\n}\n.btn {\n  padding: 0.25em 0.75em;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 1.25em;\n  color: #1c1c1c;\n}<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Button.js\nimport '.\/Montserrat-Regular.ttf'\nimport '.\/Button.css'\n\/\/ \u0438\u043b\u0438\nimport styles from '.\/Button.module.css'\n\nimport likeImg from '.\/like.png'\n\nexport default function Button() {\n  return (\n    &lt;button className=\"btn\" \/*\u0438\u043b\u0438*\/ className={styles.btn} &gt;\n      &lt;img className=\"btn_like\" src={likeImg} alt=\"like\" \/&gt;\n    &lt;\/button&gt;\n  )\n}<\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/styled-components\">styled-components<\/a>. \u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0443 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/styled-components.md\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432&nbsp;<code>index.css<\/code>&nbsp;\u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443&nbsp;<code>@import-normalize;<\/code>.<\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 CSS \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;<a href=\"https:\/\/github.com\/postcss\/autoprefixer\">autoprefixer<\/a>, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b.<ins>https:\/\/googleads.g.doubleclick.net\/pagead\/ads?client=ca-pub-5265008544060842&amp;output=html&amp;h=174&amp;slotname=6021157728&amp;adk=3009603515&amp;adf=1874954860&amp;pi=t.ma~as.6021157728&amp;w=696&amp;fwrn=4&amp;lmt=1613381840&amp;rafmt=11&amp;psa=1&amp;format=696&#215;174&amp;url=https%3A%2F%2Fbookflow.ru%2Fshpargalka-po-create-react-app%2F&amp;flash=0&amp;host=ca-host-pub-2644536267352236&amp;wgl=1&amp;dt=1643201691432&amp;bpp=5&amp;bdt=1187&amp;idt=759&amp;shv=r20220120&amp;mjsv=m202201200301&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3D53d09eedf053366f-22c28a372bcd0013%3AT%3D1643201667%3ART%3D1643201667%3AS%3DALNI_Mb1ucFagtDc-cmhxjeor_SzpI1WJQ&amp;prev_fmts=0x0%2C1164x280%2C324x250%2C324x73%2C1349x615%2C728x90&amp;nras=5&amp;correlator=1229086841436&amp;frm=20&amp;pv=1&amp;ga_vid=1863745948.1643201692&amp;ga_sid=1643201692&amp;ga_hid=1103373832&amp;ga_fc=0&amp;rplot=4&amp;u_tz=120&amp;u_his=1&amp;u_h=768&amp;u_w=1366&amp;u_ah=728&amp;u_aw=1366&amp;u_cd=24&amp;u_sd=1&amp;adx=141&amp;ady=5352&amp;biw=1349&amp;bih=615&amp;scr_x=0&amp;scr_y=2920&amp;eid=31063751%2C44750774%2C44753738%2C31064036&amp;oid=2&amp;psts=AGkb-H9l4DLF0MRsY_ew1JmBXyQPRjdlClZJFvA9fzNhMQd26koMoMeqnnsQ3rN-0YeVZzIMUGLnD0MaPjtN%2CAGkb-H9xbXGskUXjFKaF8K9O-gPMN7p3KV6q3j5Xy8C093qwe5RpJmEii4ZtUDJAESfESsbtruPtSSq04KteEQ%2CAGkb-H-52b7JrIGazoqU8CVZdD8ZCWUFSsJoLfd1iUTXBCcycgh41Q0RokohG89BnW5ZOeM2Tx3GHquLsAHLrQ%2CAGkb-H8oN61Lh6lZXyn27vkOinY4_FeZRBUqnqJ9jQJ7GUhZXwueXisAfEKxIR_oP_IqrHCtzHoulpYKvQ&amp;pvsid=2056912092083785&amp;pem=199&amp;tmod=28635716&amp;nvt=1&amp;eae=0&amp;fc=1920&amp;brdim=-8%2C-8%2C-8%2C-8%2C1366%2C0%2C1382%2C744%2C1366%2C615&amp;vis=1&amp;rsz=%7C%7CoeEbr%7C&amp;abl=CS&amp;pfx=0&amp;fu=128&amp;bc=31&amp;ifi=2&amp;uci=a!2&amp;btvi=3&amp;fsb=1&amp;xpc=WLQ07LKCdT&amp;p=https%3A\/\/bookflow.ru&amp;dtd=M<\/ins><\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e&nbsp;<code>public<\/code>. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0442\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;<code>process.env.PUBLIC_URL<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src={process.env.PUBLIC_URL + '\/img\/logo.png'} \/&gt;<\/pre>\n\n\n\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/em>&nbsp;\u0442\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0412\u0435\u0431\u043f\u0430\u043a\u043e\u043c.<\/p>\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%8B%D0%B9-%D0%BF%D1%83%D1%82%D1%8C\"><\/a>\u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 (<code>my-app<\/code>) \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b&nbsp;<code>jsconfig.json<\/code>&nbsp;\u0438\u043b\u0438&nbsp;<code>tsconfig.json<\/code>&nbsp;(\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 TypeScript) \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\"\n  },\n  \"include\": [\"src\"]\n}<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">import Button from 'components\/Button';\n\/\/ \u0432\u043c\u0435\u0441\u0442\u043e\nimport Button from '..\/..\/components\/Button';<\/pre>\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5-%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5-%D1%81%D1%80%D0%B5%D0%B4%D1%8B-%D0%BE%D0%BA%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F\"><\/a>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u044b \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h2>\n\n\n\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u00ab\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445\u00bb \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u044b \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u0430&nbsp;<code>.env<\/code>&nbsp;\u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 (<code>my-app<\/code>):<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">REACT_APP_TITLE=\"Some title\"\nREACT_APP_DESCRIPTION=\"Some description\"\nREACT_APP_BASE_URL=http:\/\/example.com\/\n# \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439\nREACT_APP_IMG_URL=$REACT_APP_BASE_URL\/img\/<\/pre>\n\n\n\n<p>\u0422\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441&nbsp;<code>REACT_APP<\/code>.<\/p>\n\n\n\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- public\/index.html --&gt;\n&lt;title&gt;%REACT_APP_TITLE%&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"%REACT_APP_DESCRIPTION%\" \/&gt;<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src={`${process.env.REACT_APP_IMG_URL}\/logo.png`} \/&gt;<\/pre>\n\n\n\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n\n\n\n<h2><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5\"><\/a>\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h2>\n\n\n\n<p>CRA \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn create react-app my-app --template pwa<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ src\/index.js\nserviceWorker.register();<\/pre>\n\n\n\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/em>&nbsp;\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0440\u0432\u0438\u0441-\u0432\u043e\u0440\u043a\u0435\u0440\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n\n\n\n<h3><a href=\"https:\/\/github.com\/harryheman\/React-Total\/blob\/main\/cheatsheets\/create-react-app.md#%D0%BF%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BF%D0%B5%D1%80%D0%B5%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2\"><\/a>\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (\u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432), \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e Create React App.<\/h3>\n\n\n\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (<code>http:\/\/localhost:3000<\/code>). \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u043c\u0443 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0440\u0442, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>package.json<\/code>&nbsp;\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"proxy\": \"http:\/\/localhost:5000\"<\/pre>\n\n\n\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">yarn add http-proxy-middleware<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">const { createProxyMiddleware } = require('http-proxy-middleware')\n\nmodule.exports = function(app) {\n  app.use(\n    '\/api',\n    createProxyMiddleware({\n      target: 'http:\/\/localhost:5000',\n      changeOrigin: true,\n    })\n  )\n}<\/pre>\n\n\n\n<h3>\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e Create React App. \u0420\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 (\u0434\u0435\u043f\u043b\u043e\u0439) \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/h3>\n\n\n\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0442\u0430\u043a \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Netlify, Heroku, Vercel \u0438 \u0442.\u0434.<\/p>\n\n\n\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u00ab\u0434\u0435\u043f\u043b\u043e\u0439\u00bb SPA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Netlify:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"># \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 CLI\nyarn global add netlify-cli\n# \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f\nnetlify login\n# \u0434\u0435\u043f\u043b\u043e\u0439 \u0434\u0435\u043c\u043e-\u0432\u0435\u0440\u0441\u0438\u0438\nnetlify deploy\n# \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043f\u043b\u043e\u0439\nnetlify deploy --prod<\/pre>\n\n\n\n<p>\u0418\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 (\u0434\u043b\u044f\u0449\u0435\u0439\u0441\u044f) \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Netlify \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f, \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430 Github.<\/p>\n\n\n\n<p>\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u00ab\u0434\u0435\u043f\u043b\u043e\u044f\u00bb \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435&nbsp;<a href=\"https:\/\/create-react-app.dev\/docs\/deployment\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 Create react app (CRA) \u2014 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 (command line interface, CLI), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 React-\u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f, \u043d\u043e \u043d\u0435 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 Webpack \u0438 Babel.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2361"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2361"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2361\/revisions"}],"predecessor-version":[{"id":2362,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2361\/revisions\/2362"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}