{"id":2078,"date":"2021-06-21T11:42:55","date_gmt":"2021-06-21T11:42:55","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2078"},"modified":"2021-06-21T11:42:55","modified_gmt":"2021-06-21T11:42:55","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","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2078","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>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415161718<\/td><td>yarn create react-app my-app&lt;span class=&#8221;pl-c&#8221;&gt;# \u0438\u043b\u0438&lt;\/span&gt;npm init react-app my-app&lt;span class=&#8221;pl-c&#8221;&gt;# \u0438\u043b\u0438&lt;\/span&gt;npx create-react-app my-app&nbsp;&lt;span class=&#8221;pl-c&#8221;&gt;# \u0441\u043c\u0435\u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;cd&lt;\/span&gt; my-app&nbsp;&lt;span class=&#8221;pl-c&#8221;&gt;# \u0437\u0430\u043f\u0443\u0441\u043a \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438&lt;\/span&gt;yarn start&lt;span class=&#8221;pl-c&#8221;&gt;# \u0438\u043b\u0438&lt;\/span&gt;npm run start&nbsp;&lt;span class=&#8221;pl-c&#8221;&gt;# \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430&lt;\/span&gt;yarn build&lt;span class=&#8221;pl-c&#8221;&gt;# \u0438\u043b\u0438&lt;\/span&gt;npm run build<\/td><\/tr><\/tbody><\/table><\/figure>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>123<\/td><td>yarn create react-app my-app &#8211;template cra-template-typescript&lt;span class=&#8221;pl-c&#8221;&gt;# &#8220;cra-template&#8221; \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c&lt;\/span&gt;yarn create my-app &#8211;template typescript<\/td><\/tr><\/tbody><\/table><\/figure>\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>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678910111213141516171819202122<\/td><td>my-app\u251c\u2500\u2500 README.md\u251c\u2500\u2500 node_modules\u251c\u2500\u2500 package.json\u251c\u2500\u2500 .gitignore\u251c\u2500\u2500 public\u2502&nbsp;&nbsp; \u251c\u2500\u2500 favicon.ico\u2502&nbsp;&nbsp; \u251c\u2500\u2500 index.html\u2502&nbsp;&nbsp; \u251c\u2500\u2500 logo192.png\u2502&nbsp;&nbsp; \u251c\u2500\u2500 logo512.png\u2502&nbsp;&nbsp; \u251c\u2500\u2500 manifest.json\u2502&nbsp;&nbsp; \u2514\u2500\u2500 robots.txt\u2514\u2500\u2500 src&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 App.css&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 App.js&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 App.test.js&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 index.css&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 index.js&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 logo.svg&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500 serviceWorker.js&nbsp;&nbsp;&nbsp;&nbsp;\u2514\u2500\u2500 setupTests.js&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\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>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678<\/td><td>&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;editor.defaultFormatter&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;esbenp.prettier-vscode&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.endOfLine&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;auto&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.jsxSingleQuote&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-c1&#8243;&gt;true&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.packageManager&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;yarn&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.singleQuote&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-c1&#8243;&gt;true&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.semi&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-c1&#8243;&gt;false&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.trailingComma&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;none&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;,&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;prettier.useEditorConfig&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-c1&#8243;&gt;false&lt;\/span&gt;,<\/td><\/tr><\/tbody><\/table><\/figure>\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>.https:\/\/yastatic.net\/safeframe-bundles\/0.80\/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<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>npx -p @storybook\/cli sb init<\/td><\/tr><\/tbody><\/table><\/figure>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>12<\/td><td>yarn buildyarn analyze<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011<\/td><td>&lt;span class=&#8221;pl-c1&#8243;&gt;\/&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;\/&lt;\/span&gt; But&lt;span class=&#8221;pl-k&#8221;&gt;to&lt;\/span&gt;n.&lt;span class=&#8221;pl-c1&#8243;&gt;css&lt;\/span&gt; \u0438\u043b\u0438 &lt;span class=&#8221;pl-ent&#8221;&gt;Button&lt;\/span&gt;.&lt;span class=&#8221;pl-c1&#8243;&gt;modules&lt;\/span&gt;.&lt;span class=&#8221;pl-c1&#8243;&gt;css&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;@font-face&lt;\/span&gt; {&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;font-family&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&#8217;Montserrat'&lt;\/span&gt;;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;src&lt;\/span&gt;: &lt;span class=&#8221;pl-en&#8221;&gt;url&lt;\/span&gt;(&lt;span class=&#8221;pl-s&#8221;&gt;&#8217;.\/Montserrat-Regular.ttf'&lt;\/span&gt;);}.&lt;span class=&#8221;pl-c1&#8243;&gt;btn&lt;\/span&gt; {&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;padding&lt;\/span&gt;: &lt;span class=&#8221;pl-c1&#8243;&gt;0.25&lt;span class=&#8221;pl-smi&#8221;&gt;em&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;0.75&lt;span class=&#8221;pl-smi&#8221;&gt;em&lt;\/span&gt;&lt;\/span&gt;;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;font-family&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&#8217;Montserrat'&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;,&lt;\/span&gt; sans-serif;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;font-size&lt;\/span&gt;: &lt;span class=&#8221;pl-c1&#8243;&gt;1.25&lt;span class=&#8221;pl-smi&#8221;&gt;em&lt;\/span&gt;&lt;\/span&gt;;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;color&lt;\/span&gt;: &lt;span class=&#8221;pl-pds&#8221;&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;#&lt;\/span&gt;1c1c1c&lt;\/span&gt;;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123456789101112131415<\/td><td>&lt;span class=&#8221;pl-c&#8221;&gt;\/\/ Button.js&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;import&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&#8217;.\/Montserrat-Regular.ttf'&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;import&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&#8217;.\/Button.css'&lt;\/span&gt;&lt;span class=&#8221;pl-c&#8221;&gt;\/\/ \u0438\u043b\u0438&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;import&lt;\/span&gt; &lt;span class=&#8221;pl-s1&#8243;&gt;styles&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;from&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&#8217;.\/Button.module.css'&lt;\/span&gt;&nbsp;&lt;span class=&#8221;pl-k&#8221;&gt;import&lt;\/span&gt; &lt;span class=&#8221;pl-s1&#8243;&gt;likeImg&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;from&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&#8217;.\/like.png'&lt;\/span&gt;&nbsp;&lt;span class=&#8221;pl-k&#8221;&gt;export&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;default&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;function&lt;\/span&gt; &lt;span class=&#8221;pl-v&#8221;&gt;Button&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;(&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;)&lt;\/span&gt; &lt;span class=&#8221;pl-kos&#8221;&gt;{&lt;\/span&gt;&nbsp;&nbsp;&lt;span class=&#8221;pl-k&#8221;&gt;return&lt;\/span&gt; &lt;span class=&#8221;pl-kos&#8221;&gt;(&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;&amp;lt;&lt;\/span&gt;&lt;span class=&#8221;pl-ent&#8221;&gt;button&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;className&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-s&#8221;&gt;&#8221;btn&#8221;&lt;\/span&gt; &lt;span class=&#8221;pl-c&#8221;&gt;\/*\u0438\u043b\u0438*\/&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;className&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;{&lt;\/span&gt;&lt;span class=&#8221;pl-s1&#8243;&gt;styles&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;btn&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;}&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;&amp;gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;&amp;lt;&lt;\/span&gt;&lt;span class=&#8221;pl-ent&#8221;&gt;img&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;className&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-s&#8221;&gt;&#8221;btn_like&#8221;&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;src&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;{&lt;\/span&gt;&lt;span class=&#8221;pl-s1&#8243;&gt;likeImg&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;}&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;alt&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-s&#8221;&gt;&#8221;like&#8221;&lt;\/span&gt; \/&lt;span class=&#8221;pl-c1&#8243;&gt;&amp;gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;&amp;lt;&lt;\/span&gt;\/&lt;span class=&#8221;pl-ent&#8221;&gt;button&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;&amp;gt;&lt;\/span&gt;&nbsp;&nbsp;&lt;span class=&#8221;pl-kos&#8221;&gt;)&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;}&lt;\/span&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\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=4291379345&amp;pi=t.ma~as.6021157728&amp;w=696&amp;fwrn=4&amp;lmt=1613381840&amp;rafmt=11&amp;tp=site_kit&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;wgl=1&amp;adsid=ChEI8PHAhgYQ9Jjr6J2ExqPgARJMAI4vGIiqH4ah_Fy5XdjRX0WjO_ppiV-0I9YFkXFu34r4CJ04V5tdSwG_cwOX9hvu3gpk9bBibYwKcvI70h_O9B4hb-pjQcmnyZUCfA&amp;uach=WyJXaW5kb3dzIiwiMTAuMCIsIng4NiIsIiIsIjkxLjAuNDQ3Mi4xMDYiLFtdXQ..&amp;dt=1624275647972&amp;bpp=60&amp;bdt=770&amp;idt=865&amp;shv=r20210616&amp;cbv=%2Fr20110914&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3D6743a4d5726e8698-22b0e3801dc80040%3AT%3D1621872912%3ART%3D1621872912%3AS%3DALNI_MYsDLDw-OY4dK_E-l9g4cMH2sxZEw&amp;prev_fmts=0x0%2C728x90%2C1164x280%2C1349x625%2C324x250&amp;nras=4&amp;correlator=7304430896407&amp;frm=20&amp;pv=1&amp;ga_vid=1634037921.1624275648&amp;ga_sid=1624275648&amp;ga_hid=1575286688&amp;ga_fc=0&amp;rplot=4&amp;u_tz=180&amp;u_his=1&amp;u_java=0&amp;u_h=768&amp;u_w=1366&amp;u_ah=728&amp;u_aw=1366&amp;u_cd=24&amp;u_nplug=3&amp;u_nmime=4&amp;adx=141&amp;ady=4368&amp;biw=1349&amp;bih=625&amp;scr_x=0&amp;scr_y=1877&amp;eid=42530672%2C31060975%2C31060840&amp;oid=3&amp;psts=AGkb-H_ADrREQnKdPLqOZQwTnTjkXqz8RySzgqPXmgIN7tPrrtw6kwEUVanzUVbsS1ZQCAtLE0HmI9FRELqGwvus%2CAGkb-H8TWD2Sd_L3ezz7lFwzh6WKJXVvXByl16sNUvvviztMGHBIcmW6mJh1dWEDdN0nnKfbB4YZGx_2UOtv&amp;pvsid=874014744254892&amp;pem=314&amp;eae=0&amp;fc=1920&amp;brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C728%2C1366%2C625&amp;vis=1&amp;rsz=%7C%7CoeEbr%7C&amp;abl=CS&amp;pfx=0&amp;fu=128&amp;bc=31&amp;jar=2021-06-19-17&amp;ifi=4&amp;uci=a!4&amp;btvi=2&amp;fsb=1&amp;xpc=pkLcjiA0qJ&amp;p=https%3A\/\/bookflow.ru&amp;dtd=78757<\/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<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>&amp;lt;&lt;span class=&#8221;pl-ent&#8221;&gt;img&lt;\/span&gt; &lt;span class=&#8221;pl-e&#8221;&gt;src&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-pse&#8221;&gt;{&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;process&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;env&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;PUBLIC_URL&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;+&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;\/img\/logo.png&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;&lt;\/span&gt;&lt;span class=&#8221;pl-pse&#8221;&gt;}&lt;\/span&gt; \/&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\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>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>123456<\/td><td>{&nbsp;&nbsp;&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;compilerOptions&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: {&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;baseUrl&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;src&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;&nbsp;&nbsp;},&nbsp;&nbsp;&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;include&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: [&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;src&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;]}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>123<\/td><td>&lt;span class=&#8221;pl-k&#8221;&gt;import&lt;\/span&gt; &lt;span class=&#8221;pl-smi&#8221;&gt;Button&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;from&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;components\/Button&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;&lt;\/span&gt;;&lt;span class=&#8221;pl-c&#8221;&gt;\/\/ \u0432\u043c\u0435\u0441\u0442\u043e&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;import&lt;\/span&gt; &lt;span class=&#8221;pl-smi&#8221;&gt;Button&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;from&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;..\/..\/components\/Button&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;&lt;\/span&gt;;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>12345<\/td><td>REACT_APP_TITLE=&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;Some title&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;REACT_APP_DESCRIPTION=&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;Some description&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;REACT_APP_BASE_URL=http:\/\/example.com\/&lt;span class=&#8221;pl-c&#8221;&gt;# \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439&lt;\/span&gt;REACT_APP_IMG_URL=&lt;span class=&#8221;pl-smi&#8221;&gt;$REACT_APP_BASE_URL&lt;\/span&gt;\/img\/<\/td><\/tr><\/tbody><\/table><\/figure>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>123<\/td><td>&lt;span class=&#8221;pl-c&#8221;&gt;&amp;lt;!&#8211; public\/index.html &#8211;&amp;gt;&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;&amp;lt;&lt;\/span&gt;&lt;span class=&#8221;pl-ent&#8221;&gt;title&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;&amp;gt;&lt;\/span&gt;%REACT_APP_TITLE%&lt;span class=&#8221;pl-kos&#8221;&gt;&amp;lt;\/&lt;\/span&gt;&lt;span class=&#8221;pl-ent&#8221;&gt;title&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;&amp;gt;&lt;\/span&gt;&lt;span class=&#8221;pl-kos&#8221;&gt;&amp;lt;&lt;\/span&gt;&lt;span class=&#8221;pl-ent&#8221;&gt;meta&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;name&lt;\/span&gt;=&#8221;&lt;span class=&#8221;pl-s&#8221;&gt;description&lt;\/span&gt;&#8221; &lt;span class=&#8221;pl-c1&#8243;&gt;content&lt;\/span&gt;=&#8221;&lt;span class=&#8221;pl-s&#8221;&gt;%REACT_APP_DESCRIPTION%&lt;\/span&gt;&#8221; \/&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>&amp;lt;&lt;span class=&#8221;pl-ent&#8221;&gt;img&lt;\/span&gt; &lt;span class=&#8221;pl-e&#8221;&gt;src&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;=&lt;\/span&gt;&lt;span class=&#8221;pl-pse&#8221;&gt;{&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;`&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;${&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;process&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;env&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;REACT_APP_IMG_URL&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;}&lt;\/span&gt;&lt;span class=&#8221;pl-s&#8221;&gt;\/logo.png&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;`&lt;\/span&gt;&lt;span class=&#8221;pl-pse&#8221;&gt;}&lt;\/span&gt; \/&amp;gt;<\/td><\/tr><\/tbody><\/table><\/figure>\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>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>yarn create react-app my-app &#8211;template pwa<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>12<\/td><td>&lt;span class=&#8221;pl-c&#8221;&gt;\/\/ src\/index.js&lt;\/span&gt;&lt;span class=&#8221;pl-smi&#8221;&gt;serviceWorker&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-en&#8221;&gt;register&lt;\/span&gt;();<\/td><\/tr><\/tbody><\/table><\/figure>\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>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;proxy&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;: &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;http:\/\/localhost:5000&lt;span class=&#8221;pl-pds&#8221;&gt;&#8221;&lt;\/span&gt;&lt;\/span&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>1<\/td><td>yarn add http-proxy-middleware<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>1234567891011<\/td><td>&lt;span class=&#8221;pl-k&#8221;&gt;const&lt;\/span&gt; { &lt;span class=&#8221;pl-smi&#8221;&gt;createProxyMiddleware&lt;\/span&gt; } &lt;span class=&#8221;pl-k&#8221;&gt;=&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;require&lt;\/span&gt;(&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;http-proxy-middleware&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;&lt;\/span&gt;)&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;module&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-c1&#8243;&gt;exports&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;=&lt;\/span&gt; &lt;span class=&#8221;pl-k&#8221;&gt;function&lt;\/span&gt;(&lt;span class=&#8221;pl-smi&#8221;&gt;app&lt;\/span&gt;) {&nbsp;&nbsp;&lt;span class=&#8221;pl-smi&#8221;&gt;app&lt;\/span&gt;&lt;span class=&#8221;pl-k&#8221;&gt;.&lt;\/span&gt;&lt;span class=&#8221;pl-en&#8221;&gt;use&lt;\/span&gt;(&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;\/api&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;&lt;\/span&gt;,&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-en&#8221;&gt;createProxyMiddleware&lt;\/span&gt;({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;&lt;span class=&#8221;pl-s&#8221;&gt;target&lt;\/span&gt;:&lt;\/span&gt; &lt;span class=&#8221;pl-s&#8221;&gt;&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;http:\/\/localhost:5000&lt;span class=&#8221;pl-pds&#8221;&gt;'&lt;\/span&gt;&lt;\/span&gt;,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;pl-c1&#8243;&gt;&lt;span class=&#8221;pl-s&#8221;&gt;changeOrigin&lt;\/span&gt;:&lt;\/span&gt; &lt;span class=&#8221;pl-c1&#8243;&gt;true&lt;\/span&gt;,&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;&nbsp;)}<\/td><\/tr><\/tbody><\/table><\/figure>\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<figure class=\"wp-block-table\"><table><tbody><tr><td>12345678<\/td><td>&lt;span class=&#8221;pl-c&#8221;&gt;# \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 CLI&lt;\/span&gt;yarn global add netlify-cli&lt;span class=&#8221;pl-c&#8221;&gt;# \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f&lt;\/span&gt;netlify login&lt;span class=&#8221;pl-c&#8221;&gt;# \u0434\u0435\u043f\u043b\u043e\u0439 \u0434\u0435\u043c\u043e-\u0432\u0435\u0440\u0441\u0438\u0438&lt;\/span&gt;netlify deploy&lt;span class=&#8221;pl-c&#8221;&gt;# \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u0435\u043f\u043b\u043e\u0439&lt;\/span&gt;netlify deploy &#8211;prod<\/td><\/tr><\/tbody><\/table><\/figure>\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\n\n\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e:<\/p>\n\n\n\n<p>&nbsp;\u2014&nbsp;<a href=\"https:\/\/bookflow.ru\/shpargalka-po-jest-s-primerami-koda\/\">\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e Jest \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430.<\/a><\/p>\n\n\n\n<p>&nbsp;\u2014&nbsp;<a href=\"https:\/\/bookflow.ru\/shpargalka-po-redux-s-primerami-koda-stylesheet\/\">\u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430 \u043f\u043e Redux \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430 (stylesheet).<\/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":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[165],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2078"}],"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=2078"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2078\/revisions"}],"predecessor-version":[{"id":2079,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2078\/revisions\/2079"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}