{"id":443148,"date":"2024-12-26T05:36:56","date_gmt":"2024-12-26T05:36:56","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443148"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443148","title":{"rendered":"<span>\u041a\u0430\u043a \u043c\u044b \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0441 JQuery \u043d\u0430 React<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<ul>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D1%8B%D0%B9-%D1%81%D1%82%D0%B5%D0%BA\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0441\u0442\u0435\u043a<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B4%D0%BE-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%B0\" rel=\"noopener noreferrer nofollow\"><u>\u0416\u0438\u0437\u043d\u044c \u0434\u043e \u0440\u0435\u0430\u043a\u0442\u0430 \u2014 JQuery<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B5%D0%B9%D0%BC%D1%81%D0%BF%D0%B5%D0%B9%D1%81%D1%8B\" rel=\"noopener noreferrer nofollow\"><u>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#react-like-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82\" rel=\"noopener noreferrer nofollow\"><u>React-like \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\"><u>\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f<\/u><\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-react\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u043e\u0447\u0435\u043c\u0443 React?<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4-%D0%BA-%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\"><u>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F-webpack\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Webpack<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B8%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B5%D0%BB%D1%8C%D0%B7%D1%8F-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C\" rel=\"noopener noreferrer nofollow\"><u>\u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432\u0437\u044f\u0442\u044c \u0438 \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#typescript-%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0442\u0438\u043f\u043e\u0432<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#zustand\" rel=\"noopener noreferrer nofollow\"><u>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u2014 Zustand<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%81%D1%82%D0%B8%D0%BB%D0%B8\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u0442\u0438\u043b\u0438<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%B5%D1%81%D0%BE%D1%87%D0%BD%D0%B8%D1%86%D0%B0\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\"><u>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u043a\u0440\u0443\u0433 \u0432\u0441\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0440\u0435\u0430\u043a\u0442\u0430, \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u043e\u0432\u0448\u0435\u0441\u0442\u0432\u0430\u0445 \u0432 \u043c\u0438\u0440\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u041a\u0430\u043a \u0431\u0443\u0434\u0442\u043e JQuery \u0432 \u043e\u0434\u0438\u043d \u043c\u0438\u0433 \u0432\u0437\u044f\u043b \u0438 \u0438\u0441\u0447\u0435\u0437. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043e\u043d \u0432\u0441\u0451 \u0435\u0449\u0451\u00a0<a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" rel=\"noopener noreferrer nofollow\"><u>\u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439<\/u><\/a>\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \ud83d\ude05.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0441 JQuery \u043d\u0430 React.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/286\/fdc\/1be\/286fdc1be700fcb7efd3c8e2110c2618.png\" alt=\"\" title=\"\" width=\"992\" height=\"680\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/286\/fdc\/1be\/286fdc1be700fcb7efd3c8e2110c2618.png\"\/><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f, \u0437\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u0432 \u043c\u043e\u0439\u00a0<a href=\"https:\/\/t.me\/cherkashindev\" rel=\"noopener noreferrer nofollow\"><u>Telegram-\u043a\u0430\u043d\u0430\u043b<\/u><\/a>\u00a0\u2014 \u0442\u0430\u043c \u044f \u0434\u0435\u043b\u044e\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u0438 \u043c\u044b\u0441\u043b\u044f\u043c\u0438 \u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" id=\"\u043f\u043e\u0447\u0435\u043c\u0443-\u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c\"><\/a><\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/h2>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0434\u0451\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u043b\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>XSS \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u0441\u0442\u0435\u0440\u0435\u0433\u0430\u044e\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0443<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c NPM \u0438\u0437-\u0437\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0438\u043c\u0451\u043d (namespace) \u0432 TypeScript<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D1%8B%D0%B9-%D1%81%D1%82%D0%B5%D0%BA\" id=\"\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439-\u0441\u0442\u0435\u043a\"><\/a><\/p>\n<h3>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0441\u0442\u0435\u043a<\/h3>\n<p>\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 2019 \u0433\u043e\u0434\u0443. \u041d\u0430\u0448 \u0441\u0442\u0435\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p><a href=\"http:\/\/asp.net\/\" rel=\"noopener noreferrer nofollow\"><u>ASP.NET<\/u><\/a>\u00a0Core<\/p>\n<\/li>\n<li>\n<p>JQuery<\/p>\n<\/li>\n<li>\n<p>TypeScript c\u00a0<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/namespaces.html\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\u043c\u0438 \u0438\u043c\u0451\u043d<\/u><\/a>\u00a0\u0432\u043c\u0435\u0441\u0442\u043e ESM<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e Vanilla JS<\/p>\n<\/li>\n<li>\n<p>LESS \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u0441\u0442\u0435\u043a \u0432\u0430\u0436\u0435\u043d, \u0432\u0435\u0434\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0435\u0439 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043e\u0434 \u0434\u043e React. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u2014 \u0441\u0440\u0430\u0437\u0443\u00a0<a href=\"#%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/u><\/a>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B4%D0%BE-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%B0\" id=\"\u0434\u043e-\u0440\u0435\u0430\u043a\u0442\u0430\"><\/a><\/p>\n<h3>\u0416\u0438\u0437\u043d\u044c \u0434\u043e \u0440\u0435\u0430\u043a\u0442\u0430 \u2014 JQuery<\/h3>\n<p>\u0412 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">namespace App.Components { export interface ComboBoxProps { container: JQuery; items: ComboBoxItem[]; renderOption: (item: ComboBoxItem) =&gt; JQuery; }  export class ComboBox { constructor(private props: ComboBoxProps) { \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0435\u0451 \u0432 container this.container.append(this.render()); }   private render(): JQuery { const viewItems = this.props.items.map(this.props.renderOption); \/\/ ... \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 return view; }   setItems() { \/* ... *\/ } enable() { \/* ... *\/ } disable() { \/* ... *\/ } } }<\/code><\/pre>\n<p>\u041c\u044b \u0441 \u0437\u0430\u0432\u0438\u0441\u0442\u044c\u044e \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0430 React, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u043e\u0445\u043e\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0435:<\/p>\n<ul>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 render<\/p>\n<\/li>\n<li>\n<p>Render Props \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B5%D0%B9%D0%BC%D1%81%D0%BF%D0%B5%D0%B9%D1%81%D1%8B\" id=\"\u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b\"><\/a><\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 C# \u0438\u043b\u0438 \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 TypeScript, \u0442\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043e\u043d\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 JavaScript \u043e\u0431\u044a\u0435\u043a\u0442, \u0430 \u0432\u0441\u0435\u00a0<code>export<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0451\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"typescript\">namespace Personnel {     export class Employee {               constructor(public name: string){         }     } }   let alice = new Personnel.Employee(\"Alice\"); console.log(alice.name);    \/\/ Alice<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/IIFE\" rel=\"noopener noreferrer nofollow\"><u>IIFE<\/u><\/a>:<\/p>\n<pre><code class=\"typescript\">var Personnel; (function (Personnel) {       class Employee {         constructor(name) {             this.name = name;         }     }       Personnel.Employee = Employee;   })(Personnel || (Personnel = {}));   let alice = new Personnel.Employee(\"Alice\"); console.log(alice.name); \/\/ Alice<\/code><\/pre>\n<p><a class=\"anchor\" name=\"react-like-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82\" id=\"react-like-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\"><\/a><\/p>\n<h3>React-like \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h3>\n<p>\u041c\u044b \u0434\u0430\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0435\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 React \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JQuery \u043c\u0435\u0442\u043e\u0434\u0430\u00a0<code>$('.container').data(dataName, value)<\/code>. \u0410 \u0434\u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e React-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443) \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u043e\u0433\u043e DOM \u0443\u0437\u043b\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430\u00a0<code>findData<\/code>.<\/p>\n<pre><code class=\"typescript\">export function findData(element: JQuery, dataName: string) { if (!element) { return null; }   const data = element.data(dataName); if (data) { return data; }   const dataOwner = element.closest(`:data(\"${dataName}\")`); if (dataOwner) { return dataOwner.data(dataName); } return null; }<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D1%8F\" id=\"\u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f\"><\/a><\/p>\n<h2>\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f<\/h2>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-react\" id=\"\u043f\u043e\u0447\u0435\u043c\u0443-react\"><\/a><\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 React?<\/h3>\n<p>\u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0441 \u043d\u0443\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 Angular \u043d\u0430\u043c \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b \u2014 \u0432\u044b\u0431\u043e\u0440 \u0441\u0442\u043e\u044f\u043b \u043c\u0435\u0436\u0434\u0443 React \u0438 Vue. \u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u043e\u043f\u044b\u0442\u043e\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 JQuery \u043d\u0430 React, \u0442\u043e \u0432\u044b\u0431\u043e\u0440 \u043f\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0433\u043e.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4-%D0%BA-%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" id=\"\u043f\u043e\u0434\u0445\u043e\u0434-\u043a-\u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438\"><\/a><\/p>\n<h3>\u041f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/h3>\n<p>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b \u0438 ES-\u043c\u043e\u0434\u0443\u043b\u0438. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0442\u043e\u0436\u0435 \u043d\u0435\u0442. \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0<a href=\"https:\/\/devblogs.microsoft.com\/typescript\/typescripts-migration-to-modules\/\" rel=\"noopener noreferrer nofollow\"><u>TypeScript \u043f\u0438\u0441\u0430\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442<\/u><\/a>\u00a0\u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b TypeScript\u2019\u0430 (TypeScript \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 TypeScript\u2019\u0435!) \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 AST.<\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c React \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430:<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043d\u0430 ES-\u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c React<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0433\u0434\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0435. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e JQuery!<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9c7\/207\/977\/9c7207977b70a4e16d1e8978bb256461.png\" alt=\"\u041f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0430\" title=\"\u041f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0430\" width=\"1910\" height=\"597\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9c7\/207\/977\/9c7207977b70a4e16d1e8978bb256461.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0434\u0442\u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0443\u0442\u0451\u043c.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c webpack-\u043a\u043e\u043d\u0444\u0438\u0433 \u0441 \u043d\u0443\u043b\u044f \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u043b\u0438 Create React App (CRA) \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 Eject. \u041f\u043e\u0442\u043e\u043c \u043c\u044b\u00a0<a href=\"https:\/\/create-react-app.dev\/docs\/alternatives-to-ejecting\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0444\u043e\u0440\u043a<\/u><\/a>, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u043e\u0433\u0434\u0430 CRA \u0431\u044b\u043b \u0435\u0449\u0451 \u0436\u0438\u0432 \ud83e\udea6.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" id=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\"><\/a><\/p>\n<h3>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u041f\u0440\u043e \u0440\u0435\u0430\u043a\u0442 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0442\u044e\u0433\u0430 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e View \u0441\u043b\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u0448 \u0440\u0435\u0430\u043a\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439. \u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u0435\u0430\u043a\u0442-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e\u00a0<code>createRoot<\/code>\u00a0(\u0434\u043e React18 \u2014\u00a0<code>ReactDOM.render<\/code>).<\/p>\n<p>\u0412\u0441\u0435 \u0432\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"typescript\">import { createRoot } from 'react-dom\/client';   const container = document.getElementById(\"root\")!; const root = createRoot(container);   root.render(&lt;App \/&gt;);<\/code><\/pre>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u00a0<code>index.tsx<\/code>\u00a0\u0444\u0430\u0439\u043b\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b1\/767\/5d6\/1b17675d6e01d34b016d8f57fce2e0be.png\" alt=\"\u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442 \u043a\u043c\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\" title=\"\u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442 \u043a\u043c\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\" width=\"2182\" height=\"862\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1b1\/767\/5d6\/1b17675d6e01d34b016d8f57fce2e0be.png\"\/><\/p>\n<div><figcaption>\u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442 \u043a\u043c\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 React17 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<code>ReactDOM.render<\/code>, \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 React 18 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043e\u0431\u0451\u0440\u0442\u043a\u0443\u00a0<code>renderComponent<\/code>\u00a0\u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u00a0<code>createRoot()<\/code>. \u041a\u043e\u0434 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043c\u043e\u0436\u043d\u043e\u00a0<a href=\"https:\/\/github.com\/acherkashin\/webpack-lib\/blob\/main\/src\/utils\/RenderUtils.tsx\" rel=\"noopener noreferrer nofollow\"><u>\u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<pre><code class=\"typescript\">import { Root } from 'react-dom\/client';   const roots = new Map&lt;HTMLElement, Root&gt;();   export async function renderComponent({ container, component, autoUnmount }: IRenderComponentProps) {     const { createRoot } = await import('react-dom\/client');     const isUpdate = roots.has(container);     const root = isUpdate ? roots.get(container)! : createRoot(container);       if (!isUpdate) {         roots.set(container, root);         if (autoUnmount) {             onDetach(container, () =&gt; unMount(container));         }     }       try {         root.render(component);     } catch (e) { } }<\/code><\/pre>\n<p>\u0412\u0435\u0441\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435\u00a0<code>library.tsx<\/code>. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">export async function renderAppHeader(props: AppHeaderProps, container: HTMLElement) {     const { AppHeader } = await import('.\/components\/AppHeader');       return renderComponent({         container,         component: &lt;AppHeader {...props} \/&gt;,         autoUnmount: true     }); }<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0436\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/#dynamic-imports\" rel=\"noopener noreferrer nofollow\"><u>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/u><\/a>\u00a0\u0434\u043b\u044f \u043a\u043e\u0434 \u0441\u043f\u043b\u0438\u0442\u0438\u043d\u0433\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e\u00a0<a href=\"https:\/\/swizec.com\/blog\/the-anatomy-of-a-react-island\/\" rel=\"noopener noreferrer nofollow\"><u>The anatomy of a React Island<\/u><\/a>, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F-webpack\" id=\"\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f-webpack\"><\/a><\/p>\n<h3>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Webpack<\/h3>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Create React App \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 webpack-\u043a\u043e\u043d\u0444\u0438\u0433. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c CRA \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438, \u043d\u043e \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u2014 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">const { WebpackManifestPlugin } = require('webpack-manifest-plugin');   module.exports = {   entry: {     'lib': '.\/src\/library.tsx'   },   output: {     filename: '[name].[contenthash:8].js',     library: {       name: 'myLib',       type: 'umd',     },     clean: true,   },   plugins: [     new WebpackManifestPlugin({       fileName: 'asset-manifest.json',       publicPath: '.\/',     }),   ], };<\/code><\/pre>\n<p>\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0431\u0435\u0436\u0438\u043c\u0441\u044f \u043f\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443.<\/p>\n<p><code>entry: { 'lib': '.\/src\/library.tsx' }<\/code>\u00a0\u2014\u00a0<code>src\/library.tsx<\/code>\u00a0&#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0422\u0443\u0442 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041f\u043e\u0441\u043b\u0435 \u0431\u0438\u043b\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c\u00a0<code>lib.[contenthash].js<\/code>\u00a0 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>lib.94c4847c.js<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p><code>output.library.name: 'myLib'<\/code> \u2014 \u0438\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u00a0<code>library.tsx<\/code>.<\/p>\n<p><code>output.library.type<\/code>:\u00a0<a href=\"https:\/\/webpack.js.org\/configuration\/output\/#librarytarget-umd\" rel=\"noopener noreferrer nofollow\"><u>&#8216;umd&#8217;<\/u><\/a>, \u0442\u0438\u043f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043a\u0430\u043a \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u00a0<a href=\"https:\/\/webpack.js.org\/configuration\/output\/#librarytarget-window\" rel=\"noopener noreferrer nofollow\"><u>window<\/u><\/a>\u00a0\u0438\u043b\u0438\u00a0<a href=\"https:\/\/webpack.js.org\/configuration\/output\/#type-var\" rel=\"noopener noreferrer nofollow\"><u>var<\/u><\/a>\u00a0\u0442\u043e\u0436\u0435 \u0431\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438.<\/p>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u00a0<code>src\/library.tsx<\/code>\u00a0\u0431\u0443\u0434\u0435\u0442 \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u00a0<code>myLib<\/code>\u00a0\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. \u0412 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c\u00a0<code>renderAppHeader<\/code>\u00a0\u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"swift\">myLib.renderAppHeader(document.getElementById('header-container'), { title: 'Cool App', \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b ... })<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%B8%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" id=\"\u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c\"><\/a><\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/h3>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c, \u043d\u043e \u043a\u0430\u043a \u0435\u0451 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442?<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432\u00a0<code>index.html<\/code>\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f\u00a0<code>HtmlWebpackPlugin<\/code>\u00a0, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<code>contenthash<\/code>\u00a0\u2014 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<p>\u041d\u043e \u043c\u044b \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0443\u043b\u044f. \u041c\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0430\u043a\u0442 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 ASP.NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Razor, \u0430 \u0444\u0430\u0439\u043b\u044b \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 cshtml. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 ASP.NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, cshtml \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 dll \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c cshtml \u0444\u0430\u0439\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0<code>HtmlWebpackPlugin<\/code>\u2019\u0430 \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437\u00a0<code>Html.PartialAsync<\/code>.<\/p>\n<pre><code class=\"cs\">@await Html.PartialAsync(\"~\/Views\/load-lib.cshtml\")<\/code><\/pre>\n<p>\u041d\u043e \u0442\u043e\u0433\u0434\u0430, \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0438\u043b\u0434\u0430 \u0444\u0440\u043e\u043d\u0442\u0430, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438 \u0431\u0438\u043b\u0434 ASP.NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0441\u0451 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u0430\u00a0<code>js<\/code>\u00a0\u0444\u0430\u0439\u043b\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438\u0437-\u0437\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f contenthash\u2019\u0430. \u0418\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u201c<a href=\"https:\/\/webpack.js.org\/concepts\/manifest\/\" rel=\"noopener noreferrer nofollow\"><u>\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442<\/u><\/a>\u201d, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0438 \u043d\u0443\u0436\u0435\u043d\u00a0<code>WebpackManifestPlugin<\/code>\u00a0\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a (\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435):<\/p>\n<pre><code class=\"json\">{   \"lib.js\": \".\/lib.016f9cc5.js\",   \"app-header.js\": \".\/app-header.3d395df7.js\",   \"react-dom.js\": \".\/react-dom.491b536c.js\",   \"index.html\": \".\/index.html\" }<\/code><\/pre>\n<p>\u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430\u00a0<code>lib.js<\/code>\u00a0\u0438 \u043f\u0443\u0442\u044c \u0441 \u0441\u0430\u043c\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443\u00a0<code>.\/lib.016f9cc5.js<\/code>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e.<\/p>\n<pre><code class=\"cs\">\/\/ load-lib.cshtml   @using Newtonsoft.Json.Linq @{     const string manifestPath = \".\/path\/to\/dist\/asset-manifest.json\";     string assetManifestString = await System.IO.File.ReadAllTextAsync(manifestPath);     JObject assetManifest = JObject.Parse(assetManifestString);       string myLibChunkName = assetManifest.SelectToken(\"['lib.js']\")?.Value&lt;string&gt;(); }   &lt;script src=\"~\/@myLibChunkName\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435, \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5b1\/f5a\/d4d\/5b1f5ad4de5163cb8b1aa01958954f9b.png\" alt=\"\" title=\"\" width=\"2074\" height=\"885\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5b1\/f5a\/d4d\/5b1f5ad4de5163cb8b1aa01958954f9b.png\"\/><\/figure>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B5%D0%BB%D1%8C%D0%B7%D1%8F-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C\" id=\"\u043d\u0435\u043b\u044c\u0437\u044f-\u043f\u0440\u043e\u0441\u0442\u043e-\u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\"><\/a><\/p>\n<h3>\u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432\u0437\u044f\u0442\u044c \u0438 \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/h3>\n<p>\u041a\u00a0\u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043e\u0442\u00a0\u043b\u0435\u0433\u0430\u0441\u0438 \u00ab\u043d\u0435 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u00a0\u0441\u043a\u0440\u044b\u0442\u044c\u0441\u044f, \u2026\u00bb. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u00a0JQuery \u0432\u043d\u0443\u0442\u0440\u0438 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0ac\/662\/5e4\/0ac6625e475982067b0a5b4fb4f0bec7.png\" alt=\"\" title=\"\" width=\"1044\" height=\"703\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0ac\/662\/5e4\/0ac6625e475982067b0a5b4fb4f0bec7.png\"\/><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043e\u0431\u0451\u0440\u0442\u043a\u0438. \u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u043e \u043e\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a.<\/p>\n<pre><code class=\"typescript\">function Calendar(props: CalendarProps) { const ref = useRef&lt;HTMLDivElement&gt;(null);   useEffect(() =&gt; {         \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 JQuery Components.Common.createCalendar({ container: ref.current, ...props }); }, [])   return &lt;div ref={ref}&gt;&lt;\/div&gt;; }<\/code><\/pre>\n<p><a class=\"anchor\" name=\"typescript-%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80\" id=\"typescript-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\"><\/a><\/p>\n<h3>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0442\u0438\u043f\u043e\u0432<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041d\u043e \u043f\u0440\u043e \u043a\u043e\u0435-\u0447\u0442\u043e \u043c\u044b \u0437\u0430\u0431\u044b\u043b\u0438. \u041c\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u043f\u0440\u043e \u0442\u0438\u043f\u044b!<\/p>\n<p>\u041c\u044b \u043b\u044e\u0431\u0438\u043c TypeScript, \u0438 \u043d\u0435 \u043b\u044e\u0431\u0438\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0431\u0435\u0437 \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0439 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432. CRA \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 babel \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432 \u0438 \u043f\u043e\u0442\u043e\u043c\u0443 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00a0<code>.d.ts<\/code>\u00a0\u0444\u0430\u0439\u043b\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u00a0<code>tsc<\/code>\u00a0\u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<pre><code class=\"bash\">tsc -p generate-types-tsconfig.json<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0442\u0430\u043a\u043e\u0439 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 TypeScript \u2014\u00a0<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/babel-with-typescript.html#babel-for-transpiling-tsc-for-types\" rel=\"noopener noreferrer nofollow\"><u>Babel for transpiling, tsc for types<\/u><\/a>.<\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"json\">\/\/ generate-types-tsconfig.json { \"include\": [ \"src\/library.tsx\" ], \"compilerOptions\": { \"declaration\": true, \"emitDeclarationOnly\": true, \"moduleResolution\": \"bundler\", \"module\": \"es2022\", \"outFile\": \".\/dist\/types.d.ts\", \"jsx\": \"react\" }, \"exclude\": [ \"node_modules\" ] }<\/code><\/pre>\n<ul>\n<li>\n<p><code>declaration<\/code>,\u00a0<code>emitDeclarationOnly<\/code>\u00a0&#8212; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u044b \u0442\u0438\u043f\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><code>outFile<\/code>\u00a0&#8212; \u043f\u0443\u0442\u044c, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0444\u0430\u0439\u043b \u0441 \u0442\u0438\u043f\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p><code>moduleResolution<\/code>,\u00a0<code>module<\/code>\u00a0&#8212; \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p>\u0424\u0430\u0439\u043b \u0441 \u0442\u0438\u043f\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">\/\/\/ &lt;reference types=\"react\" \/&gt; declare module \"components\/AppHeader\" {     import React from \"react\";     export interface AppHeaderProps {         title: string;     }     export function AppHeader({ title }: AppHeaderProps): React.JSX.Element; } declare module \"library\" {     import { type AppHeaderProps } from \"components\/AppHeader\";     export function renderAppHeader(props: AppHeaderProps, container: HTMLElement): Promise&lt;void&gt;; }<\/code><\/pre>\n<p>\u041d\u043e \u044d\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u0432\u0441\u0451. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0438\u043c\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00a0<code>myLib<\/code>? \u0422\u0430\u043a\u00a0<code>tsc<\/code>\u00a0\u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442. \u041a\u0430\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u043b\u0438 \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043e\u043a:<\/p>\n<ol>\n<li>\n<p>\u0443\u0434\u0430\u043b\u0438\u043b\u0438\u00a0<code>} declare module \"path\/to\/mo\"<\/code><\/p>\n<\/li>\n<li>\n<p>\u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0439\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442 (\u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0435\u043c\u00a0<code>}<\/code>) \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 \u043d\u0430\u00a0<code>declare module myLib<\/code><\/p>\n<\/li>\n<li>\n<p>\u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438:<\/p>\n<pre><code class=\"typescript\">\/\/\/ &lt;reference path=\"react.d.ts\" \/&gt;   declare module myLib { export interface AccountDialogProps { firstName: string; lastName: string; } export function AccountDialog({ firstName, lastName }: AccountDialogProps): React.JSX.Element;   export function renderAlertDialog(): void; export function renderAccountDialog(props: AccountDialogProps, container: HTMLElement): Promise&lt;void&gt;; }<\/code><\/pre>\n<p>\u041d\u043e \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0433\u043e \u0447\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0438\u0447\u0435\u0433\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0438\u0442\u043e\u0433\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b\u0438. \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0442\u0438\u043f\u044b \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b, \u043d\u043e \u043d\u0430\u043c \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u043e\u043d \u0434\u0430\u0451\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0430\u0432\u0442\u043e\u043a\u043e\u043c\u043f\u043b\u0438\u0442 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p><a class=\"anchor\" name=\"zustand\" id=\"zustand\"><\/a><\/p>\n<h3>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u2014 Zustand<\/h3>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0443 \u043d\u0430\u0441 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0441\u0442\u0435\u0439\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430, \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0430 useState\/useReducer + useContext. \u041d\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>useContext \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u0412 useReducer \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u0435\u0439\u0442\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 Zustand. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e \u2014\u00a0<a href=\"https:\/\/t.me\/cherkashindev\/124\" rel=\"noopener noreferrer nofollow\"><u>\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/u><\/a>, \u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435 React, \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">\/\/ src\/stores\/AppStore.ts import { create } from 'zustand'   const useBearStore = create((set) =&gt; ({   bears: 0,   increasePopulation: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),   removeAllBears: () =&gt; set({ bears: 0 }), }))   \/\/ library.tsx \/\/ ... \/\/ \u041f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 AppStore \u0438\u0437 library.tsx \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0431\u0430\u043d\u0434\u043b export { useAppStore as AppStore } from '.\/stores\/AppStore';   \/\/... <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c AppStore:<\/p>\n<pre><code class=\"typescript\">myLib.AppStore.increasePopulation();<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D1%81%D1%82%D0%B8%D0%BB%D0%B8\" id=\"\u0441\u0442\u0438\u043b\u0438\"><\/a><\/p>\n<h3>\u0421\u0442\u0438\u043b\u0438<\/h3>\n<p>\u0412 \u043d\u043e\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u2014 \u043a\u043b\u0430\u0434\u0451\u043c \u0440\u044f\u0434\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438<\/p>\n<\/li>\n<li>\n<p>\u0442\u0435\u0441\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u0442\u043e\u0440\u0438\u0431\u0443\u043a\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 LESS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0432 \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<a href=\"https:\/\/pnpm.io\/workspaces\" rel=\"noopener noreferrer nofollow\"><u>pnpm-\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/u><\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438\u00a0<code>package.json<\/code>\u00a0\u0432 \u043f\u0430\u043f\u043a\u0435 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0440\u0435\u0430\u043a\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0435:<\/p>\n<pre><code class=\"json\">... \"legacy-styles\": \"workspace:*\" ...<\/code><\/pre>\n<p>\u0418 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0444\u0430\u0439\u043b \u0432 \u0441\u0442\u0438\u043b\u044f\u0445.<\/p>\n<pre><code class=\"css\">@import (reference) '~legacy-styles\/themes\/tokens.less';<\/code><\/pre>\n<p>\u0422\u0438\u043b\u044c\u0434\u0430\u00a0<code>~<\/code>\u00a0\u043f\u0435\u0440\u0435\u0434\u00a0<code>legacy-styles<\/code>\u00a0\u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0432\u0435\u0431\u043f\u0430\u043a\u0443, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435\u00a0<code>node_modules<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%B5%D1%81%D0%BE%D1%87%D0%BD%D0%B8%D1%86%D0%B0\" id=\"\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430\"><\/a><\/p>\n<h2>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/h2>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u043c\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c CRA \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435? \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435\u0442 Hot Reload\u2019\u0430 \ud83d\ude2e. \u042d\u0442\u0443 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043c\u043e\u0433\u043b\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u00a0<code>pnpm run build<\/code>\u00a0\u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0451 \u0442\u043e, \u0447\u0442\u043e \u044f \u043e\u043f\u0438\u0441\u0430\u043b \u0432\u044b\u0448\u0435. \u041d\u043e \u043f\u0440\u0438\u00a0<code>pnpm start<\/code>\u00a0\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0440\u0435\u0430\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435\u0439. \u041f\u043e \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u043e\u0440\u0438\u0431\u0443\u043a, \u043d\u043e \u0432 \u043d\u0451\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c API \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0440\u0435\u0430\u043a\u0442 \u0440\u043e\u0443\u0442\u0435\u0440, \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0444\u0438\u0447\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0443\u0440\u043b\u0443.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u0442\u043e\u0433, \u0442\u043e \u0441 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u0434 \u0441\u0442\u0430\u043b\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u044b \u043b\u0435\u0433\u0447\u0435.<\/p>\n<p>\u041d\u043e \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043d\u0435 \u0432\u0441\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0440\u0435\u0430\u043a\u0442 \u0438\u043b\u0438 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u043c\u0438 \u0438 \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0434 \u0440\u0435\u0432\u044c\u044e. \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u0430 \u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043b\u044e\u0434\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0435 \u043a\u043e\u0434 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c, \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0440\u0435\u0430\u043a\u0442 \u0438\u043b\u0438 \u0438\u0434\u0435\u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \ud83d\ude4f.<\/p>\n<p>\u041a\u043e\u0434 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430\u00a0<a href=\"https:\/\/github.com\/acherkashin\/webpack-lib\" rel=\"noopener noreferrer nofollow\"><u>\u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/u><\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0434\u043f\u0438\u0448\u0438\u0442\u0435\u0441\u044c \u043d\u0430\u00a0<a href=\"https:\/\/t.me\/cherkashindev\" rel=\"noopener noreferrer nofollow\"><u>\u043c\u043e\u0439 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c\u043c \u043a\u0430\u043d\u0430\u043b \u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e<\/u><\/a>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/866158\/\"> https:\/\/habr.com\/ru\/articles\/866158\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<ul>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D1%8B%D0%B9-%D1%81%D1%82%D0%B5%D0%BA\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0441\u0442\u0435\u043a<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B4%D0%BE-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%B0\" rel=\"noopener noreferrer nofollow\"><u>\u0416\u0438\u0437\u043d\u044c \u0434\u043e \u0440\u0435\u0430\u043a\u0442\u0430 \u2014 JQuery<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B5%D0%B9%D0%BC%D1%81%D0%BF%D0%B5%D0%B9%D1%81%D1%8B\" rel=\"noopener noreferrer nofollow\"><u>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#react-like-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82\" rel=\"noopener noreferrer nofollow\"><u>React-like \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\"><u>\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f<\/u><\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-react\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u043e\u0447\u0435\u043c\u0443 React?<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4-%D0%BA-%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\"><u>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F-webpack\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Webpack<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B8%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B5%D0%BB%D1%8C%D0%B7%D1%8F-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C\" rel=\"noopener noreferrer nofollow\"><u>\u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432\u0437\u044f\u0442\u044c \u0438 \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#typescript-%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0442\u0438\u043f\u043e\u0432<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#zustand\" rel=\"noopener noreferrer nofollow\"><u>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u2014 Zustand<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%81%D1%82%D0%B8%D0%BB%D0%B8\" rel=\"noopener noreferrer nofollow\"><u>\u0421\u0442\u0438\u043b\u0438<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%B5%D1%81%D0%BE%D1%87%D0%BD%D0%B8%D1%86%D0%B0\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\"><u>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/u><\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u043a\u0440\u0443\u0433 \u0432\u0441\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0440\u0435\u0430\u043a\u0442\u0430, \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u043e\u0432\u0448\u0435\u0441\u0442\u0432\u0430\u0445 \u0432 \u043c\u0438\u0440\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u041a\u0430\u043a \u0431\u0443\u0434\u0442\u043e JQuery \u0432 \u043e\u0434\u0438\u043d \u043c\u0438\u0433 \u0432\u0437\u044f\u043b \u0438 \u0438\u0441\u0447\u0435\u0437. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043e\u043d \u0432\u0441\u0451 \u0435\u0449\u0451\u00a0<a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" rel=\"noopener noreferrer nofollow\"><u>\u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439<\/u><\/a>\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \ud83d\ude05.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0441 JQuery \u043d\u0430 React.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f, \u0437\u0430\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u0432 \u043c\u043e\u0439\u00a0<a href=\"https:\/\/t.me\/cherkashindev\" rel=\"noopener noreferrer nofollow\"><u>Telegram-\u043a\u0430\u043d\u0430\u043b<\/u><\/a>\u00a0\u2014 \u0442\u0430\u043c \u044f \u0434\u0435\u043b\u044e\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u043c\u0438 \u0438 \u043c\u044b\u0441\u043b\u044f\u043c\u0438 \u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BC%D0%B8%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" id=\"\u043f\u043e\u0447\u0435\u043c\u0443-\u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c\">\u0433\u0440\u0438\u0440\u0443\u0435\u043c&#187;<\/a><\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u0438\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/h2>\n<p>\u0422\u0443\u0442 \u0432\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0434\u0451\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0441\u043b\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c<\/p>\n<\/li>\n<li>\n<p>XSS \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u0441\u0442\u0435\u0440\u0435\u0433\u0430\u044e\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0443<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c NPM \u0438\u0437-\u0437\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0438\u043c\u0451\u043d (namespace) \u0432 TypeScript<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D1%8B%D0%B9-%D1%81%D1%82%D0%B5%D0%BA\" id=\"\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439-\u0441\u0442\u0435\u043a\">\u0439-\u0441\u0442\u0435\u043a&#187;<\/a><\/p>\n<h3>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0441\u0442\u0435\u043a<\/h3>\n<p>\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u0430\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 2019 \u0433\u043e\u0434\u0443. \u041d\u0430\u0448 \u0441\u0442\u0435\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\n<p><a href=\"http:\/\/asp.net\/\" rel=\"noopener noreferrer nofollow\"><u>ASP.NET<\/u><\/a>\u00a0Core<\/p>\n<\/li>\n<li>\n<p>JQuery<\/p>\n<\/li>\n<li>\n<p>TypeScript c\u00a0<a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/namespaces.html\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\u043c\u0438 \u0438\u043c\u0451\u043d<\/u><\/a>\u00a0\u0432\u043c\u0435\u0441\u0442\u043e ESM<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e Vanilla JS<\/p>\n<\/li>\n<li>\n<p>LESS \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u0441\u0442\u0435\u043a \u0432\u0430\u0436\u0435\u043d, \u0432\u0435\u0434\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0435\u0439 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043e\u0434 \u0434\u043e React. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u2014 \u0441\u0440\u0430\u0437\u0443\u00a0<a href=\"#%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/u><\/a>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B4%D0%BE-%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%B0\" id=\"\u0434\u043e-\u0440\u0435\u0430\u043a\u0442\u0430\">\u043a\u0442\u0430&#187;><\/a><\/p>\n<h3>\u0416\u0438\u0437\u043d\u044c \u0434\u043e \u0440\u0435\u0430\u043a\u0442\u0430 \u2014 JQuery<\/h3>\n<p>\u0412 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">namespace App.Components { export interface ComboBoxProps { container: JQuery; items: ComboBoxItem[]; renderOption: (item: ComboBoxItem) =&gt; JQuery; }  export class ComboBox { constructor(private props: ComboBoxProps) { \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0435\u0451 \u0432 container this.container.append(this.render()); }   private render(): JQuery { const viewItems = this.props.items.map(this.props.renderOption); \/\/ ... \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 return view; }   setItems() { \/* ... *\/ } enable() { \/* ... *\/ } disable() { \/* ... *\/ } } }<\/code><\/pre>\n<p>\u041c\u044b \u0441 \u0437\u0430\u0432\u0438\u0441\u0442\u044c\u044e \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043d\u0430 React, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043f\u043e\u0445\u043e\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0435:<\/p>\n<ul>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 render<\/p>\n<\/li>\n<li>\n<p>Render Props \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B5%D0%B9%D0%BC%D1%81%D0%BF%D0%B5%D0%B9%D1%81%D1%8B\" id=\"\u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b\">\u0435\u0439\u0441\u044b&#187;><\/a><\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 C# \u0438\u043b\u0438 \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 TypeScript, \u0442\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043e\u043d\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 JavaScript \u043e\u0431\u044a\u0435\u043a\u0442, \u0430 \u0432\u0441\u0435\u00a0<code>export<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0451\u043d \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"typescript\">namespace Personnel {     export class Employee {               constructor(public name: string){         }     } }   let alice = new Personnel.Employee(\"Alice\"); console.log(alice.name);    \/\/ Alice<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/IIFE\" rel=\"noopener noreferrer nofollow\"><u>IIFE<\/u><\/a>:<\/p>\n<pre><code class=\"typescript\">var Personnel; (function (Personnel) {       class Employee {         constructor(name) {             this.name = name;         }     }       Personnel.Employee = Employee;   })(Personnel || (Personnel = {}));   let alice = new Personnel.Employee(\"Alice\"); console.log(alice.name); \/\/ Alice<\/code><\/pre>\n<p><a class=\"anchor\" name=\"react-like-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BA%D1%81%D1%82\" id=\"react-like-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\">\u043a\u0441\u0442&#187;><\/a><\/p>\n<h3>React-like \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/h3>\n<p>\u041c\u044b \u0434\u0430\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0435\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 React \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430. \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JQuery \u043c\u0435\u0442\u043e\u0434\u0430\u00a0<code>$('.container').data(dataName, value)<\/code>. \u0410 \u0434\u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e React-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443) \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u043e\u0433\u043e DOM \u0443\u0437\u043b\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430\u00a0<code>findData<\/code>.<\/p>\n<pre><code class=\"typescript\">export function findData(element: JQuery, dataName: string) { if (!element) { return null; }   const data = element.data(dataName); if (data) { return data; }   const dataOwner = element.closest(`:data(\"${dataName}\")`); if (dataOwner) { return dataOwner.data(dataName); } return null; }<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D1%8F\" id=\"\u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f\">\u0446\u0438\u044f&#187;><\/a><\/p>\n<h2>\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u044f<\/h2>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-react\" id=\"\u043f\u043e\u0447\u0435\u043c\u0443-react\">eact&#187;><\/a><\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 React?<\/h3>\n<p>\u041c\u044b \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u0441 \u043d\u0443\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 Angular \u043d\u0430\u043c \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b \u2014 \u0432\u044b\u0431\u043e\u0440 \u0441\u0442\u043e\u044f\u043b \u043c\u0435\u0436\u0434\u0443 React \u0438 Vue. \u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441 \u043e\u043f\u044b\u0442\u043e\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 JQuery \u043d\u0430 React, \u0442\u043e \u0432\u044b\u0431\u043e\u0440 \u043f\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0433\u043e.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4-%D0%BA-%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" id=\"\u043f\u043e\u0434\u0445\u043e\u0434-\u043a-\u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438\">\u0438\u0433\u0440\u0430\u0446\u0438\u0438&#187;<\/a><\/p>\n<h3>\u041f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/h3>\n<p>\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u044b \u0438 ES-\u043c\u043e\u0434\u0443\u043b\u0438. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0442\u043e\u0436\u0435 \u043d\u0435\u0442. \u041a\u043e\u043c\u0430\u043d\u0434\u0430\u00a0<a href=\"https:\/\/devblogs.microsoft.com\/typescript\/typescripts-migration-to-modules\/\" rel=\"noopener noreferrer nofollow\"><u>TypeScript \u043f\u0438\u0441\u0430\u043b\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442<\/u><\/a>\u00a0\u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b TypeScript\u2019\u0430 (TypeScript \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 TypeScript\u2019\u0435!) \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 AST.<\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c React \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0423 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430:<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043d\u0430 ES-\u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c React<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0433\u0434\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0435. \u041d\u0438\u043a\u0430\u043a\u043e\u0433\u043e JQuery!<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0434\u0442\u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0443\u0442\u0451\u043c.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c webpack-\u043a\u043e\u043d\u0444\u0438\u0433 \u0441 \u043d\u0443\u043b\u044f \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u043b\u0438 Create React App (CRA) \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 Eject. \u041f\u043e\u0442\u043e\u043c \u043c\u044b\u00a0<a href=\"https:\/\/create-react-app.dev\/docs\/alternatives-to-ejecting\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0444\u043e\u0440\u043a<\/u><\/a>, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438, \u0442\u043e\u0433\u0434\u0430 CRA \u0431\u044b\u043b \u0435\u0449\u0451 \u0436\u0438\u0432 \ud83e\udea6.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" id=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\">\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432&#187;<\/a><\/p>\n<h3>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>\u041f\u0440\u043e \u0440\u0435\u0430\u043a\u0442 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0442\u044e\u0433\u0430 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e View \u0441\u043b\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>\u041c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u0448 \u0440\u0435\u0430\u043a\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439. \u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u0435\u0430\u043a\u0442-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e\u00a0<code>createRoot<\/code>\u00a0(\u0434\u043e React18 \u2014\u00a0<code>ReactDOM.render<\/code>).<\/p>\n<p>\u0412\u0441\u0435 \u0432\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"typescript\">import { createRoot } from 'react-dom\/client';   const container = document.getElementById(\"root\")!; const root = createRoot(container);   root.render(&lt;App \/&gt;);<\/code><\/pre>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u00a0<code>index.tsx<\/code>\u00a0\u0444\u0430\u0439\u043b\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442 \u043a\u043c\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 React17 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<code>ReactDOM.render<\/code>, \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 React 18 \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043e\u0431\u0451\u0440\u0442\u043a\u0443\u00a0<code>renderComponent<\/code>\u00a0\u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u00a0<code>createRoot()<\/code>. \u041a\u043e\u0434 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043c\u043e\u0436\u043d\u043e\u00a0<a href=\"https:\/\/github.com\/acherkashin\/webpack-lib\/blob\/main\/src\/utils\/RenderUtils.tsx\" rel=\"noopener noreferrer nofollow\"><u>\u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<pre><code class=\"typescript\">import { Root } from 'react-dom\/client';   const roots = new Map&lt;HTMLElement, Root&gt;();   export async function renderComponent({ container, component, autoUnmount }: IRenderComponentProps) {     const { createRoot } = await import('react-dom\/client');     const isUpdate = roots.has(container);     const root = isUpdate ? roots.get(container)! : createRoot(container);       if (!isUpdate) {         roots.set(container, root);         if (autoUnmount) {             onDetach(container, () =&gt; unMount(container));         }     }       try {         root.render(component);     } catch (e) { } }<\/code><\/pre>\n<p>\u0412\u0435\u0441\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435\u00a0<code>library.tsx<\/code>. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0440\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"typescript\">export async function renderAppHeader(props: AppHeaderProps, container: HTMLElement) {     const { AppHeader } = await import('.\/components\/AppHeader');       return renderComponent({         container,         component: &lt;AppHeader {...props} \/&gt;,         autoUnmount: true     }); }<\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0436\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/#dynamic-imports\" rel=\"noopener noreferrer nofollow\"><u>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/u><\/a>\u00a0\u0434\u043b\u044f \u043a\u043e\u0434 \u0441\u043f\u043b\u0438\u0442\u0438\u043d\u0433\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e\u00a0<a href=\"https:\/\/swizec.com\/blog\/the-anatomy-of-a-react-island\/\" rel=\"noopener noreferrer nofollow\"><u>The anatomy of a React Island<\/u><\/a>, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B0%D1%86%D0%B8%D1%8F-webpack\" id=\"\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f-webpack\">\u044f-webpack&#187;><\/a><\/p>\n<h3>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Webpack<\/h3>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Create React App \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 webpack-\u043a\u043e\u043d\u0444\u0438\u0433. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c CRA \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438, \u043d\u043e \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u2014 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">const { WebpackManifestPlugin } = require('webpack-manifest-plugin');   module.exports = {   entry: {     'lib': '.\/src\/library.tsx'   },   output: {     filename: '[name].[contenthash:8].js',     library: {       name: 'myLib',       type: 'umd',     },     clean: true,   },   plugins: [     new WebpackManifestPlugin({       fileName: 'asset-manifest.json',       publicPath: '.\/',     }),   ], };<\/code><\/pre>\n<p>\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0431\u0435\u0436\u0438\u043c\u0441\u044f \u043f\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443.<\/p>\n<p><code>entry: { 'lib': '.\/src\/library.tsx' }<\/code>\u00a0\u2014\u00a0<code>src\/library.tsx<\/code>\u00a0&#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0422\u0443\u0442 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041f\u043e\u0441\u043b\u0435 \u0431\u0438\u043b\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c\u00a0<code>lib.[contenthash].js<\/code>\u00a0 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>lib.94c4847c.js<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p><code>output.library.name: 'myLib'<\/code> \u2014 \u0438\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u00a0<code>library.tsx<\/code>.<\/p>\n<p><code>output.library.type<\/code>:\u00a0<a href=\"https:\/\/webpack.js.org\/configuration\/output\/#librarytarget-umd\" rel=\"noopener noreferrer nofollow\"><u>&#8216;umd&#8217;<\/u><\/a>, \u0442\u0438\u043f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u043a\u0430\u043a \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u00a0<a href=\"https:\/\/webpack.js.org\/configuration\/output\/#librarytarget-window\" rel=\"noopener noreferrer nofollow\"><u>window<\/u><\/a>\u00a0\u0438\u043b\u0438\u00a0<a href=\"https:\/\/webpack.js.org\/configuration\/output\/#type-var\" rel=\"noopener noreferrer nofollow\"><u>var<\/u><\/a>\u00a0\u0442\u043e\u0436\u0435 \u0431\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438.<\/p>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u00a0<code>src\/library.tsx<\/code>\u00a0\u0431\u0443\u0434\u0435\u0442 \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u00a0<code>myLib<\/code>\u00a0\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. \u0412 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c\u00a0<code>renderAppHeader<\/code>\u00a0\u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"swift\">myLib.renderAppHeader(document.getElementById('header-container'), { title: 'Cool App', \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b ... })<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%B8%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC\" id=\"\u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c\">\u0438\u0440\u0443\u0435\u043c&#187;<\/a><\/p>\n<h3>\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c<\/h3>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c, \u043d\u043e \u043a\u0430\u043a \u0435\u0451 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442?<\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432\u00a0<code>index.html<\/code>\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f\u00a0<code>HtmlWebpackPlugin<\/code>\u00a0, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<code>contenthash<\/code>\u00a0\u2014 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<p>\u041d\u043e \u043c\u044b \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0443\u043b\u044f. \u041c\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0430\u043a\u0442 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 ASP.NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0433\u0434\u0435 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Razor, \u0430 \u0444\u0430\u0439\u043b\u044b \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 cshtml. \u041f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 ASP.NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, cshtml \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 dll \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>\u041c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c cshtml \u0444\u0430\u0439\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0<code>HtmlWebpackPlugin<\/code>\u2019\u0430 \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437\u00a0<code>Html.PartialAsync<\/code>.<\/p>\n<pre><code class=\"cs\">@await Html.PartialAsync(\"~\/Views\/load-lib.cshtml\")<\/code><\/pre>\n<p>\u041d\u043e \u0442\u043e\u0433\u0434\u0430, \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0438\u043b\u0434\u0430 \u0444\u0440\u043e\u043d\u0442\u0430, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438 \u0431\u0438\u043b\u0434 ASP.NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0441\u0451 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u0430\u00a0<code>js<\/code>\u00a0\u0444\u0430\u0439\u043b\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438\u0437-\u0437\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f contenthash\u2019\u0430. \u0418\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u201c<a href=\"https:\/\/webpack.js.org\/concepts\/manifest\/\" rel=\"noopener noreferrer nofollow\"><u>\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442<\/u><\/a>\u201d, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0438 \u043d\u0443\u0436\u0435\u043d\u00a0<code>WebpackManifestPlugin<\/code>\u00a0\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u041c\u0430\u043d\u0438\u0444\u0435\u0441\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a (\u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435):<\/p>\n<pre><code class=\"json\">{   \"lib.js\": \".\/lib.016f9cc5.js\",   \"app-header.js\": \".\/app-header.3d395df7.js\",   \"react-dom.js\": \".\/react-dom.491b536c.js\",   \"index.html\": \".\/index.html\" }<\/code><\/pre>\n<p>\u041e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430\u00a0<code>lib.js<\/code>\u00a0\u0438 \u043f\u0443\u0442\u044c \u0441 \u0441\u0430\u043c\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443\u00a0<code>.\/lib.016f9cc5.js<\/code>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e.<\/p>\n<pre><code class=\"cs\">\/\/ load-lib.cshtml   @using<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\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-443148","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443148","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=443148"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443148\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}