{"id":285014,"date":"2017-04-14T18:51:09","date_gmt":"2017-04-14T14:51:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=285014"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=285014","title":{"rendered":"N \u043f\u0440\u0438\u0447\u0438\u043d, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Create React App"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6e5\/120\/ce3\/6e5120ce36be4f4b8103ad47b8df703d.jpg\"\/><\/p>\n<p>  Create React App \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412\u044b \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 Webpack, Babel \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u044b, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u0434\u0435 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\">Create React App \u043d\u0430 GitHub<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/blob\/master\/packages\/react-scripts\/template\/README.md\">Create React App User Guide<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/tuchk4\/awesome-create-react-app\">Awesome Create React App<\/a> \u2014 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432, \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0445 \u0444\u0438\u0447 \u0438 FAQ.<\/li>\n<\/ul>\n<p>  \u0414\u043e \u0432\u044b\u0445\u043e\u0434\u0430 Create React App \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c Webpack-\u043a\u043e\u043d\u0444\u0438\u0433 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 *rc-\u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u042d\u0442\u043e \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0441\u043a\u043e\u0440\u0435\u0435, \u0431\u044b\u043b\u043e \u0441\u043a\u0443\u0447\u043d\u043e. \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u0435\u0440\u0432\u043d\u0438\u0447\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b, \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f: \u00ab\u041f\u043e\u0447\u0435\u043c\u0443 \u0432 \u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442?\u00bb. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0443 \u0442\u0435\u0431\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0430\u043c\u0438. \u0418 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0441 \u0440\u0435\u043b\u0438\u0437\u043e\u043c Webpack2 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u044f\u0442\u044c \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f. (\u0421\u043f\u043e\u0439\u043b\u0435\u0440: \u0441 Create React App \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e react-scripts \u0432 package.json).<\/p>\n<p>  Create React App \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 CLI-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 package.json \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430, \u0442\u0435\u0441\u0442\u043e\u0432 \u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">npm install -g create-react-app create-react-app my-app cd my-app\/ npm start # yarn start<\/code><\/pre>\n<p>  Zero configuration! \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c Webpack \u0438\u043b\u0438 Babel, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 eject.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u043f\u044b\u0442\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u0432\u0430\u0441 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c eject. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Create React App \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<br \/>  \u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>npm run eject<\/code> \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0438 \u0442\u0440\u0430\u043d\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (Webpack, Babel, ESLint \u0438 \u0442. \u0434.) \u0432 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041a\u043e\u043c\u0430\u043d\u0434\u044b \u0432\u0440\u043e\u0434\u0435 <code>npm start<\/code> \u0438 <code>npm run build<\/code> \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0445\u043e\u0447\u0443 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c eject<\/h3>\n<p>  \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u0443 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c. \u041d\u043e \u0434\u0435\u043b\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u043c. \u0412\u043e\u0442 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0447\u0438\u043d.<\/p>\n<p>  <b>\u042f \u0445\u043e\u0447\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f Create React App<\/b><\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Create React App \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/webpack.js.org\/guides\/migrating\/\">Webpack 2<\/a> (\u0430 \u043e\u043d\u0438 \u044d\u0442\u043e \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438), \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c tree-shaking \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u0440\u0443\u0442\u044b\u0435 \u0444\u0438\u0447\u0438. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e react-scripts \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  \u0418\u043b\u0438, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Create React App \u0440\u0435\u043b\u0438\u0437\u0438\u0442 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/670\">Plugin System #670<\/a>. \u042f \u0431\u044b \u0441 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u043a\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u0434\u0430\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u0431\u044b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u041d\u043e, \u0435\u0441\u043b\u0438 eject \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u043d, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442.<\/p>\n<p>  <b>\u041d\u0435 \u043b\u044e\u0431\u043b\u044e, \u043a\u043e\u0433\u0434\u0430 \u0432 package.json \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/b><\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e \u043c\u0435\u043b\u043e\u0447\u044c, \u043d\u043e \u044f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0432\u0438\u0434\u0435\u0442\u044c \u0432 package.json \u043a\u0443\u0447\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 babel*, eslint* \u0438 webpack*, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<p>  <b>\u041b\u0438\u0448\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0438 \u043b\u0438\u0448\u043d\u0438\u0439 \u043a\u043e\u0434<\/b><\/p>\n<p>  \u042f \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e \u0447\u0438\u0441\u0442\u043e\u0442\u0443 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u041f\u043e\u0441\u043b\u0435 eject \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/tree\/master\/packages\/react-scripts\/scripts\">scripts<\/a> \u0438 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/tree\/master\/packages\/react-scripts\/config\">config<\/a>. \u0410 \u0441 \u043d\u0438\u043c\u0438 \u2014 \u043e\u043a\u043e\u043b\u043e \u0434\u0435\u0441\u044f\u0442\u0438 \u043d\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e 50\u2013200 \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c. \u041f\u0440\u0438\u0447\u0435\u043c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 eject \u0434\u0435\u043b\u0430\u044e\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u043e\u043a\u043e\u043b\u043e \u043f\u044f\u0442\u0438 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 (\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u043d\u043e\u0432\u044b\u0439 Webpack Loader).<\/p>\n<p>  <b>\u041e\u043f\u044f\u0442\u044c 25<\/b><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u044f \u0441\u0434\u0435\u043b\u0430\u044e eject \u0438 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0438, \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u043f\u0440\u0435\u0441\u0435\u0442\u044b Babel, Webpack loaders \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b) \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f Create React App<\/h3>\n<p>  <b>\u042d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 React<\/b><\/p>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Create React App \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 React. \u042f \u0438\u043c \u0434\u043e\u0432\u0435\u0440\u044f\u044e \u0438 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043e\u043d\u0438 \u0437\u043d\u0430\u044e\u0442, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044f \u0432\u0441\u0435 \u0444\u0438\u0447\u0438 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u043a\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Create React App.<\/p>\n<p>  <b>\u0412 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438 \u043b\u0438\u0448\u043d\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432<\/b><\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u043b\u044e\u0431\u043b\u044e \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u043c\u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 webpack.config, \u043d\u0435\u0442 \u043a\u0443\u0447\u0438 *rc-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 package.json.<\/p>\n<p>  <b>\u0412\u0435\u0441\u044c \u0441\u0442\u0435\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439<\/b><\/p>\n<p>  <a href=\"https:\/\/twitter.com\/dan_abramov\/status\/819634786734112768\/photo\/1?ref_src=twsrc%5Etfw&amp;ref_url=https%3A%2F%2Fdou.ua%2Flenta%2Farticles%2Fuse-create-react-app%2F\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/54c\/620\/c91\/54c620c919264301b4a8bc3d794372cf.jpg\"\/><\/a><\/p>\n<p>  <b>\u0421\u0442\u0435\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439<\/b><\/p>\n<p>  \u0412 \u0440\u0435\u043b\u0438\u0437\u0430\u0445 Create React App \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/tc39.github.io\/process-document\/\">stage-3<\/a> \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (release candidate). \u0418\u043d\u043e\u0433\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 \u0438\u0437 \u0441\u0435\u043a\u0446\u0438\u0438 draft, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 <a href=\"https:\/\/gist.github.com\/dherman\/1c97dfb25179fa34a41b5fff040f9879\">do-expressions<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/docs.google.com\/presentation\/d\/11O_wIBBbZgE1bMVRJI8kGnmC6dWCBOwutbN9SWOK0fU\/edit#slide=id.p\">null-propagation<\/a>. \u041c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/erights\/Orthogonal-Classes\">orthogonal-classes proposal<\/a>, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435 \u2014 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043b\u0443\u0447\u0448\u0430\u044f \u0438\u0434\u0435\u044f.<\/p>\n<p>  \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0447\u0438 draft \u0438 proposal, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <a href=\"https:\/\/twitter.com\/dan_abramov\/status\/818627079306694658?ref_src=twsrc%5Etfw&amp;ref_url=https%3A%2F%2Fdou.ua%2Flenta%2Farticles%2Fuse-create-react-app%2F\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/0d8\/1e4\/38e\/0d81e438e63e47d18d714e61b8579df5.jpg\"\/><\/a><\/p>\n<p>  <b>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442\u0441\u044f<\/b><\/p>\n<p>  \u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0438\u0447 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0441\u0442\u0438. \u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435, \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438\u0434\u0435\u0439 \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/670\">Plugin System<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1101\">Runtime error overlay<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/645\">A global CLI for running a single component<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1288\">Create git repository with initial commit<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1759\">Add lint-staged + husky for prettier auto-formatting on commit<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/1343\">Support different .env configs<\/a>.<\/li>\n<\/ul>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0434\u044b \u0437\u0430\u043a\u0440\u044b\u0442\u044b \u0438\u043b\u0438 \u0443\u0436\u0435 \u0443\u0448\u043b\u0438 \u0432 \u0440\u0435\u043b\u0438\u0437. \u041d\u043e \u0441\u0443\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0434\u0435\u0439 \u043c\u043d\u043e\u0433\u043e. \u0414\u0430\u0436\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f Create React App, \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/rthor\/cra-generate\">CRA generate: Scaffold a React component<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/medium.com\/@stoyanstefanov\/craft-create-react-app-from-template-7fd3383d0954\">CRAFT<\/a>.<\/p>\n<h3>\u041c\u043e\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Create React App<\/h3>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Create React App \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442 <a href=\"https:\/\/github.com\/css-modules\/css-modules\">CSS Modules<\/a>, <a href=\"http:\/\/react-toolbox.com\/#\/\">React Toolbox<\/a> \u0438 \u0435\u0449\u0435 \u043a\u043e\u0435-\u043a\u0430\u043a\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u0430 \u0431\u044b\u043b\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Webpack.<\/p>\n<p>  <i>\u041a\u0441\u0442\u0430\u0442\u0438, <a href=\"https:\/\/github.com\/react-toolbox\/react-toolbox-themr\">react-toolbox-themr<\/a> \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043b\u0435\u0433\u043a\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 React Toolbox \u0441 Create React App\u2026 \u041d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 package.json \u043d\u0435 \u043b\u0443\u0447\u0448\u0430\u044f, \u043a\u0430\u043a \u043f\u043e \u043c\u043d\u0435, \u0438\u0434\u0435\u044f.<\/i><\/p>\n<p>  \u0418 \u044f \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0435 \u0445\u043e\u0447\u0443 \u0434\u0435\u043b\u0430\u0442\u044c eject!<\/p>\n<p>  <b>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 CSS<\/b><\/p>\n<p>  \u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/blob\/master\/packages\/react-scripts\/template\/README.md#adding-a-css-preprocessor-sass-less-etc\">Adding a CSS Preprocessor (Sass, Less etc.)<\/a>, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 sass \u0438\u043b\u0438 less.<\/p>\n<p>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u2014 css modules.<\/p>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e CSS Modules \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 <a href=\"https:\/\/github.com\/threepointone\/glamor\">Glamor<\/a>, <a href=\"https:\/\/github.com\/Khan\/aphrodite\">Aphrodite<\/a>, <a href=\"https:\/\/github.com\/styled-components\/styled-components\">styled-components<\/a>, <a href=\"https:\/\/github.com\/rofrischmann\/fela\">Fela<\/a> \u0438 <a href=\"https:\/\/github.com\/cssinjs\/jss\">JSS<\/a>.<\/p>\n<p>  \u0415\u0441\u0442\u044c \u0435\u0449\u0435 <a href=\"https:\/\/github.com\/FormidableLabs\/radium\">Radium<\/a>, \u043d\u043e \u043c\u043d\u0435 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <i>style<\/i> \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0432\u043e\u0439, \u0435\u0449\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 <a href=\"https:\/\/github.com\/tuchk4\/rockey\">rockey<\/a>.<\/p>\n<p>  \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Template_literals\">Template Literals<\/a> \u0438 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f\u0441\u044c \u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u043c\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 CSS \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 styled-components, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>  <b>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u043f\u043e\u043a<\/b><\/p>\n<p>  \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439:<\/p>\n<pre><code class=\"javascript\">const dateUtils = require('..\/..\/..\/utils\/date');<\/code><\/pre>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u0432 Webpack \u044d\u0442\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 <a href=\"https:\/\/webpack.github.io\/docs\/configuration.html#resolve-modulesdirectories\">resolve.modulesDirectories<\/a>. \u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b, \u0432 CRA-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a Webpack, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0434\u0432\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c <code>node_modules<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>src<\/code> (<a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/1065\">Document src\/node_modules as official solution for absolute imports #1065<\/a>).<\/p>\n<p>  \u0414\u0440\u0443\u0433\u043e\u0439, \u0431\u043e\u043b\u0435\u0435 \u00ab\u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439\u00bb \u0441\u043f\u043e\u0441\u043e\u0431 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f <code>NODE_PATH<\/code>. \u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u2014 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Node.js <a href=\"https:\/\/nodejs.org\/api\/modules.html#modules_loading_from_the_global_folders\">Loading from the global folders<\/a>.<\/p>\n<p>  \u0421\u043e\u0432\u0435\u0442\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/kentcdodds\/cross-env\">cross-env<\/a>, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">&quot;scripts&quot;: {    &quot;start&quot;: &quot;cross-env NODE_PATH=src\/scripts react-scripts start&quot; }<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 .env-\u043a\u043e\u043d\u0444\u0438\u0433, \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>NODE_PATH<\/code>:<\/p>\n<pre><code class=\"javascript\">NODE_PATH=src\/scripts<\/code><\/pre>\n<p>  <b>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/b><\/p>\n<p>  Create React App \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 .env (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/github.com\/motdotla\/dotenv\">dotenv<\/a>-\u043f\u0430\u043a\u0435\u0442). \u041f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 .env \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 REACT_APP_. \u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u2014 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/blob\/master\/packages\/react-scripts\/template\/README.md#adding-custom-environment-variables\">Adding Custom Environment Variables<\/a> \u0438 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/blob\/master\/packages\/react-scripts\/template\/README.md#adding-development-environment-variables-in-env\">Adding Development Environment Variables In .env<\/a>.<\/p>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 .env-\u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432<\/b><\/p>\n<p>  \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043f\u043e \u0442\u0438\u043f\u0443 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f (dev\/test\/prod). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 <i>.env.development<\/i>:<\/p>\n<pre><code class=\"javascript\">REACT_APP_GOOGLE_CLIENT_ID = XXX-YYY-ZZZ.apps.googleusercontent.com REACT_APP_API_PROTOCOL = http: REACT_APP_API_HOST = localhost:3000 NODE_PATH = src\/scripts PORT = 9001<\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 <i>.env.production<\/i>:<\/p>\n<pre><code class=\"javascript\">REACT_APP_GOOGLE_CLIENT_ID = ZZZ-YYY-XXX.apps.googleusercontent.com REACT_APP_API_PROTOCOL = https: REACT_APP_API_HOST = api.my-applicaton.com NODE_PATH = src\/scripts<\/code><\/pre>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 <a href=\"https:\/\/github.com\/motdotla\/dotenv\">dotenv<\/a> \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0432 <code>npm scripts<\/code>:<\/p>\n<pre><code class=\"javascript\">&quot;scripts&quot;: {  &quot;start&quot;: &quot;node -r dotenv\/config .\/node_modules\/.bin\/react-scripts start dotenv_config_path=.env.development&quot;,  &quot;build&quot;: &quot;node -r dotenv\/config .\/node_modules\/.bin\/react-scripts build dotenv_config_path=.env.production&quot; }<\/code><\/pre>\n<p>  \u041d\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0432 \u0440\u0435\u043b\u0438\u0437 \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u043c\u043e\u0439 Pull Request \u2014 Support different env configs #1343.<\/p>\n<p>  \u041a\u0430\u043a\u0438\u0435 .env*-\u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<ul>\n<li>.env \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 (\u043e\u0431\u0449\u0438\u0439) \u043a\u043e\u043d\u0444\u0438\u0433;<\/li>\n<li>.env.development, .env.test, .env.production \u2014 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>.env.local \u2014 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0439;<\/li>\n<li>.env.development.local, .env.test.local, .env.production.local \u2014 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f. \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u044f.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432 (\u0448\u0430\u0433 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442):<\/p>\n<ul>\n<li>npm test \u2014 .env.test.local, env.test, .env.local, .env;<\/li>\n<li>npm run build \u2014 .env.production.local, env.production, .env.local, .env;<\/li>\n<li>npm start \u2014 .env.development.local, env.development, .env.local, .env.<\/li>\n<\/ul>\n<p>  <b>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0440\u0442 dev-\u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/b><\/p>\n<p>  \u041c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 3000 \u043f\u043e\u0440\u0442\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 Google Auth, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u0431\u044b\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 localhost \u043f\u043e\u0440\u0442\u044b 9001\u20139005. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Google Auth, \u043d\u043e \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u043f\u043e\u0440\u0442\u044b.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f <code>PORT<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/kentcdodds\/cross-env\">cross-env<\/a>:<\/p>\n<pre><code class=\"javascript\">&quot;scripts&quot;: {  &quot;start&quot;: &quot;cross-env PORT=9001 react-scripts start&quot; }<\/code><\/pre>\n<p>  \u0438\u043b\u0438 .env-\u043a\u043e\u043d\u0444\u0438\u0433\u0430:<\/p>\n<pre><code class=\"javascript\">PORT=9001<\/code><\/pre>\n<p>  <b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f<\/b><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/cc8\/525\/7fa\/cc85257faece41e1bacc7e90498917c2.jpg\"\/><\/p>\n<p>  <b>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 Webpack: \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430<\/b><\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0434\u0432\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043c\u043d\u0435 \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c:<\/p>\n<ol>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c <a href=\"https:\/\/github.com\/NekR\/offline-plugin\">Webpack Offline Plugin<\/a>.<\/li>\n<li>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u0434\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/li>\n<\/ol>\n<p>  \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0431\u0435\u0437 eject \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u041d\u043e \u0432\u044b\u0445\u043e\u0434 \u0435\u0441\u0442\u044c. \u042f \u043d\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u0442\u0430\u043a \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f \u0441 \u043b\u044e\u0431\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439.<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 <code>npm-scripts build:custom<\/code>:<\/p>\n<pre><code class=\"javascript\">&quot;scripts&quot;: {  &quot;build:custom&quot;: &quot;node scripts\/customBuild.js&quot; }<\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 <code>scripts\/customBuild.js<\/code>:<\/p>\n<pre><code class=\"javascript\">const webpack = require('react-scripts\/node_modules\/webpack'); const craWebpackConfig = require('react-scripts\/config\/webpack.config.prod'); const OfflinePlugin = require('offline-plugin');  const config = {   ...craWebpackConfig,   plugins: [      ...craWebpackConfig.plugins,      new OfflinePlugin()   ] };  webpack(config).run(function(err, stats) {   if (err !== null) {     console.log('done');   } else {     console.log(err);   } });<\/code><\/pre>\n<p>  <i>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0444\u0438\u0433 Webpack, \u0430 \u043d\u0435 react-scripts build. \u041d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u043b\u043e\u0433\u043e\u0432, \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0431\u0438\u043b\u0434\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0438\u0447.<\/i><\/p>\n<p>  \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432 (\u0432\u0440\u043e\u0434\u0435 yaml, markdown, dsv loaders \u0438 \u0442. \u0434.) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0418 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0434\u0430\u0436\u0435 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u043b\u0438\u0437 Webpack.<\/p>\n<p>  <i>\u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043d\u0435 \u043b\u044e\u0431\u043b\u044e \u0434\u0430\u0436\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 css-loaders \u0434\u043b\u044f Webpack. \u0412\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e js- \u0438\u043b\u0438 json-\u043c\u043e\u0434\u0443\u043b\u0438. CSS-\u0444\u0430\u0439\u043b\u044b \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 Webpack \u043f\u043e\u043b\u044f entry. \u0421\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 require. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/i><\/p>\n<p>  <b>Babel presets and plugins<\/b><\/p>\n<p>  Create React App \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 babel-\u043a\u043e\u043d\u0444\u0438\u0433\u0430. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/blob\/master\/packages\/react-scripts\/template\/README.md#can-i-use-decorators\">\u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f<\/a>.<\/p>\n<p>  \u042f \u0434\u0430\u0436\u0435 \u0434\u0435\u043b\u0430\u043b <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1357\">Pull Request: Adding support for custom babel configuration #1357<\/a>. \u041d\u043e \u0435\u0433\u043e \u0443\u0436\u0435 \u0437\u0430\u043a\u0440\u044b\u043b\u0438, \u0438 \u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 Create React App: \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0443\u0447\u0435\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n<p>  \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0442 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0438 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/214#issuecomment-236151343\">\u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u043d\u0438\u0445<\/a>, \u0438 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u0432 stage 3, \u043e\u043d\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <a href=\"https:\/\/twitter.com\/dan_abramov\/status\/818626114037968899?ref_src=twsrc%5Etfw&amp;ref_url=https%3A%2F%2Fdou.ua%2Flenta%2Farticles%2Fuse-create-react-app%2F\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/96e\/13d\/e40\/96e13de40c384f5396cf30ec34aed328.jpg\"\/><\/a><\/p>\n<p>  <b>React scripts<\/b><\/p>\n<p>  \u0424\u0438\u0447\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442. \u0427\u0443\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0442\u0440\u0435\u0434\u0435 \u043d\u0430 github \u2014 <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/issues\/682\">Document maintaining a fork of react-scripts as an alternative to ejecting. #682<\/a>.<\/p>\n<p>  <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/tree\/master\/packages\/react-scripts\">React scripts<\/a> \u2014 \u043f\u0430\u043a\u0435\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b (start\/test\/build) \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0440\u043a, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0432\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<pre><code class=\"javascript\">create-react-app my-app --scripts-version my-super-react-scripts,<\/code><\/pre>\n<p>  \u0433\u0434\u0435 <code>my-super-react-scripts<\/code> \u2014 \u0432\u0430\u0448\u0430 \u0432\u0435\u0440\u0441\u0438\u044f react-scripts.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/kitze\/custom-react-scripts\">custom-react-scripts<\/a> \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u0432, babel-preset-stage-0, LESS \/ SASS, CSS Modules (\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/medium.com\/@kitze\/configure-create-react-app-without-ejecting-d8450e96196a\">Configure create-react-app without ejecting<\/a>).<\/p>\n<p>  <b>Awesome Create React App<\/b><\/p>\n<p>  <a href=\"https:\/\/github.com\/tuchk4\/awesome-create-react-app\">Awesome Create React App<\/a> \u2014 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432, \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0445 \u0444\u0438\u0447 \u0438 FAQ. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 react-scripts \u0432\u0435\u0440\u0441\u0438\u0439.<\/p>\n<p>  <b>\u0421\u043f\u0438\u0441\u043e\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0445 \u0444\u0438\u0447 \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 0.10.0<\/b><\/p>\n<p>  <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1101\">Runtime error overlay #1101<\/a><\/p>\n<p>  \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0430\u043b\u043e\u0433 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u0440\u0430\u043d\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0444\u0438\u0447\u0443, \u2014 Syntax error overlay. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435, \u0441\u0442\u0435\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u043a\u043e\u0434\u0430, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430. \u0414\u0438\u0430\u043b\u043e\u0433 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043a\u0440\u044b\u0442 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 Escape. \u041e\u0448\u0438\u0431\u043a\u0430, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u0435\u0435, \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/fa7\/f6a\/5f2\/fa7f6a5f2b9f4ea9bebceab5507884fa.jpg\"\/><\/p>\n<p>  <b>Upgrade to webpack v2 #1291<\/b><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c Create React App \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e react-scripts (<a href=\"https:\/\/twitter.com\/dan_abramov\/status\/819634786734112768\">twitter.com\/\u2026\u200bstatus\/819634786734112768<\/a>) \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0447\u0438\u0442\u0430\u0442\u044c \u0433\u0430\u0439\u0434\u044b \u043f\u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 Webpack 1 \u043d\u0430 Webpack 2. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e Webpack 2 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/medium.com\/webpack\/webpack-2-and-beyond-40520af9067f\">Webpack 2 and beyond<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/gist.github.com\/sokra\/27b24881210b56bbaff7\">What\u2019s new in webpack 2<\/a>.<\/p>\n<p>  <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1538\">Dynamic import support #1538<\/a><\/p>\n<p>  \u041e\u0447\u0435\u043d\u044c \u043a\u043b\u0435\u0432\u0430\u044f \u0444\u0438\u0447\u0430 \u0434\u043b\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0420\u0430\u043d\u0435\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f require.ensure.<\/p>\n<pre><code class=\"javascript\">import('.\/path\/to\/module).then(module =&gt; {   \/\/ module.default });<\/code><\/pre>\n<p>  <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1759\">Add lint-staged + husky for prettier auto-formatting on commit #1759<\/a><\/p>\n<p>  \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 eslint \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0438\u043d\u0434\u0435\u043a\u0441\u0435 \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e prettier \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u043c.<\/p>\n<p>  \u041f\u043e\u043a\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0444\u0438\u0447\u0430 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e Create React App, \u043d\u043e \u044f \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044f\u0442 \u0432 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e71\/434\/2a7\/e714342a756a47ee9fc62ed543a9bd3c.gif\"\/><\/p>\n<p>  \u0418 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u0440\u0443\u0442\u044b\u0445 \u0444\u0438\u0447:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1590\">Support node scripts in BROWSER #1590<\/a> \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043b\u044e\u0431\u043e\u0439 nodejs \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u0430;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1344\">Support multiple .env configs #1344<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\/pull\/1546\">Enable page reloading for files in public\/ #1546<\/a> \u0438 \u0442. \u0434.<\/li>\n<\/ul>\n<p>  <b>\u041a\u043e\u043d\u0435\u0446<\/b><\/p>\n<p>  \u041d\u0443\u0436\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u00ab\u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438\u00bb \u043a\u0430\u043a \u043a \u0444\u0438\u0447\u0435 \u0438 \u043d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435 \u043a\u0430\u043a \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442, \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0414\u0435\u043b\u0430\u044f eject (\u043b\u0438\u0431\u043e \u043f\u0440\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438), \u0432\u044b \u0436\u0435\u0440\u0442\u0432\u0443\u0435\u0442\u0435 \u0432\u0441\u0435\u043c\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 CRA (\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 \u0438\u0437 \u043d\u043e\u0432\u044b\u0445 \u0440\u0435\u043b\u0438\u0437\u043e\u0432) \u0440\u0430\u0434\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0438\u043b\u0438 \u0435\u0449\u0435 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043c\u0435\u043b\u043e\u0447\u044c.<\/p>\n<p>  \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Webpack, Babel \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 Create React App \u0441\u0434\u0435\u043b\u0430\u043b\u043e \u0431\u044b Create React App \u0431\u043e\u043b\u0435\u0435 \u0445\u0440\u0443\u043f\u043a\u0438\u043c. \u0418 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Create React App \u043d\u0435 \u0441\u043c\u043e\u0433\u043b\u0430 \u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0441\u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u0431\u044b \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 Create React App Issues, \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 Create React App.<br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/326520\/\"> https:\/\/habrahabr.ru\/post\/326520\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6e5\/120\/ce3\/6e5120ce36be4f4b8103ad47b8df703d.jpg\"\/><\/p>\n<p>  Create React App \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412\u044b \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 Webpack, Babel \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u044b, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u0434\u0435 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-285014","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=285014"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/285014\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=285014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=285014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=285014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}