{"id":315585,"date":"2020-12-26T15:00:36","date_gmt":"2020-12-26T15:00:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=315585"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=315585","title":{"rendered":"\u0427\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f React-\u043f\u0440\u043e\u0435\u043a\u0442\u0430"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u0441\u044e\u0448\u0430 \u041b\u0443\u0433\u043e\u0432\u0430\u044f. \u0412 \u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441\u0435 \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Korus-UI.&nbsp;<\/p>\n<p>\u0421 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0438 \u043f\u043e\u0440\u043e\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u043c. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u0447\u0435\u043c&nbsp;\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0440\u044b\u043d\u043e\u043a, \u043a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0438\u0445 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b? \u041e\u0431\u0437\u043e\u0440\u044b \u0438 \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 \u043c\u0438\u0440\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043d\u0430 \u0432\u0441\u0435 \u0441\u043b\u0443\u0447\u0430\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432&nbsp;\u0441\u0442\u0430\u0442\u044c\u0435 \u044f&nbsp;\u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0440\u0435\u0448\u0430\u0435\u043c \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f&nbsp;\u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.&nbsp;<\/p>\n<h3>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h3>\n<p><strong>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <\/strong>\u042d\u0442\u043e \u0437\u0432\u0443\u0447\u0438\u0442 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043d\u043e \u0447\u0435\u0442\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u2014 \u043f\u0435\u0440\u0432\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u044b\u0439 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0439 \u0432\u044b\u0431\u043e\u0440\u0430.<\/p>\n<p><strong>\u0422\u0438\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/strong> \u041e\u0442 \u0442\u0438\u043f\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442, \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f. \u0427\u0430\u0441\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u043d\u043e\u043f\u043e\u043a\/\u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432, \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430, \u0441\u043f\u0438\u0441\u043a\u043e\u0432\/\u043c\u0435\u043d\u044e \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0417\u043d\u0430\u0447\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/p>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435.<\/strong> \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0432\u0430\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0442\u043a\u043e \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043e\u0442\u0432\u0435\u0442\u044c\u0442\u0435 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e \u043b\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0435\u0441\u0442\u044c \u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442?<\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 issues \u0438 \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f?<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043a\u0440\u044b\u0442 \u043b\u0438 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0435\u0441\u0442\u0430\u043c\u0438?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430?<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043d\u0443\u0436\u0434\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0445 \u0431\u0430\u0433\u043e\u0432 \u2014 \u0432\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.&nbsp;<\/p>\n<p>\u042f \u043e\u0442\u043e\u0431\u0440\u0430\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u043e \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c:<\/p>\n<ul>\n<li>\n<p>Material-UI,<\/p>\n<\/li>\n<li>\n<p>Semantic-UI-React,<\/p>\n<\/li>\n<li>\n<p>yandex-ui,<\/p>\n<\/li>\n<li>\n<p>arui-feather,<\/p>\n<\/li>\n<li>\n<p>Korus-UI.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0432 \u044d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435&nbsp; \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u2013 Material-UI \u0438 Semantic-UI-React, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043e\u0434\u043d\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0438 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043e\u0431\u0440\u043e\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.<\/p>\n<p>\u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 (\u042f\u043d\u0434\u0435\u043a\u0441, \u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a) \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043e\u0431\u0440\u0435\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 opensource \u0440\u0435\u0448\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u0440\u0430\u0437\u0440\u0435\u0437\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u0432.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u0441\u043e\u0441\u0442\u0430\u0432<\/h3>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2014 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438 \u043b\u0435\u0433\u043a\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0443\u043f\u043f.<\/p>\n<p><strong>Layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong>&nbsp;<\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0433\u0440\u0438\u0434\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0435. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u0442\u043e\u043b\u044c\u043a\u043e props.children;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:&nbsp; h1, section, div, span, Icon, Avatar.<\/p>\n<\/li>\n<\/ul>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u043d\u0435&nbsp;\u043d\u0443\u0436\u043d\u0430 \u0441\u0432\u043e\u044f \u0442\u0435\u043c\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Material-UI \u0438&nbsp; Semantic-UI \u043c\u043e\u0433\u0443\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441&nbsp;\u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441\u0432\u043e\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438&nbsp;\u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439.<\/p>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b (controls)<\/strong><\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438, \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b, \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b \u2014 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u00ab\u043e\u0436\u0438\u0432\u0438\u0442\u044c\u00bb \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441&nbsp;\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.&nbsp;<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <em>props;<\/em><\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 UI (disabled, required, isLoading).<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>\u042d\u0442\u043e \u0433\u0440\u0443\u043f\u043f\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043e\u043d\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c.&nbsp;<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0418\u043c\u0435\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c (\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f, \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u044b\u0432\u043e\u0434\u0430, \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435);<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Layout<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Controls<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Modules<\/p>\n<\/td>\n<td>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>Material-UI<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>App Bar, Avatars, Badges, Bottom Navigation, Divider, Grid List, Lists, Paper, Progress, Snackbar, Tables,&nbsp;<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Button, Chip, Selection Controls, Text Fields, Pickers*<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Dialog, Cards, Drawers, ExpansionPanel, Menu, Stepper, Tabs, Tooltip<\/p>\n<\/td>\n<td>\n<p>26**<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>Semantic-UI-React<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Container, Divider, Flag, Header, Icon, Image, Label, List, Loader, Placeholder, Rail, Reveal, Segment, Step, Breadcrumb, Form, Grid, Menu, Message, Table, Advertisement, Card, Comment, Feed, Item, Statistic<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Button, Input, Checkbox, Radio, Select, Text Area<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Accordion, Dimmer, Dropdown, Embed, Modal, Popup, Progress, Rating, Search, Sidebar, Sticky, Tab, Transition, Visibility, Confirm, Pagination, Portal, Ref, Transitionable Portal<\/p>\n<\/td>\n<td>\n<p>52<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>yandex-ui<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Badge, Divider, Icon, Image, Text, UserPic, ListTile, Spacer, Link, Spin<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Attach, Button, Checkbox, Menu, Radiobox, RadioButton, Select, Slider, Textarea, Textinput, Tumbler<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>TabsMenu, Drawer, Dropdown, Messagebox, Modal, Popup, TabsPanes, Tooltip, Progress&nbsp;<\/p>\n<\/td>\n<td>\n<p>30<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>arui-feather<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Amount, CardImage, FlagIcon, Form, GridRow, GridCol, Heading, Icon, InputGroup, Label, Link, List, Paragraph, Spin<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Attach, Button, CardInput, CheckBoxGroup, CheckBox, FormField, IconButton, Input, RadioGroup, Radio, Select, TagButton, Textarea, Toggle<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>CalendatInput, Calendar, Collapse, EmailInput, InputAutocomplete, IntlPhoneInput, Menu, MoneyInput, Notification, PhoneInput, Plate, Popup, ProgressBar, Sidebar, SlideDown, Tabs<\/p>\n<\/td>\n<td>\n<p>44<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>Korus-UI<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>HTML tags factory***<strong><em>,<\/em><\/strong><\/p>\n<p>Currency, Tags<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Button, Checkbox, Input,&nbsp; Radio, Rating, Slider, Switcher, Textarea<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Autocomplete, ButtonGroup, Collapse, Collapsible,&nbsp;<\/p>\n<p>DatePicker, DateRange, DateTimePicker, DateTimeRange, Dropdown, DropdownLink, DropdownSelect, Dropzone, FileDrop, FileUpload, Loader, MaskedInput, Modal, MultiSelect, Notifications, NumericRange, NumericTextBox, Pagination, Password, ProgressBar, StatusBar, StickyPanel, Tabs, TimePicker, TimeRange, Tooltip, Tour,&nbsp; Validation, VStepper, Wizard, form<\/p>\n<\/td>\n<td>\n<p>45<\/p>\n<p>+ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 HTML-\u0442\u0435\u0433\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><em>*Material-UI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u0430\u0442\u044b<\/em><\/p>\n<p><em>**\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/em><\/p>\n<p><em>***Korus-UI \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 HTML-\u0442\u0435\u0433\u043e\u0432 c \u0435\u0434\u0438\u043d\u044b\u043c API<\/em><\/p>\n<p>\u041f\u043e\u0447\u0442\u0438 50% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u0430 Material-UI \u0438 Semantic-UI-React \u0438 \u043e\u043a\u043e\u043b\u043e 30% \u0432&nbsp;\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 yandex-ui \u0438 arui-feather \u2014 \u043c\u0430\u043b\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0412&nbsp;Korus-UI \u0431\u043e\u043b\u0435\u0435 70% \u2014 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<h3>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0441\u0438\u043b \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u0421\u0440\u0430\u0432\u043d\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445.<\/p>\n<p><strong>Material-UI<\/strong><\/p>\n<ul>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MuiThemeProvider. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u043c\u043e\u0439 \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 className.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c classes.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0437\u0430\u0442\u043e\u0447\u0435\u043d\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CSS-in-Js, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432 CSS-\u0444\u0430\u0439\u043b\u0430\u0445. \u0414\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 CSS-in-Js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/material-ui.com\/ru\/customization\/components\/\" rel=\"noopener noreferrer nofollow\"><u>HOC withStyles()<\/u><\/a> \u043b\u0438\u0431\u043e \u0445\u0443\u043a <a href=\"https:\/\/material-ui.com\/ru\/styles\/advanced\/#makestyles\" rel=\"noopener noreferrer nofollow\"><u>makeStyles()<\/u><\/a> \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p><strong>Semantic-UI-React<\/strong><\/p>\n<p>\u0423 Semantic-UI-React \u043d\u0435\u0442 \u0441\u0432\u043e\u0435\u0439 \u0442\u0435\u043c\u044b, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438&nbsp; <a href=\"https:\/\/semantic-ui.com\/usage\/theming.html\" rel=\"noopener noreferrer nofollow\"><u>Semantic-UI<\/u><\/a>.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0442\u0435\u043c\u044b \u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.&nbsp;<\/p>\n<p>\u042d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/globals\/site.variables\" rel=\"noopener noreferrer nofollow\"><u>site.variables<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/collections\/menu.overrides\" rel=\"noopener noreferrer nofollow\"><u>css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/u><\/a> ;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/theme.config\" rel=\"noopener noreferrer nofollow\"><u>theme.config<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/elements\/icon.variables\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0443\u0442\u0438<\/u><\/a> \u043a assets \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/elements\/icon.overrides\" rel=\"noopener noreferrer nofollow\"><u>\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430<\/u><\/a>.<\/p>\n<\/li>\n<\/ul>\n<p><strong>yandex-ui<\/strong><\/p>\n<p>\u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432 \u0441 \u0442\u0435\u043c\u0430\u043c\u0438. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/bem\/themekit\" rel=\"noopener noreferrer nofollow\"><u>\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 themekit<\/u><\/a>;&nbsp;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0442\u043e\u043a\u0435\u043d\u044b) \u0432 \u0442\u0435\u043c\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 yaml \u0438\u043b\u0438 json. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b (css, json, js, ios, android) \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<\/li>\n<\/ul>\n<p><strong>arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a)<\/strong><\/p>\n<p>\u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a\u0430 \u043d\u0435\u0442 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.&nbsp; \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 className, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0445 \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c.<\/p>\n<p><strong>Korus-UI (\u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441)<\/strong><\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 LedaProvider. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u043c\u043e\u0439 \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e\u0434 \u0438\u043c\u0435\u044e\u0449\u0443\u044e\u0441\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0443. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432&nbsp; \u0432&nbsp;\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 API-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (<a href=\"https:\/\/opensource.esphere.ru\/korus-ui\/?path=\/story\/basics-%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F--%D0%BF%D0%B5%D1%80%D0%B5%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-css-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u043c.&nbsp;\u0430\u0442\u0440\u0438\u0431\u0443\u0442 theme<\/u><\/a>). \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e.<strong>&nbsp;<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430&nbsp;\u043d\u043e\u0432\u044b\u0439 (\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Loader \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u0430).<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>Material-UI<\/strong><\/p>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/material-ui.com\/guides\/composition\/\" rel=\"noopener noreferrer nofollow\"><u>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 component<\/u><\/a>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 List \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 <code>&lt;ul&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438\u043b\u0438 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">&lt;List component=\"nav\"&gt;   &lt;ListItem button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;ListItemText primary=\"Trash\" \/&gt; &nbsp;&nbsp;&lt;\/ListItem&gt; &nbsp;&nbsp;&lt;ListItem button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;ListItemText primary=\"Spam\" \/&gt; &nbsp;&nbsp;&lt;\/ListItem&gt; &lt;\/List&gt;<\/code><\/pre>\n<\/p>\n<p><strong>Semantic-UI<\/strong><\/p>\n<p>Semantic-UI-React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0441\u0445\u043e\u0436\u0438\u0439 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 <a href=\"https:\/\/react.semantic-ui.com\/augmentation\" rel=\"noopener noreferrer nofollow\"><u>\u0430\u0442\u0440\u0438\u0431\u0443\u0442 as<\/u><\/a>:<\/p>\n<pre><code class=\"javascript\">&lt;Button as='a' \/&gt;<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0412\u0441\u0435 \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432.<\/p>\n<p><strong>yandex-ui<\/strong><\/p>\n<p>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/bem\/yandex-ui\/tree\/master\/src\/lib\/render-override\" rel=\"noopener noreferrer nofollow\"><u>render-override<\/u><\/a>.&nbsp; \u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0445\u0443\u043a\u043e\u0432 \u0438&nbsp;\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.&nbsp;<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { useRenderOverride } from '@yandex\/ui\/lib\/render-override'  const ElementOriginal = ({ children }) =&gt; &lt;div&gt;{children}&lt;\/div&gt; const MyComponent = ({ renderElement }) =&gt; {   const Element = useRenderOverride(ElementOriginal, renderElement) &nbsp; return ( &nbsp;&nbsp;&nbsp; &lt;&gt; &nbsp;&nbsp;&nbsp;   &lt;Element \/&gt; &nbsp;   &lt;\/&gt;   ) }<\/code><\/pre>\n<\/p>\n<p>\u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 yandex-ui \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435&nbsp;\u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430.<\/p>\n<p><strong>arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a)<\/strong><\/p>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430.<\/p>\n<p><strong>Korus-UI<\/strong><\/p>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/opensource.esphere.ru\/korus-ui\/?path=\/story\/basics-%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F--%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e API<\/u><\/a>. \u041d\u0430&nbsp;\u0432\u0445\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u0430 Render. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439.<\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">labelRender={() =&gt; &lt;MyCustomLabel \/&gt;}<\/code><\/pre>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0433\u0438\u0431\u043a\u043e:<\/p>\n<pre><code class=\"javascript\">({ Element, elementProps, componentProps, componentState }) =&gt; React.Node<\/code><\/pre>\n<ul>\n<li>\n<p><code>Element<\/code> &#8212; \u0441\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p><code>elementProps<\/code> &#8212; props \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><code>componentState<\/code>, <code>componentProps<\/code> &#8212; \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 props \u0438 state \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b \u043d\u0430 \u0432\u0445\u043e\u0434 \u0442\u0435 \u0436\u0435 \u043f\u0440\u043e\u043f\u0441\u044b, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">&lt;L.CheckBox   labelRender={({ elementProps }) =&gt; &lt;MyCustomLabel {\u2026elementProps} \/&gt;} &gt;   Label &lt;\/L.CheckBox&gt;<\/code><\/pre>\n<h3>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>\u0414\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 React-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f 2 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>Typescript<\/p>\n<\/li>\n<li>\n<p>PropTypes<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 React \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435 <a href=\"https:\/\/ru.reactjs.org\/docs\/static-type-checking.html\" rel=\"noopener noreferrer nofollow\"><u>Typescript<\/u><\/a>. \u042d\u0442\u043e&nbsp;\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a \u0435\u0449\u0435 \u0434\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u0423 PropTypes \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043a\u043e\u0434\u0430 \u2014 \u044d\u0442\u043e&nbsp;\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>\u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Typescript. \u0423&nbsp;Semantic-UI \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c JS, \u0430 Typescript \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Semantic-UI-React, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 React.<\/p>\n<h3>\u041f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438<\/h3>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u2014&nbsp;\u0432\u0430\u0436\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u0434\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0438, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0435\u0442. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441&nbsp;\u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a&nbsp;\u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0442\u0440\u0443\u0434\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>\u0420\u0430\u0434\u0438 \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u0438 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0441\u0442\u044b \u2014 \u043d\u0435 \u043f\u0430\u043d\u0430\u0446\u0435\u044f. \u0412\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u0441\u0442\u0430 \u0438 \u043e\u0445\u0432\u0430\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432.<\/p>\n<p>\u041d\u043e \u0431\u0435\u0437 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435) \u0438 \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u043e\u043e\u0431\u0449\u0435 (\u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435).<\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<\/td>\n<td>\n<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b&nbsp;<\/p>\n<\/td>\n<td>\n<p>\u0422\u0438\u043f\u044b \u0442\u0435\u0441\u0442\u043e\u0432<\/p>\n<\/td>\n<td>\n<p>% \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Material-UI<\/p>\n<\/td>\n<td>\n<p>Chai, Mocha, Sinon<\/p>\n<\/td>\n<td>\n<p>Unit<\/p>\n<\/td>\n<td>\n<p><strong>95.28%<\/strong> Statements<\/p>\n<p><strong>87.22%<\/strong> Branches<\/p>\n<p><strong>97.51%<\/strong> Functions<\/p>\n<p><strong>95.26%<\/strong> Lines<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Semantic-UI<\/p>\n<\/td>\n<td>\n<p>Jasmine, Karma<\/p>\n<\/td>\n<td>\n<p>Unit<\/p>\n<\/td>\n<td>\n<p>\u041e\u0442\u0447\u0435\u0442 \u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Semantic-UI-React<\/p>\n<\/td>\n<td>\n<p>Chai, Enzyme<\/p>\n<\/td>\n<td>\n<p>Unit<\/p>\n<\/td>\n<td>\n<p>\u041e\u0442\u0447\u0435\u0442 \u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>yandex-ui<\/p>\n<\/td>\n<td>\n<p>Jest, Enzyme<\/p>\n<\/td>\n<td>\n<p>Unit<\/p>\n<\/td>\n<td>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u043e\u0432 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0435<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>arui-feather<\/p>\n<\/td>\n<td>\n<p>Jest, Enzyme<\/p>\n<\/td>\n<td>\n<p>Unit<\/p>\n<\/td>\n<td>\n<p><strong>88.1% <\/strong>Statements<\/p>\n<p><strong>73.84% <\/strong>Branches<\/p>\n<p><strong>66.61% <\/strong>Functions<\/p>\n<p><strong>87.19% <\/strong>Lines<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Korus-UI<\/p>\n<\/td>\n<td>\n<p>Cypress, Jest<\/p>\n<\/td>\n<td>\n<p>Unit, end-to-end<\/p>\n<\/td>\n<td>\n<p><strong>69.28% <\/strong>Statements<\/p>\n<p><strong>56.14% <\/strong>Branches<\/p>\n<p><strong>66.29% <\/strong>Functions<\/p>\n<p><strong>71.78% <\/strong>Lines<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/h3>\n<p>\u041a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. Storybook \u0441 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<\/td>\n<td>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/p>\n<\/td>\n<td>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432<\/p>\n<\/td>\n<td>\n<p>Storybook<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Material-UI<\/p>\n<\/td>\n<td>\n<p>https:\/\/material-ui.com\/ru\/<\/p>\n<\/td>\n<td>\n<p>&#8212;<\/p>\n<\/td>\n<td>\n<p>&#8212;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Semantic-UI-React<\/p>\n<\/td>\n<td>\n<p>https:\/\/react.semantic-ui.com\/<\/p>\n<\/td>\n<td>\n<p>+<\/p>\n<\/td>\n<td>\n<p>&#8212;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>yandex-ui<\/p>\n<\/td>\n<td>\n<p>https:\/\/yastatic.net\/s3\/frontend\/lego\/storybook\/index.html<\/p>\n<\/td>\n<td>\n<p>&#8212;<\/p>\n<\/td>\n<td>\n<p>+<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>arui-feather<\/p>\n<\/td>\n<td>\n<p>https:\/\/digital.alfabank.ru\/<\/p>\n<\/td>\n<td>\n<p>+<\/p>\n<\/td>\n<td>\n<p>&#8212;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Korus-UI<\/p>\n<\/td>\n<td>\n<p>https:\/\/opensource.esphere.ru\/korus-ui\/<\/p>\n<\/td>\n<td>\n<p>+<\/p>\n<\/td>\n<td>\n<p>+<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/h3>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u043f\u043e\u043c\u043e\u0449\u0438. \u041d\u0443\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a \u0435\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c.<\/p>\n<p>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u043d\u0435\u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u0430. \u0415\u0441\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043c\u043e\u0449\u044c \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u0432\u043d\u043e\u0441\u044f\u0449\u0438\u0445 \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434 \u0432&nbsp;\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439: \u043d\u0430 \u0432\u0430\u0448\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u043b\u0438 \u043d\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442.&nbsp;<\/p>\n<p>\u041f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0432\u044b\u0438\u0433\u0440\u044b\u0448\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0423&nbsp;\u043d\u0438\u0445&nbsp;\u0435\u0441\u0442\u044c \u0442\u0435\u0445\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u0448\u0430\u043d\u0441\u043e\u0432 \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e. \u041f\u0440\u0430\u0432\u043a\u0438 \u043e\u0442 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u043f\u043e&nbsp;\u0433\u0440\u0430\u0444\u0438\u043a\u0443, \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0432 \u0440\u0435\u043b\u0438\u0437\u043d\u043e\u0439 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0435, \u0430&nbsp;\u043e\u0442\u0432\u0435\u0442\u044b \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0430\u044e\u0442 \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Pulse \u043d\u0430 GitHub \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u043e\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 Pull Request \u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430&nbsp;\u0432\u043a\u043b\u0430\u0434\u043a\u0435 Insights \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u043f\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c.<\/p>\n<p><em>Material-UI<\/em><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/e5\/fp\/d0\/e5fpd0qllq8u6s-wilbg91dxqty.png\" width=\"1255\" height=\"403\"><figcaption><\/figcaption><\/figure>\n<p><em>Semantic-UI<\/em><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2e\/to\/m1\/2etom1mxwjdscp-fjlmkrnvtuik.png\" width=\"1255\" height=\"395\"><figcaption><\/figcaption><\/figure>\n<p><em>yandex-ui<\/em><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mi\/ra\/kc\/mirakcqwg5cyjpwktwtllzpds_e.png\" width=\"1255\" height=\"414\"><figcaption><\/figcaption><\/figure>\n<p><em>&nbsp;arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a)<\/em><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ac\/w-\/pe\/acw-pej8ech22lqxry1-bxvanlc.png\" width=\"1255\" height=\"392\"><figcaption><\/figcaption><\/figure>\n<p><em>&nbsp;Korus-UI (\u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441)<\/em><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/1x\/jx\/qc\/1xjxqckjvzeihiyzr_knmi1bwhm.png\" width=\"1255\" height=\"395\"><figcaption><\/figcaption><\/figure>\n<h3>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u043f\u043e \u0437\u0432\u0435\u0437\u0434\u0430\u043c \u043d\u0430 GitHub \u0438&nbsp;\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439 npm-\u043f\u0430\u043a\u0435\u0442\u0430. \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c, \u043e\u043d\u0438&nbsp;\u0441\u0432\u0438\u0434\u0435\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0443\u044e\u0442 \u043e&nbsp;\u0434\u043e\u0432\u0435\u0440\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0435\u0435&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u0438\u0441\u043a \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.&nbsp;<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0438 SEO-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u0435\u0440\u0432\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0432\u044b\u0434\u0430\u0447\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u0432 \u0431\u043b\u043e\u0433\u0430\u0445 \u0438&nbsp;\u043d\u0430&nbsp;\u0444\u043e\u0440\u0443\u043c\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 <a href=\"https:\/\/stackoverflow.com\/\" rel=\"noopener noreferrer nofollow\"><u>Stackoverflow<\/u><\/a>, <a href=\"https:\/\/medium.com\/\" rel=\"noopener noreferrer nofollow\"><u>Medium<\/u><\/a>, <a href=\"https:\/\/dev.to\/\" rel=\"noopener noreferrer nofollow\"><u>DEV<\/u><\/a>. \u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432&nbsp;\u0440\u0430\u0437\u0434\u0435\u043b\u0435 issues \u043f\u0440\u043e\u0435\u043a\u0442\u0430.&nbsp;<\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0437&nbsp;\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c\u0441\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u043e\u0446\u0435\u043d\u043a\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0446\u0435\u043d\u0438\u043c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0437\u044b\u0432\u043e\u0432 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439.<\/p>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<\/td>\n<td>\n<p>\u0417\u0432\u0435\u0437\u0434\u044b<\/p>\n<\/td>\n<td>\n<p>\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u043e\u0434<\/p>\n<\/td>\n<td>\n<p>\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0432\u0435\u0437\u0434 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u043e\u0434,&nbsp; %&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Material-UI<\/p>\n<\/td>\n<td>\n<p>63 400<\/p>\n<\/td>\n<td>\n<p>6 372 353<\/p>\n<\/td>\n<td>\n<p>0,99<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Semantic-UI<\/p>\n<\/td>\n<td>\n<p>48 800<\/p>\n<\/td>\n<td>\n<p>541 299<\/p>\n<\/td>\n<td>\n<p>9<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Semantic-UI-React<\/p>\n<\/td>\n<td>\n<p>11 900<\/p>\n<\/td>\n<td>\n<p>8 620 967<\/p>\n<\/td>\n<td>\n<p>0,14<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>@yandex\/ui<\/p>\n<\/td>\n<td>\n<p>212<\/p>\n<\/td>\n<td>\n<p>15 902<\/p>\n<\/td>\n<td>\n<p>1,33<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a)<\/p>\n<\/td>\n<td>\n<p>559<\/p>\n<\/td>\n<td>\n<p>26 744<\/p>\n<\/td>\n<td>\n<p>2<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>\u0424\u043e\u0440\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u0432\u043e \u0432\u0441\u0435\u0445<strong> <\/strong>\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445. \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u0435\u043d\u0434\u0438\u043d\u0433, \u043d\u0430 \u043d\u0435\u043c \u0441\u043a\u043e\u0440\u0435\u0435, \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442, \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438. \u0412 \u0441\u043b\u043e\u0436\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u043e\u0440\u043c, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0444\u043e\u0440\u043c\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438.&nbsp;<\/p>\n<p>\u041f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u043e\u0442 \u0432\u0432\u043e\u0434\u0430 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u043e\u043b\u043e\u0442\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.&nbsp;<\/p>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043d\u0435\u043f\u0443\u0441\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c). \u0418\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 (\u043a\u0440\u043e\u0441\u0441-\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f), \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u043e\u043b\u0435 \u0444\u043e\u0440\u043c\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u044f\u0445.<\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430: \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u0434\u0432\u0443\u043c\u044f \u043f\u043e\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f \u0438&nbsp;\u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b. \u041f\u043e\u043b\u044f \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u043b\u043e\u0441\u044c, \u0430 \u0442\u0435\u043a\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u043a\u0430\u043a \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430, \u0442\u0430\u043a \u0438 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u00bb.<\/p>\n<p><strong>Korus-UI<\/strong><\/p>\n<p><iframe id=\"5fe44dee05d782142ffea555\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fe44dee05d782142ffea555\" class=\"embed_video embed__content\"><\/iframe><\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const BasicForm = () =&gt; (   &lt;L.Div&gt;     &lt;L.Input       isRequired       requiredMessage=\"Login is required\"       form=\"form\"       name=\"login\"       placeholder=\"Login\"     \/&gt;     &lt;L.Input       isRequired       requiredMessage=\"Password is required\"       form=\"form\"       name=\"password\"       placeholder=\"Password\"     \/&gt;     &lt;L.Button _warning form=\"form\"&gt;       Submit     &lt;\/L.Button&gt;   &lt;\/L.Div&gt; );<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>Material-UI<\/strong><\/p>\n<p><iframe id=\"5fe44dc02cbf1a1445b353b3\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fe44dc02cbf1a1445b353b3\" class=\"embed_video embed__content\"><\/iframe><\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const BasicForm = () =&gt; {   const [login, setLogin] = React.useState(\"\");   const [loginError, setLoginError] = React.useState(false);   const [password, setPassword] = React.useState(\"\");   const [passwordError, setPasswordError] = React.useState(false);    return (     &lt;div&gt;       &lt;form         onSubmit={(e) =&gt; {           e.preventDefault();           setLoginError(!login);           setPasswordError(!password);         }}       &gt;         &lt;p&gt;           &lt;TextField             error={loginError}             placeholder=\"Login\"             value={login}             onChange={(e) =&gt; {               setLoginError(false);               setLogin(e.target.value);             }}             onBlur={(e) =&gt; {               setLoginError(!login);             }}             helperText={loginError &amp;&amp; \"Login is required\"}           \/&gt;         &lt;\/p&gt;         &lt;p&gt;           &lt;TextField             error={passwordError}             placeholder=\"Password\"             value={password}             onChange={(e) =&gt; {               setPasswordError(false);               setPassword(e.target.value);             }}             onBlur={(e) =&gt; {               setPasswordError(!password);             }}             helperText={passwordError &amp;&amp; \"Password is required\"}           \/&gt;         &lt;\/p&gt;         &lt;Button type=\"submit\" color=\"primary\" variant=\"contained\"&gt;           Sign Up         &lt;\/Button&gt;       &lt;\/form&gt;     &lt;\/div&gt;   ); };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>Semantic-UI-React<\/strong><\/p>\n<p><iframe id=\"5fe44d97102304e11bb8d6a8\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fe44d97102304e11bb8d6a8\" class=\"embed_video embed__content\"><\/iframe><\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const BasicForm = () =&gt; {   const [login, setLogin] = React.useState(\"\");   const [loginError, setLoginError] = React.useState(false);   const [password, setPassword] = React.useState(\"\");   const [passwordError, setPasswordError] = React.useState(false);    return (     &lt;div&gt;       &lt;Form         onSubmit={(e) =&gt; {           e.preventDefault();           setLoginError(!login);           setPasswordError(!password);         }}       &gt;         &lt;Form.Group&gt;           &lt;Form.Input             error={loginError &amp;&amp; { content: \"Login is required\" }}             placeholder=\"Login\"             name=\"login\"             value={login}             onChange={(e) =&gt; {               setLoginError(false);               setLogin(e.target.value);             }}             onBlur={(e) =&gt; {               setLoginError(!login);             }}           \/&gt;           &lt;Form.Input             error={passwordError &amp;&amp; { content: \"Password is required\" }}             placeholder=\"password\"             name=\"password\"             value={password}             onChange={(e) =&gt; {               setPasswordError(false);               setPassword(e.target.value);             }}             onBlur={(e) =&gt; {               setPasswordError(!password);             }}           \/&gt;           &lt;Form.Button content=\"Submit\" \/&gt;         &lt;\/Form.Group&gt;       &lt;\/Form&gt;     &lt;\/div&gt;   ); };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>arui-feather<\/strong><\/p>\n<p><iframe id=\"5fe44c6b2c0608e1441a4127\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fe44c6b2c0608e1441a4127\" class=\"embed_video embed__content\"><\/iframe><\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const BasicForm = () =&gt; {   const [login, setLogin] = React.useState(\"\");   const [loginError, setLoginError] = React.useState(false);   const [password, setPassword] = React.useState(\"\");   const [passwordError, setPasswordError] = React.useState(false);    return (     &lt;Form       onSubmit={(e) =&gt; {         e.preventDefault();         setLoginError(!login);         setPasswordError(!password);       }}     &gt;       &lt;FormField&gt;         &lt;Input           error={loginError &amp;&amp; \"Login is required\"}           placeholder=\"Login\"           value={login}           onChange={(value) =&gt; {             setLoginError(false);             setLogin(value);           }}           onBlur={(e) =&gt; {             setLoginError(!login);           }}         \/&gt;       &lt;\/FormField&gt;       &lt;FormField&gt;         &lt;Input           error={passwordError &amp;&amp; \"Password is required\"}           placeholder=\"Password\"           value={password}           onChange={(value) =&gt; {             setPasswordError(false);             setPassword(value);           }}           onBlur={(e) =&gt; {             setPasswordError(!password);           }}         \/&gt;       &lt;\/FormField&gt;       &lt;FormField&gt;         &lt;Button view=\"extra\" type=\"submit\"&gt;           Submit         &lt;\/Button&gt;       &lt;\/FormField&gt;     &lt;\/Form&gt;   ); };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>yandex-ui<\/strong><\/p>\n<p><iframe id=\"5fe44c55fd7c16e10ee4a872\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/5fe44c55fd7c16e10ee4a872\" class=\"embed_video embed__content\"><\/iframe><\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const BasicForm = () =&gt; {   const [login, setLogin] = React.useState(\"\");   const [loginError, setLoginError] = React.useState(false);   const [password, setPassword] = React.useState(\"\");   const [passwordError, setPasswordError] = React.useState(false);    return (     &lt;form       onSubmit={(e) =&gt; {         e.preventDefault();         setLoginError(!login);         setPasswordError(!password);       }}       className={cnTheme(theme)}     &gt;       &lt;Textinput         error={loginError}         placeholder=\"Login\"         value={login}         onChange={(e) =&gt; {           setLoginError(false);           setLogin(e.target.value);         }}         onBlur={(e) =&gt; {           setLoginError(!login);         }}         hint={loginError &amp;&amp; \"Login is required\"}       \/&gt;       &lt;Textinput         error={loginError}         placeholder=\"Password\"         value={password}         onChange={(e) =&gt; {           setPasswordError(false);           setPassword(e.target.value);         }}         onBlur={(e) =&gt; {           setPasswordError(!login);         }}         hint={passwordError &amp;&amp; \"Password is required\"}       \/&gt;       &lt;Button type=\"submit\" view=\"action\"&gt;         Submit       &lt;\/Button&gt;     &lt;\/form&gt;   ); };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0432 Korus-UI \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u0441 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0442\u043e\u0433\u0434\u0430 \u043a\u0430\u043a \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a.&nbsp;<\/p>\n<p>\u0412 Material-UI \u0438 yandex-ui \u043d\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c\u044b, \u0432 Semantic-UI-React \u0438 arui-feather \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043e\u0431\u0435\u0440\u0442\u043a\u043e\u0439 \u0442\u0435\u0433\u0430 <code>&lt;form&gt;<\/code> \u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445, \u043a\u0440\u043e\u043c\u0435 Korus-UI. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430.<\/p>\n<h3>\u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u041f\u043e\u0434\u0432\u0435\u0434\u0435\u043c \u0438\u0442\u043e\u0433 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u044f\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td colspan=\"2\">\n<\/td>\n<td>\n<p><strong>Korus-UI (\u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441)<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Material-UI<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>Semantic-UI-React<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a)<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>yandex-ui<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\n<p><strong>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/strong><\/p>\n<\/td>\n<td>\n<p>Storybook<\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/strong><\/p>\n<\/td>\n<td>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e Pull Request \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043c\u0435\u0441\u044f\u0446<\/p>\n<\/td>\n<td>\n<p><strong>70<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>241<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>2<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>0<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>0<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u041b\u0438\u0446\u0435\u043d\u0437\u0438\u044f<\/strong><\/p>\n<\/td>\n<td>\n<\/td>\n<td>\n<p><a href=\"https:\/\/github.com\/kksng\/korus-ui\/blob\/master\/LICENSE.md\" rel=\"noopener noreferrer nofollow\"><u>MIT license<\/u><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/github.com\/mui-org\/material-ui\/blob\/next\/LICENSE\" rel=\"noopener noreferrer nofollow\"><u>MIT license<\/u><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/github.com\/Semantic-Org\/Semantic-UI\/blob\/master\/LICENSE.md\" rel=\"noopener noreferrer nofollow\"><u>MIT license<\/u><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/github.com\/alfa-laboratory\/arui-feather\/blob\/master\/LICENSE.txt\" rel=\"noopener noreferrer nofollow\"><u>Mozilla Public License 2.0<\/u><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/github.com\/bem\/yandex-ui\/blob\/master\/LICENSE.md\" rel=\"noopener noreferrer nofollow\"><u>Mozilla Public License 2.0<\/u><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\n<p><strong>\u041f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438<\/strong><\/p>\n<\/td>\n<td>\n<p>\u041f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f &gt; 50%<\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p>\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>E2E \u0442\u0435\u0441\u0442\u044b<\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"9\">\n<p><strong>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c&nbsp;<\/strong><\/p>\n<\/td>\n<td>\n<p>Chrome<\/p>\n<\/td>\n<td>\n<p>85.0.4183.121<\/p>\n<\/td>\n<td>\n<p>&gt;= 49<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Firefox<\/p>\n<\/td>\n<td>\n<p>81.0.1<\/p>\n<\/td>\n<td>\n<p>&gt;= 52<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>&gt;= 23<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Edge<\/p>\n<\/td>\n<td>\n<p>85.0.564.44<\/p>\n<\/td>\n<td>\n<p>&gt;=14<\/p>\n<\/td>\n<td>\n<p>12+<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>IE<\/p>\n<\/td>\n<td>\n<p>11<\/p>\n<\/td>\n<td>\n<p>11<\/p>\n<\/td>\n<td>\n<p>11+<\/p>\n<\/td>\n<td>\n<p>11+<\/p>\n<\/td>\n<td>\n<p>11+<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Safari<\/p>\n<\/td>\n<td>\n<p>14<\/p>\n<\/td>\n<td>\n<p>&gt;= 10<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Opera<\/p>\n<\/td>\n<td>\n<\/td>\n<td>\n<\/td>\n<td>\n<p>&nbsp;<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>&gt;= 12.1<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Yandex<\/p>\n<\/td>\n<td>\n<\/td>\n<td>\n<\/td>\n<td>\n<p>&nbsp;<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>?<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Android<\/p>\n<\/td>\n<td>\n<p>&nbsp;<\/p>\n<\/td>\n<td>\n<p>&nbsp;<\/p>\n<\/td>\n<td>\n<p>4.4+<\/p>\n<\/td>\n<td>\n<p>5+<\/p>\n<\/td>\n<td>\n<p>&gt;= 4<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>iOS Safari<\/p>\n<\/td>\n<td>\n<\/td>\n<td>\n<\/td>\n<td>\n<p>7+<\/p>\n<\/td>\n<td>\n<p>Last 2 v.<\/p>\n<\/td>\n<td>\n<p>&gt;= 5.1<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/strong><\/p>\n<\/td>\n<td>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b<\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c<\/strong><\/p>\n<\/td>\n<td>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/strong><\/p>\n<\/td>\n<td>\n<\/td>\n<td>\n<p>Typescript<\/p>\n<\/td>\n<td>\n<p>Typescript<\/p>\n<\/td>\n<td>\n<p>Typescript<\/p>\n<\/td>\n<td>\n<p>Typescript<\/p>\n<\/td>\n<td>\n<p>Typescript<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p><strong>\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c<\/strong><\/p>\n<\/td>\n<td>\n<p>\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0437\u0432\u0435\u0437\u0434 \u043d\u0430 GitHub \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0439 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u043e\u0434, %<\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>0,99<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>0,14<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>2<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>1,33<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u0441\u043e\u0441\u0442\u0430\u0432<\/strong><\/p>\n<\/td>\n<td>\n<p>\u0415\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438<\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/p>\n<\/td>\n<td>\n<p><strong>+<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u2013<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u043d\u0438\u0445, \u043d\u0430 \u0432\u044b\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u044e\u0442 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u0430\u043a\u0442\u043e\u0440\u044b \u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u0444\u0430\u043a\u0442\u043e\u0440\u044b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043c\u044b \u0432 \u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441\u0435, \u0438 \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 Korus-UI<\/h3>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441: \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u0430 \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430? \u041d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e <a href=\"https:\/\/ru.react.js.org\/community\/ui-components.html\" rel=\"noopener noreferrer nofollow\"><u>\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0432\u043a\u0443\u0441<\/u><\/a>.<\/p>\n<p>\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0438 \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u043d\u0435&nbsp;\u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u043b\u043e \u043d\u0430\u0441 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u0430\u0432\u0443, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0444\u043e\u0440\u043c \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>\u0411\u044b\u043b\u0438 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u044b: \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b, \u043d\u0438\u0437\u043a\u0430\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u0434\u043e\u0441\u0430\u0434\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u0441\u0440\u044b\u0432\u043e\u0432 \u0434\u0435\u0434\u043b\u0430\u0439\u043d\u043e\u0432.&nbsp;<\/p>\n<p>\u0421 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u0441\u0435\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0430 \u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0437\u0430\u043a\u0430\u0437\u043e\u0432 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043e\u0441\u0442\u0440\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0441\u0442\u0435\u043a\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.&nbsp; \u042f\u0441\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0433\u0438\u0431\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u0438 \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Korus-UI \u0443\u0448\u043b\u043e 1,5 \u0433\u043e\u0434\u0430. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u044b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 opensource-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.&nbsp;<\/p>\n<h3>\u041a\u0430\u043a\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Korus-UI<\/h3>\n<p><strong>\u0424\u043e\u0440\u043c\u044b \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/strong><\/p>\n<p>\u0412 Korus-UI \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044e \u0444\u043e\u0440\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u0438\u043d\u043e\u0439: \u043f\u043e\u043b\u044f \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c form, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u043e\u0440\u043c\u044b. \u0422\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0434\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u043e\u0431\u0449\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0438\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0444\u043e\u0440\u043c\u044b, \u043a&nbsp;\u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 &nbsp;<code>L.form()<\/code>. \u0415\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0444\u043e\u0440\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u0440\u043c \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u0438\u043a\u043e\u043c.<\/p>\n<p>\u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Korus-UI \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a onValidationFail, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0444\u043e\u0440\u043c\u044b, \u043d\u0435 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e. \u0410 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u0431\u043e\u043d\u0443\u0441 \u2014 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043a \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c \u043f\u043e\u043b\u044f\u043c.<\/p>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0432 Korus-UI \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0415\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0438\u0447\u0438:<\/p>\n<ul>\n<li>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0438\u043b\u0438 RegExp<\/p>\n<\/li>\n<li>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b<\/p>\n<\/li>\n<li>\n<p>\u041e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (\u0442\u0435\u043a\u0441\u0442 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434)<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0434\u0430\u043d\u0438\u0435 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044f \u0438\u0437\u0432\u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 isValid<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 unmounted<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043f\u043e \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430, \u0441\u0430\u0431\u043c\u0438\u0442\u0435 \u0444\u043e\u0440\u043c\u044b \u0438 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043a \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c \u043f\u043e\u043b\u044f\u043c \u043f\u0440\u0438 \u0441\u0430\u0431\u043c\u0438\u0442\u0435 \u0444\u043e\u0440\u043c\u044b<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u043e\u0440\u043c \u043e\u0434\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0415\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 API<\/strong><\/p>\n<p>\u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0441 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f _. \u0422\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u0438\u043c\u0435\u043d\u0430 css-\u043a\u043b\u0430\u0441\u0441\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">&lt;L.Div _flexBox&gt; -&gt; &lt;div class=\"flex-box\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 className \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 theme, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 css-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0441 \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u043e\u043c Render (\u0441\u043c. \u0440\u0430\u0437\u0434\u0435\u043b \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c).<\/p>\n<p>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u044b, \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">{   \u2026Event, \/\/ \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 React'\u043e\u043c &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   \/\/ \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c component, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 &nbsp; component: { &nbsp;&nbsp;  isValid?: boolean, \/\/ \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 onBlur &nbsp;&nbsp;&nbsp;&nbsp;name?: string, \/\/ \u0438\u043c\u044f \u0444\u043e\u0440\u043c\u044b, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &nbsp;&nbsp;&nbsp;&nbsp;value: any, \/\/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 &nbsp;&nbsp;&nbsp;&nbsp;\u2026 \/\/ \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0441\u043c. API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430) &nbsp;&nbsp;} }<\/code><\/pre>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441 \u0431\u0443\u043b\u0435\u0432\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441:<\/p>\n<p>is: <code>isOpen<\/code>, <code>isValid<\/code>, <code>isRequired<\/code>, <code>isDisabled<\/code><\/p>\n<p>has: <code>hasCloseButton<\/code><\/p>\n<p>should: <code>shouldCorrectValue<\/code><\/p>\n<p>\u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>ref<\/code>.<\/p>\n<p><a href=\"https:\/\/opensource.esphere.ru\/korus-ui\/?path=\/story\/basics-%D1%80%D0%B5%D1%84%D1%8B-%D0%B8-dom--%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%80%D0%B5%D1%84%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\"><u>Korus-UI \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c ref<\/u><\/a>, \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0439 \u0432 React.<\/p>\n<h3>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 Korus-UI<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441\u0430, \u0443 \u043d\u0435\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0437&nbsp;\u0431\u043b\u043e\u0433\u043e\u0432 \u0438\u043b\u0438 \u043d\u0430 \u0444\u043e\u0440\u0443\u043c\u0430\u0445, \u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c issue \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a&nbsp;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u044c.<\/p>\n<p>\u0415\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c iOS \u0438 Android. \u0421\u0435\u0439\u0447\u0430\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<h3>\u0418\u0442\u043e\u0433\u0438<\/h3>\n<p>\u041c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Material-UI, Semantic-UI-React, arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a), yandex-ui, Korus-UI (\u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441), \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.&nbsp;<\/p>\n<p>\u0412\u043e\u0442 \u043a\u043e\u0440\u043e\u0442\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:&nbsp;<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u0443\u0436\u0434\u044b \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0442\u0435\u0445\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0437\u044b\u0432\u044b \u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u0443\u0447\u0435\u0442\u043e\u043c \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Korus-UI, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0435 \u0448\u0430\u043d\u0441\u044b \u0441\u0442\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u044b\u043c \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 Korus-UI \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0430\u0441\u0442\u0435\u0442.<\/p>\n<p>\u0412 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0430\u043a\u0436\u0435 \u0432 \u043f\u043b\u0430\u043d\u0430\u0445 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439 \u044f\u0437\u044b\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Storybook.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430&nbsp; Korus-UI \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u0430 \u0432 opensource \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u0430 <a href=\"https:\/\/github.com\/kksng\/korus-ui\" rel=\"noopener noreferrer nofollow\"><u>GitHub<\/u><\/a>. \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0432 opensource, \u0438 \u043c\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439:)<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0447\u0443 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441\u0430, \u043e\u0442\u0446\u0443 \u0438&nbsp;\u0438\u0434\u0435\u0439\u043d\u043e\u043c\u0443 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442\u0435\u043b\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/Apollo-11\" rel=\"noopener noreferrer nofollow\"><u>\u0410\u0440\u0442\u0451\u043c\u0443 \u041f\u043e\u0432\u043e\u043b\u044c\u0441\u043a\u0438\u0445<\/u><\/a>. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432 \u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441\u0435, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 <a href=\"https:\/\/habr.com\/ru\/company\/kksng\/blog\/486780\/\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u0442\u0430\u0442\u044c\u044e \u0410\u0440\u0442\u0451\u043c\u0430<\/u><\/a>.<\/p>\n<p>\u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c, \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c\u0438 \u0432\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430&nbsp;\u043b\u0438\u0447\u043d\u043e\u043c \u043e\u043f\u044b\u0442\u0435 \u0438 \u043a\u0430\u043a\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b.&nbsp;<\/p>\n<\/div>\n<p> \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:\/\/habr.com\/ru\/post\/535136\/\"> https:\/\/habr.com\/ru\/post\/535136\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041a\u0441\u044e\u0448\u0430 \u041b\u0443\u0433\u043e\u0432\u0430\u044f. \u0412 \u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441\u0435 \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Korus-UI.&nbsp;<\/p>\n<p>\u0421 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0438 \u043f\u043e\u0440\u043e\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u043c. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u0447\u0435\u043c&nbsp;\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0440\u044b\u043d\u043e\u043a, \u043a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0438\u0445 \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b? \u041e\u0431\u0437\u043e\u0440\u044b \u0438 \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 \u043c\u0438\u0440\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043d\u0430 \u0432\u0441\u0435 \u0441\u043b\u0443\u0447\u0430\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432&nbsp;\u0441\u0442\u0430\u0442\u044c\u0435 \u044f&nbsp;\u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0440\u0435\u0448\u0430\u0435\u043c \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f&nbsp;\u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.&nbsp;<\/p>\n<h3>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h3>\n<p><strong>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <\/strong>\u042d\u0442\u043e \u0437\u0432\u0443\u0447\u0438\u0442 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043d\u043e \u0447\u0435\u0442\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u2014 \u043f\u0435\u0440\u0432\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u044b\u0439 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0439 \u0432\u044b\u0431\u043e\u0440\u0430.<\/p>\n<p><strong>\u0422\u0438\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/strong> \u041e\u0442 \u0442\u0438\u043f\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442, \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f. \u0427\u0430\u0441\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u043d\u043e\u043f\u043e\u043a\/\u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432, \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430, \u0441\u043f\u0438\u0441\u043a\u043e\u0432\/\u043c\u0435\u043d\u044e \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0417\u043d\u0430\u0447\u0438\u0442, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/p>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435.<\/strong> \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0432\u0430\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0442\u043a\u043e \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043e\u0442\u0432\u0435\u0442\u044c\u0442\u0435 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b:<\/p>\n<ul>\n<li>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e \u043b\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0435\u0441\u0442\u044c \u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442?<\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 issues \u0438 \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f?<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0438\u043b\u0438 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439?<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043a\u0440\u044b\u0442 \u043b\u0438 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0435\u0441\u0442\u0430\u043c\u0438?<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430?<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043d\u0443\u0436\u0434\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0445 \u0431\u0430\u0433\u043e\u0432 \u2014 \u0432\u0435\u0441\u043a\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.&nbsp;<\/p>\n<p>\u042f \u043e\u0442\u043e\u0431\u0440\u0430\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u043e \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c:<\/p>\n<ul>\n<li>\n<p>Material-UI,<\/p>\n<\/li>\n<li>\n<p>Semantic-UI-React,<\/p>\n<\/li>\n<li>\n<p>yandex-ui,<\/p>\n<\/li>\n<li>\n<p>arui-feather,<\/p>\n<\/li>\n<li>\n<p>Korus-UI.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0432 \u044d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435&nbsp; \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u2013 Material-UI \u0438 Semantic-UI-React, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043e\u0434\u043d\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0438 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043e\u0431\u0440\u043e\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c.<\/p>\n<p>\u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 (\u042f\u043d\u0434\u0435\u043a\u0441, \u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a) \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043e\u0431\u0440\u0435\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 opensource \u0440\u0435\u0448\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u0440\u0430\u0437\u0440\u0435\u0437\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u0432.<\/p>\n<h3>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u0441\u043e\u0441\u0442\u0430\u0432<\/h3>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2014 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438 \u043b\u0435\u0433\u043a\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0433\u0440\u0443\u043f\u043f.<\/p>\n<p><strong>Layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong>&nbsp;<\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0433\u0440\u0438\u0434\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0435. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u0442\u043e\u043b\u044c\u043a\u043e props.children;<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:&nbsp; h1, section, div, span, Icon, Avatar.<\/p>\n<\/li>\n<\/ul>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u043d\u0435&nbsp;\u043d\u0443\u0436\u043d\u0430 \u0441\u0432\u043e\u044f \u0442\u0435\u043c\u0430 \u0441\u0442\u0438\u043b\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Material-UI \u0438&nbsp; Semantic-UI \u043c\u043e\u0433\u0443\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441&nbsp;\u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441\u0432\u043e\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438&nbsp;\u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439.<\/p>\n<p><strong>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b (controls)<\/strong><\/p>\n<p>\u041a\u043d\u043e\u043f\u043a\u0438, \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b, \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b \u2014 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u00ab\u043e\u0436\u0438\u0432\u0438\u0442\u044c\u00bb \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441&nbsp;\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.&nbsp;<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u041e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <em>props;<\/em><\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 UI (disabled, required, isLoading).<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>\u042d\u0442\u043e \u0433\u0440\u0443\u043f\u043f\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043e\u043d\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c.&nbsp;<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0418\u043c\u0435\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c (\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f, \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u044b\u0432\u043e\u0434\u0430, \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435);<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Layout<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Controls<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Modules<\/p>\n<\/td>\n<td>\n<p>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>Material-UI<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>App Bar, Avatars, Badges, Bottom Navigation, Divider, Grid List, Lists, Paper, Progress, Snackbar, Tables,&nbsp;<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Button, Chip, Selection Controls, Text Fields, Pickers*<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Dialog, Cards, Drawers, ExpansionPanel, Menu, Stepper, Tabs, Tooltip<\/p>\n<\/td>\n<td>\n<p>26**<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>Semantic-UI-React<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Container, Divider, Flag, Header, Icon, Image, Label, List, Loader, Placeholder, Rail, Reveal, Segment, Step, Breadcrumb, Form, Grid, Menu, Message, Table, Advertisement, Card, Comment, Feed, Item, Statistic<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Button, Input, Checkbox, Radio, Select, Text Area<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Accordion, Dimmer, Dropdown, Embed, Modal, Popup, Progress, Rating, Search, Sidebar, Sticky, Tab, Transition, Visibility, Confirm, Pagination, Portal, Ref, Transitionable Portal<\/p>\n<\/td>\n<td>\n<p>52<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>yandex-ui<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Badge, Divider, Icon, Image, Text, UserPic, ListTile, Spacer, Link, Spin<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Attach, Button, Checkbox, Menu, Radiobox, RadioButton, Select, Slider, Textarea, Textinput, Tumbler<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>TabsMenu, Drawer, Dropdown, Messagebox, Modal, Popup, TabsPanes, Tooltip, Progress&nbsp;<\/p>\n<\/td>\n<td>\n<p>30<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>arui-feather<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>Amount, CardImage, FlagIcon, Form, GridRow, GridCol, Heading, Icon, InputGroup, Label, Link, List, Paragraph, Spin<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Attach, Button, CardInput, CheckBoxGroup, CheckBox, FormField, IconButton, Input, RadioGroup, Radio, Select, TagButton, Textarea, Toggle<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>CalendatInput, Calendar, Collapse, EmailInput, InputAutocomplete, IntlPhoneInput, Menu, MoneyInput, Notification, PhoneInput, Plate, Popup, ProgressBar, Sidebar, SlideDown, Tabs<\/p>\n<\/td>\n<td>\n<p>44<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td data-colwidth=\"122\" width=\"122\">\n<p>Korus-UI<\/p>\n<\/td>\n<td data-colwidth=\"164\" width=\"164\">\n<p>HTML tags factory***<strong><em>,<\/em><\/strong><\/p>\n<p>Currency, Tags<\/p>\n<\/td>\n<td data-colwidth=\"170\" width=\"170\">\n<p>Button, Checkbox, Input,&nbsp; Radio, Rating, Slider, Switcher, Textarea<\/p>\n<\/td>\n<td data-colwidth=\"186\" width=\"186\">\n<p>Autocomplete, ButtonGroup, Collapse, Collapsible,&nbsp;<\/p>\n<p>DatePicker, DateRange, DateTimePicker, DateTimeRange, Dropdown, DropdownLink, DropdownSelect, Dropzone, FileDrop, FileUpload, Loader, MaskedInput, Modal, MultiSelect, Notifications, NumericRange, NumericTextBox, Pagination, Password, ProgressBar, StatusBar, StickyPanel, Tabs, TimePicker, TimeRange, Tooltip, Tour,&nbsp; Validation, VStepper, Wizard, form<\/p>\n<\/td>\n<td>\n<p>45<\/p>\n<p>+ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 HTML-\u0442\u0435\u0433\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><em>*Material-UI \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u0430\u0442\u044b<\/em><\/p>\n<p><em>**\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/em><\/p>\n<p><em>***Korus-UI \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 HTML-\u0442\u0435\u0433\u043e\u0432 c \u0435\u0434\u0438\u043d\u044b\u043c API<\/em><\/p>\n<p>\u041f\u043e\u0447\u0442\u0438 50% \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u0430 Material-UI \u0438 Semantic-UI-React \u0438 \u043e\u043a\u043e\u043b\u043e 30% \u0432&nbsp;\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 yandex-ui \u0438 arui-feather \u2014 \u043c\u0430\u043b\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 layout-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0412&nbsp;Korus-UI \u0431\u043e\u043b\u0435\u0435 70% \u2014 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<h3>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0441\u0438\u043b \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u0421\u0440\u0430\u0432\u043d\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445.<\/p>\n<p><strong>Material-UI<\/strong><\/p>\n<ul>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MuiThemeProvider. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u043c\u043e\u0439 \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 className.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c classes.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0437\u0430\u0442\u043e\u0447\u0435\u043d\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CSS-in-Js, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432 CSS-\u0444\u0430\u0439\u043b\u0430\u0445. \u0414\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 CSS-in-Js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/material-ui.com\/ru\/customization\/components\/\" rel=\"noopener noreferrer nofollow\"><u>HOC withStyles()<\/u><\/a> \u043b\u0438\u0431\u043e \u0445\u0443\u043a <a href=\"https:\/\/material-ui.com\/ru\/styles\/advanced\/#makestyles\" rel=\"noopener noreferrer nofollow\"><u>makeStyles()<\/u><\/a> \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p><strong>Semantic-UI-React<\/strong><\/p>\n<p>\u0423 Semantic-UI-React \u043d\u0435\u0442 \u0441\u0432\u043e\u0435\u0439 \u0442\u0435\u043c\u044b, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438&nbsp; <a href=\"https:\/\/semantic-ui.com\/usage\/theming.html\" rel=\"noopener noreferrer nofollow\"><u>Semantic-UI<\/u><\/a>.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0442\u0435\u043c\u044b \u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.&nbsp;<\/p>\n<p>\u042d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/globals\/site.variables\" rel=\"noopener noreferrer nofollow\"><u>site.variables<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/collections\/menu.overrides\" rel=\"noopener noreferrer nofollow\"><u>css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445<\/u><\/a> ;<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/theme.config\" rel=\"noopener noreferrer nofollow\"><u>theme.config<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/elements\/icon.variables\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0443\u0442\u0438<\/u><\/a> \u043a assets \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/github.com\/Semantic-Org\/example-github\/blob\/master\/semantic\/src\/themes\/github\/elements\/icon.overrides\" rel=\"noopener noreferrer nofollow\"><u>\u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430<\/u><\/a>.<\/p>\n<\/li>\n<\/ul>\n<p><strong>yandex-ui<\/strong><\/p>\n<p>\u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0441\u0435\u0442\u043e\u0432 \u0441 \u0442\u0435\u043c\u0430\u043c\u0438. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/bem\/themekit\" rel=\"noopener noreferrer nofollow\"><u>\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 themekit<\/u><\/a>;&nbsp;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0442\u043e\u043a\u0435\u043d\u044b) \u0432 \u0442\u0435\u043c\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d-\u0442\u043e\u043a\u0435\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 yaml \u0438\u043b\u0438 json. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b (css, json, js, ios, android) \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<\/li>\n<\/ul>\n<p><strong>arui-feather (\u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a)<\/strong><\/p>\n<p>\u0423 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0410\u043b\u044c\u0444\u0430 \u0411\u0430\u043d\u043a\u0430 \u043d\u0435\u0442 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.&nbsp; \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 className, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0445 \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c.<\/p>\n<p><strong>Korus-UI (\u0421\u0431\u0435\u0440\u041a\u043e\u0440\u0443\u0441)<\/strong><\/p>\n<ul>\n<li>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 LedaProvider. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u043c\u043e\u0439 \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e\u0434 \u0438\u043c\u0435\u044e\u0449\u0443\u044e\u0441\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0443. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432&nbsp; \u0432&nbsp;\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 API-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (<a href=\"https:\/\/opensource.esphere.ru\/korus-ui\/?path=\/story\/basics-%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F--%D0%BF%D0%B5%D1%80%D0%B5%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-css-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u043c.&nbsp;\u0430\u0442\u0440\u0438\u0431\u0443\u0442 theme<\/u><\/a>). \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e.<strong>&nbsp;<\/strong><\/p>\n<\/li>\n<\/ul>\n<h3>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c<\/h3>\n<p>\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430&nbsp;\u043d\u043e\u0432\u044b\u0439 (\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Loader \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u043d\u043d\u0435\u0440\u0430).<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>Material-UI<\/strong><\/p>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/material-ui.com\/guides\/composition\/\" rel=\"noopener noreferrer nofollow\"><u>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 component<\/u><\/a>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 List \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 <code>&lt;ul&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438\u043b\u0438 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">&lt;List component=\"nav\"&gt;   &lt;ListItem button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;ListItemText primary=\"Trash\" \/&gt; &nbsp;&nbsp;&lt;\/ListItem&gt; &nbsp;&nbsp;&lt;ListItem button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;ListItemText primary=\"Spam\" \/&gt; &nbsp;&nbsp;&lt;\/ListItem&gt; &lt;\/List&gt;<\/code><\/pre>\n<\/p>\n<p><strong>Semantic-UI<\/strong><\/p>\n<p>Semantic-UI-React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0441\u0445\u043e\u0436\u0438\u0439 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 <a href=\"https:\/\/react.semantic-ui.com\/augmentation\" rel=\"noopener noreferrer nofollow\"><u>\u0430\u0442\u0440\u0438\u0431\u0443\u0442 as<\/u><\/a>:<\/p>\n<pre><code class=\"javascript\">&lt;Button as='a' \/&gt;<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0412\u0441\u0435 \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432.<\/p>\n<p><strong>yandex-ui<\/strong><\/p>\n<p>\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/bem\/yandex-ui\/tree\/master\/src\/lib\/render-override\" rel=\"noopener noreferrer nofollow\"><u>render-override<\/u><\/a>.&nbsp; \u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0445\u0443\u043a\u043e\u0432 \u0438&nbsp;\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.&nbsp;<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { useRenderOverride } from '@yandex\/ui\/lib\/render-override'  const ElementOriginal = ({ children }) =&gt; &lt;div&gt;{children}&lt;\/div&gt; const MyComponent = ({ renderElement }) =&gt; {   <\/code><\/pre>\n<\/div>\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-315585","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315585","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=315585"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315585\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=315585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=315585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=315585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}