{"id":325768,"date":"2021-06-30T15:01:24","date_gmt":"2021-06-30T15:01:24","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=325768"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=325768","title":{"rendered":"\u041a\u0430\u0440\u0433\u043e-\u043a\u0443\u043b\u044c\u0442 HTML \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p>\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u043c\u0438\u0442\u0440\u0438\u0439 \u041a\u0430\u0440\u043b\u043e\u0432\u0441\u043a\u0438\u0439 \u0438 \u044f\u2026 \u043b\u044e\u0431\u043b\u044e \u0440\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b. \u0410 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u043a\u0440\u0430\u0439\u043d\u0435 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0439 \u0432\u043e\u043a\u0440\u0443\u0433 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0440\u0432\u0451\u043c \u0438\u0445 \u043d\u0430 \u043b\u043e\u0441\u043a\u0443\u0442\u044b \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ys\/ao\/1l\/ysao1lff2xn8ope1eq2cxqdesae.jpeg\" alt=\"\u0420\u0430\u0437\u0440\u044b\u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b. \u0418\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 \u0438 \u0444\u0430\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. \u0417\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0438 \u043f\u0440\u043e\u0435\u0434\u0435\u043c\u0441\u044f \u043a\u0430\u0442\u043a\u043e\u043c \u043f\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u043d\u0430\u044f \u0433\u0430\u043c\u043c\u0430 \u0447\u0443\u0432\u0441\u0442\u0432 \u043d\u0430\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0430.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041f\u0440\u043e\u0448\u0443 \u043a \u0441\u0442\u043e\u043b\u0443..<\/p>\n<p>  <\/p>\n<h1 id=\"a-chto-takoe-shablon\">\u0410 \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d?<\/h1>\n<p>  <\/p>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0442\u0443\u0442 \u0432\u0441\u0451 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e: \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0446\u0435\u043b\u0435\u0432\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432\u0441\u0451 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u0440\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432..<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&quot;Hello, ${name}!&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&quot;Hello&quot; + name + &quot;!&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0430 \u043a\u043e\u0434\u0430 \u0434\u0435\u043b\u0430\u044e\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435, \u043d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u0434\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, \u0430 \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 \u043d\u0435\u0442? \u0412\u0441\u0451 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u044f\u0437\u044b\u043a \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u043c \u0432 \u043a\u043e\u0434\u0435, \u0430 \u043a\u0430\u043a\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u0431\u0430\u0432\u043a\u043e\u0439 \u043a \u043d\u0435\u043c\u0443. \u0428\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0446\u0435\u043b\u0435\u0432\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u0432\u043a\u0440\u0430\u043f\u043b\u044f\u044f \u0432 \u043d\u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u044b \u0441 \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u042f\u0440\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0432 <a href=\"https:\/\/en.wikipedia.org\/wiki\/XSLT\" rel=\"nofollow noopener noreferrer\">XSLT<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;xsl:template name=&quot;page&quot;&gt;     &lt;acticle&gt;         &lt;h1&gt;             &lt;xsl:copy-of select=&quot;.\/head&quot; \/&gt;         &lt;\/h1&gt;         &lt;xsl:copy-of select=&quot;.\/body&quot; \/&gt;     &lt;\/article&gt; &lt;\/xsl:template&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434, \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 1 \u0438 3 \u0441\u0442\u0440\u043e\u043a\u0435, \u0432 \u0446\u0435\u043b\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u0432\u0441\u0451 \u0436\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043d\u0443\u0436\u043d\u043e \u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c JSX-\u043a\u043e\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const head = &lt;h1&gt;{ headContent }&lt;\/h1&gt; const body = 'Hello, World' const article = &lt;article&gt;{ head }{ body }&lt;\/article&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0435\u0441\u043b\u0438 \u0432\u0437\u044f\u0442\u044c \u043f\u0430\u0440\u0441\u0435\u0440 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u0442\u043e \u043e\u043d \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438 \u0441 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u043d\u0438\u043a\u0430\u043a \u0438\u0445 \u043d\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f. \u0418, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 <strong>\u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0430 \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0443\u043c\u0435<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u043e\u0434 \u043d\u0430 JSX \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, \u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c \u0438 \u043d\u0435 \u0431\u044b\u0442\u044c. \u0418 \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u043e\u043d \u0432\u0441\u0451 \u0436\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u043e\u0434\u0440\u0430\u0436\u0430\u043d\u0438\u0435 HTML.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-s\/kf\/nb\/-skfnbvrnrb8yiadeqn9vg51vxk.jpeg\" alt=\"\u0417\u043b\u043e\u0432\u0435\u0449\u0430\u044f \u0434\u043e\u043b\u0438\u043d\u0430\"><\/p>\n<p>  <\/p>\n<h1 id=\"a-neobhodim-li-html\">\u0410 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043b\u0438 HTML?<\/h1>\n<p>  <\/p>\n<p>\u0412\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f HTML. \u0410 HTML \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0431\u043e\u043b\u0435\u0435, \u0447\u0435\u043c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c DOM \u0434\u0435\u0440\u0435\u0432\u0430. \u0418 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e HTML \u0431\u044b\u043b \u044f\u0437\u044b\u043a\u043e\u043c \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0432\u0435\u0431\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f HTML, \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044f JSON, ProtoBuf \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043b\u0438\u0435\u043d\u0442 \u0443\u0436\u0435 \u0441\u0430\u043c \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 DOM \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0447\u0435\u0440\u0435\u0437 JS-API, \u043c\u0438\u043d\u0443\u044f HTML \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f DOM <strong>\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e HTML, \u043d\u043e \u0438 \u0438\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 DOM<\/strong>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/haml.info\/docs\/yardoc\/file.REFERENCE.html\" rel=\"nofollow noopener noreferrer\">HAML<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">!!! %html{ :lang =&gt; &quot;ru&quot; }     %head         %title= title         %meta{ 'http-equiv' =&gt; 'Content-Type', :content =&gt; 'text\/html' }\/     %body         %h1= title         %p= description<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438 <a href=\"https:\/\/tree.hyoo.ru\/#!source=!%20DOCTYPE%20html%0Ahtml%0A%09%40%20lang%20%5Cru%0A%09head%0A%09%09title%20%3F%20title%0A%09%09meta%0A%09%09%09%40%20content%20%5Ctext%2Fhtml%3B%20charset%3Dutf-8%0A%09%09%09%40%20http-equiv%20%5CContent-Type%0A%09body%0A%09%09h1%20%3F%20title%0A%09%09p%20%3F%20description%0A\/pipeline=%24mol_tree2_from_string~%24mol_tree2_xml_to_text~%24mol_tree2_text_to_string\" rel=\"nofollow noopener noreferrer\">xml.tree<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">! DOCTYPE html html     @ lang \\ru     head         title ? title         meta             @ content \\text\/html; charset=utf-8             @ http-equiv \\Content-Type     body         h1 ? title         p ? description<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043b\u0438 \u0434\u0430\u0436\u0435 <a href=\"https:\/\/www.npmjs.com\/package\/html2json\" rel=\"nofollow noopener noreferrer\">JSON<\/a>. \u0411\u0435\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0438\u0431\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0436 \u043e\u043d \u0440\u0430\u0437\u0432\u0435\u0441\u0438\u0441\u0442\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u0432\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 HTML-\u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043a\u043e\u0440\u0435\u0435 \u0434\u0430\u043d\u044c\u044e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u0438, \u0447\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html lang='ru'&gt;     &lt;head&gt;         &lt;title&gt;{title}&lt;\/title&gt;         &lt;meta             content='text\/html; charset=utf-8'             http-equiv='Content-Type'         \/&gt;     &lt;\/head&gt;     &lt;body&gt;         &lt;h1&gt;{title}&lt;\/h1&gt;         &lt;p&gt;{description}&lt;\/p&gt;     &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kr\/io\/cp\/kriocpjvwzbbftr15nakjkubyl4.jpeg\" alt=\"\u042d\u0444\u0444\u0435\u043a\u0442 \u0448\u0442\u0443\u0440\u043c\u043e\u0432\u0438\u043a\u0430\"><\/p>\n<p>  <\/p>\n<h1 id=\"a-dostatochno-li-html\">\u0410 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438 HTML?<\/h1>\n<p>  <\/p>\n<p>\u041c\u043e\u0449\u043d\u043e\u0441\u0442\u0438 HTML \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043b\u0438\u0448\u044c \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f DOM. \u041d\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u0443\u044e \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e. \u0410 \u0433\u0434\u0435 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u2014 \u0442\u0430\u043c \u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441\u0432\u044f\u0437\u044f\u043c\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0422\u0443\u0442 \u043d\u0435 \u0442\u043e \u0447\u0442\u043e HTML, \u0430 \u0434\u0430\u0436\u0435 DOM \u0443\u0436\u0435 \u043a\u0430\u0442\u0430\u0441\u0442\u0440\u043e\u0444\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u0447\u0443\u0434\u043e\u0432\u0438\u0449. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u0440\u043e\u0432\u044f\u0437\u0430\u0442\u044c \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u043e\u0432\u0441\u043a\u0438\u0439 &quot;\u0448\u0430\u0431\u043b\u043e\u043d&quot;:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;bi-panel class=&quot;example&quot;&gt;      &lt;check-box         class=&quot;editable&quot;         side=&quot;left&quot;         [(checked)]=&quot;editable&quot;         i18n         &gt;         Editable     &lt;\/check-box&gt;      &lt;text-area         #input         class=&quot;input&quot;         side=&quot;left&quot;         [(value)]=&quot;text&quot;         [enabled]=&quot;editable&quot;         placeholer=&quot;Markdown content..&quot;         i18n-placeholder=&quot;Showed when input is empty&quot;     \/&gt;      &lt;div         *ngIf=&quot;text&quot;         class=&quot;output-label&quot;         side=&quot;right&quot;         i18n         &gt;         Result     &lt;\/div&gt;      &lt;mark-down         *ngIf=&quot;text&quot;         class=&quot;output&quot;         side=&quot;right&quot;         text=&quot;{{text}}&quot;     \/&gt;  &lt;\/bi-panel&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 HTML, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e <a href=\"https:\/\/tree.hyoo.ru\/#!source=%3Cbi-panel%20class%3D%22example%22%3E%0A%09%0A%09%3Ccheck-box%0A%09%09%23editable%0A%09%09class%3D%22editable%22%0A%09%09side%3D%22left%22%0A%09%09%5B%28checked%29%5D%3D%22editable%22%0A%09%09i18n%0A%09%09%3E%0A%09%09Editable%0A%09%3C%2Fcheck-box%3E%0A%09%0A%09%3Ctext-area%0A%09%09%23input%0A%09%09class%3D%22input%22%0A%09%09side%3D%22left%22%0A%09%09%5B%28value%29%5D%3D%22text%22%0A%09%09%5Benabled%5D%3D%22editable%22%0A%09%09placeholer%3D%22Markdown%20content..%22%0A%09%09i18n-placeholder%3D%22Showed%20when%20input%20is%20empty%22%0A%09%2F%3E%0A%09%0A%09%3Cdiv%0A%09%09%23output-label%0A%09%09*ngIf%3D%22text%22%0A%09%09class%3D%22output-label%22%0A%09%09side%3D%22right%22%0A%09%09i18n%0A%09%09%3E%0A%09%09Result%0A%09%3C%2Fdiv%3E%0A%09%0A%09%3Cmark-down%0A%09%09%23output%0A%09%09*ngIf%3D%22text%22%0A%09%09class%3D%22output%22%0A%09%09side%3D%22right%22%0A%09%09text%3D%22%7B%7Btext%7D%7D%22%0A%09%2F%3E%0A%09%0A%3C%2Fbi-panel%3E\/check-box%3E%0A%09%0A%09%3Ctext-area%0A%09%09class=%22input%22%0A%09%09side%3D%22left%22%0A%09%09%5B%28value%29%5D%3D%22text%22%0A%09%09%5Benabled%5D%3D%22editable%22%0A%09%09placeholer%3D%22Markdown%20content..%22%0A%09%09i18n-placeholder%0A%09\/%3E%0A%09%0A%09%3Cdiv%0A%09%09*ngIf=%22text%22%0A%09%09class%3D%22output-label%22%0A%09%09side%3D%22right%22%0A%09%09i18n%0A%09%09%3E%0A%09%09Result%0A%09%3C\/div%3E%0A%09%0A%09%3Cmark-down%0A%09%09*ngIf=%22text%22%0A%09%09class%3D%22output%22%0A%09%09side%3D%22right%22%0A%09%09text%3D%22%7Btext%7D%22%0A%09\/%3E%0A%09%0A%3C\/bi-panel%3E\/%3E%0A%09%0A%09%3Cdiv%0A%09%09class=%22output-label%22%0A%09%09side%3D%22right%22%0A%09%09i18n%0A%09%09%3E%0A%09%09Result%0A%09%3C\/div%3E%0A%09%0A%09%3Cmark-down%0A%09%09class=%22output%22%0A%09%09side%3D%22right%22%0A%09%09text%3D%22%7Btext%7D%22%0A%09\/pipeline=%24mol_dom_parse\" rel=\"nofollow noopener noreferrer\"><strong>\u044d\u0442\u043e \u043d\u0435 HTML<\/strong><\/a>, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u043c \u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 Angular-\u0435\u0432\u0430\u043d\u0433\u0435\u043b\u0438\u0441\u0442\u044b. DOM (\u0438 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 HTML) \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043b\u0438\u0448\u044c \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0410 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0443\u0436\u043d\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a\u0438, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445: \u0447\u0438\u0441\u043b\u0430, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u0434\u0430\u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0418 \u0438\u0445 \u043d\u0430\u0434\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0438\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u043d\u043e \u0438 \u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043b\u0430\u0441\u0442\u044c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0430 \u0442\u043e \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0442\u0443\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f HTML. \u041a\u0430\u0436\u0434\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443, \u043d\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u043d\u0438 \u0432\u0441\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>#input<\/code> \u2014 \u044d\u0442\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0447\u0435\u0440\u0435\u0437 TS.<\/li>\n<li><code>class=&quot;editable&quot;<\/code> \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 CSS.<\/li>\n<li><code>side=&quot;left&quot;<\/code> \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u0441\u043b\u043e\u0442\u0430, \u043a\u0443\u0434\u0430 \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0451\u043d.<\/li>\n<li><code>[(checked)]=&quot;editable&quot;<\/code> \u2014 \u044d\u0442\u043e \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/li>\n<li><code>[enabled]=&quot;editable&quot;<\/code> \u2014 \u044d\u0442\u043e \u0443\u0436\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435.<\/li>\n<li><code>text=&quot;{{text}}&quot;<\/code> \u2014 \u0430 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435.<\/li>\n<li><code>placeholer=&quot;Markdown content..&quot;<\/code> \u2014 \u044d\u0442\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.<\/li>\n<li><code>i18n-placeholder=&quot;Showed when input is empty&quot;<\/code> \u2014 \u0430 \u044d\u0442\u043e, \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e, \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>placeholder<\/code> \u043f\u043e\u0434\u043b\u0435\u0436\u0438\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0443, \u0438 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0443.<\/li>\n<li><code>*ngIf=&quot;text&quot;<\/code> \u2014 \u044d\u0442\u043e \u0436\u0435 \u0432\u043e\u043e\u0431\u0449\u0435 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f, \u0430 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u0443\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 4 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043b\u0435\u0436\u0430\u0442 \u0432\u043f\u0435\u0440\u0435\u043c\u0435\u0448\u043a\u0443, \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u0441\u043b\u043e\u0442\u0443, \u0430 \u0447\u0430\u0441\u0442\u044c \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443. \u0422\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0435 HTML, \u0442\u0430\u043a \u044d\u0442\u043e \u0435\u0449\u0451 \u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0448\u0430\u0431\u043b\u043e\u043d. <strong>\u042d\u0442\u043e \u2014 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043c\u0438\u043c\u0438\u043a\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434 HTML<\/strong>. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0439 \u043c\u0438\u043c\u0438\u043a\u0440\u0438\u0438 \u043e\u043d \u043f\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d \u0433\u043e\u0440\u043e\u0439 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043e\u0441\u043b\u043e\u0436\u043d\u044f\u044e\u0449\u0438\u0445 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0447\u0442\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043a\u0430\u043a \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0435\u0433\u043e \u044d\u0442\u0438 &quot;\u0448\u0430\u0431\u043b\u043e\u043d\u044b&quot; \u0432\u043e \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mi\/mg\/jw\/mimgjwq0ttpkacbd34zh6bf9qjq.jpeg\" alt=\"\u0410 \u0432\u043d\u0443\u0442\u0440\u0435 \u0443 \u043d\u0435\u0439 \u043d\u0435\u043e\u043d\u043a\u0430\"><\/p>\n<p>  <\/p>\n<h1 id=\"no-chem-zhe-html-horosh\">\u041d\u043e \u0447\u0435\u043c \u0436\u0435 HTML \u0445\u043e\u0440\u043e\u0448?<\/h1>\n<p>  <\/p>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e HTML \u2014 \u0435\u0433\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u0412\u043e\u043f\u0440\u0435\u043a\u0438 \u0440\u0430\u0441\u0445\u043e\u0436\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e, \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 &quot;\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442&quot;, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0418 \u044d\u0442\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 &quot;\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432&quot; \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0437\u044f\u0442\u044c HTML \u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u043f\u043b\u043e\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041c\u043e\u0436\u0435\u043c \u0432 VR \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431\u044a\u0451\u043c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c. \u041c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043d\u0435 \u0437\u0440\u044f\u0447\u0438\u0445. \u041c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043a\u043d\u0438\u0433\u0438. \u041c\u043e\u0436\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u0441\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u0437\u0430\u0443\u0440\u0443\u0441\u0430. \u041c\u043e\u0436\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u0441\u0430\u0439\u0442\u044b, \u043a\u0443\u0434\u0430 \u043e\u043d\u0438 \u0432\u0435\u0434\u0443\u0442, \u043e \u0442\u043e\u043c, \u043e\u0442\u043a\u0443\u0434\u0430 \u043d\u0430 \u043d\u0438\u0445 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f. \u041c\u043e\u0436\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u043c \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. \u0418 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0435\u0449\u0451.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432\u0441\u0451 \u044d\u0442\u043e \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u0440\u0430\u0439\u043d\u0435 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u043e, \u0430 \u0442\u043e \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u0427\u0442\u043e \u0431\u044b \u0442\u0430\u043c \u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0430\u0434\u0435\u043f\u0442\u044b <a href=\"https:\/\/en.wikipedia.org\/wiki\/Functional_programming\" rel=\"nofollow noopener noreferrer\">\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a>, \u043d\u043e \u043e\u043d\u043e \u043d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0440\u0430\u0437\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c. <strong>\u0424\u041f \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u0445<\/strong>, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043f\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435. \u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u0447\u0438\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u2014 \u044d\u0442\u043e \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u044c. \u0410 \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0434\u0430\u0442\u044c \u043d\u0430\u043c \u0430\u043d\u0430\u043b\u0438\u0437 \u0435\u0451 \u043a\u043e\u0434\u0430 \u2014 \u044d\u0442\u043e &quot;\u043d\u0443, \u0442\u0430\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u043e\u0442 \u0438\u0445 \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u044b&quot;. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c_\u044f\u0438\u0447\u043d\u0438\u0446\u0443 = ()=&gt; \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c(     ()=&gt; \u044f\u0439\u0446\u043e ,     \u044f\u0439\u0446\u043e =&gt; \u0440\u0430\u0437\u0431\u0435\u0439( \u044f\u0439\u0446\u043e ) ,     \u0440\u0430\u0437\u0431\u0438\u0442\u043e\u0435_\u044f\u0439\u0446\u043e =&gt; \u0443\u0431\u0435\u0440\u0430\u0442\u044c_\u0441\u043a\u043e\u0440\u043b\u0443\u043f\u0443( \u0440\u0430\u0437\u0431\u0438\u0442\u043e\u0435_\u044f\u0439\u0446\u043e ),     \u044f\u0439\u0446\u043e_\u0431\u0435\u0437_\u0441\u043a\u043e\u0440\u043b\u0443\u043f\u044b =&gt; \u043f\u043e\u0436\u0430\u0440\u0438\u0442\u044c( \u0441\u043a\u043e\u0432\u043e\u0440\u043e\u0434\u0430 )( \u044f\u0439\u0446\u043e_\u0431\u0435\u0437_\u0441\u043a\u043e\u0440\u043b\u0443\u043f\u044b ),     \u0436\u0430\u0440\u0435\u043d\u043d\u043e\u0435_\u044f\u0439\u0446\u043e =&gt; \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c_\u043f\u0440\u0438\u043f\u0440\u0430\u0432\u044b( \u0436\u0430\u0440\u0435\u043d\u043d\u043e\u0435_\u044f\u0439\u0446\u043e ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0433\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Resource_Description_Framework\" rel=\"nofollow noopener noreferrer\">\u043c\u043e\u0434\u0435\u043b\u0438 RDF<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">\u044f\u0438\u0447\u043d\u0438\u0446\u0430     \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442         \u0436\u0430\u0440\u0435\u043d\u043e\u0435_\u044f\u0439\u0446\u043e         \u043f\u0440\u0438\u043f\u0440\u0430\u0432\u044b \u0436\u0430\u0440\u0435\u043d\u043e\u0435_\u044f\u0439\u0446\u043e     \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f_\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c         \u0433\u043e\u0440\u044f\u0447\u0430\u044f_\u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0441\u043a\u0432\u043e\u0440\u043e\u0434\u0430     \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f         \u0433\u043e\u0440\u044f\u0447\u0430\u044f_\u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0436\u0430\u0440\u0435\u043d\u043e\u0435_\u044f\u0439\u0446\u043e     \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f_\u0438\u0437         \u044f\u0439\u0446\u043e_\u0431\u0435\u0437_\u0441\u043a\u043e\u0440\u043b\u0443\u043f\u044b \u044f\u0439\u0446\u043e     \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442         \u044f\u0439\u0446\u043e_\u0431\u0435\u0437_\u0441\u043a\u043e\u0440\u043b\u0443\u043f\u044b         \u0441\u043a\u043e\u0440\u043b\u0443\u043f\u0430<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0440\u0438\u043f\u043b\u0435\u0442\u044b. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0438\u0445 <a href=\"https:\/\/tree.hyoo.ru\/#!source=%D1%8F%D0%B8%D1%87%D0%BD%D0%B8%D1%86%D0%B0%0A%09%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D1%82%0A%09%09%D0%B6%D0%B0%D1%80%D0%B5%D0%BD%D0%BE%D0%B5_%D1%8F%D0%B9%D1%86%D0%BE%0A%09%09%D0%BF%D1%80%D0%B8%D0%BF%D1%80%D0%B0%D0%B2%D1%8B%0A%D0%B6%D0%B0%D1%80%D0%B5%D0%BD%D0%BE%D0%B5_%D1%8F%D0%B9%D1%86%D0%BE%0A%09%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%91%D1%82%D1%81%D1%8F_%D0%BF%D0%BE%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%BE%D0%BC%0A%09%09%D0%B3%D0%BE%D1%80%D1%8F%D1%87%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D0%BE%D1%81%D1%82%D1%8C%0A%D1%81%D0%BA%D0%B2%D0%BE%D1%80%D0%BE%D0%B4%D0%B0%0A%09%D1%8F%D0%B2%D0%BB%D1%8F%D0%B5%D1%82%D1%81%D1%8F%0A%09%09%D0%B3%D0%BE%D1%80%D1%8F%D1%87%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B2%D0%B5%D1%80%D1%85%D0%BD%D0%BE%D1%81%D1%82%D1%8C%0A%D0%B6%D0%B0%D1%80%D0%B5%D0%BD%D0%BE%D0%B5_%D1%8F%D0%B9%D1%86%D0%BE%0A%09%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D1%91%D1%82%D1%81%D1%8F_%D0%B8%D0%B7%0A%09%09%D1%8F%D0%B9%D1%86%D0%BE_%D0%B1%D0%B5%D0%B7_%D1%81%D0%BA%D0%BE%D1%80%D0%BB%D1%83%D0%BF%D1%8B%0A%D1%8F%D0%B9%D1%86%D0%BE%0A%09%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B0%D0%B5%D1%82%0A%09%09%D1%8F%D0%B9%D1%86%D0%BE_%D0%B1%D0%B5%D0%B7_%D1%81%D0%BA%D0%BE%D1%80%D0%BB%D1%83%D0%BF%D1%8B%0A%09%09%D1%81%D0%BA%D0%BE%D1%80%D0%BB%D1%83%D0%BF%D0%B0%0A\/pipeline=%24mol_tree2_from_string~%24mol_tree2_xml_to_text~%24mol_tree2_text_to_string\" rel=\"nofollow noopener noreferrer\">\u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c. \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 JSX, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0438\u043c\u0438\u043a\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434 HTML, \u043d\u043e \u0438 \u043f\u043e\u0434 JS, \u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u0434 \u0424\u041f, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0438\u0447\u0435\u043c \u0438\u0437 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0433\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u044f\u0441\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const Example = ( props: {     className?: string     text?: string     onTextChanged?: ( next: string )=&gt; void     editable?: boolean     onEditableToggle?: ( next: boolean )=&gt; void } )=&gt; {      const [ stateText, setStateText ] = useState( props.text ?? '' )     const [ stateEditable, setStateEditable ] = useState( props.editable ?? true )     const [ inputElement, setInputElement ] = useState&lt; HTMLTextAreaElement &gt;( null )      const className = ( props.className ?? '' ) + ' example'     const text = props.text ?? stateText     const editable = props.editable ?? stateEditable      const setText = useCallback( ( next: string )=&gt; {         setStateText( next )         props.onTextChanged?.( next )     }, [ props.onTextChanged ] )      const setEditable = useCallback( ( next: boolean )=&gt; {         setStateEditable( next )         props.onEditableToggle?.( next )     }, [ props.onEditableToggle ] )      return (         &lt;BiPanel              className={ className }              left={                 &lt;&gt;                      &lt;CheckBox                         className=&quot;editable&quot;                         checked={ editable }                         onToggle={ setEditable }                         &gt;                         { l10n( 'Editable' ) }                     &lt;\/CheckBox&gt;                      &lt;TextArea                         ref={ setInputElement }                         className=&quot;input&quot;                         value={ text }                         onChange={ setText }                         enabled={ editable }                         placeholder={ l10n( 'Markdown content..' ) }                     \/&gt;                  &lt;\/&gt;             }              right={                 text                     ? &lt;&gt;                          &lt;div                             className=&quot;output-label&quot;                             &gt;                             { l10n( 'Result' ) }                         &lt;\/div&gt;                          &lt;MarkDown                             className=&quot;output&quot;                             text={ text }                         \/&gt;                      &lt;\/&gt;                     : &lt;&gt;&lt;\/&gt;             }          \/&gt;     )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043a\u0440\u043e\u0435\u043c \u043f\u043e\u043a\u0430 \u0433\u043b\u0430\u0437\u0430 \u043d\u0430 \u043e\u0431\u044a\u0451\u043c\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f..<\/p>\n<p>  <\/p>\n<blockquote><p>\u041c\u043e\u0436\u0435\u043c \u043b\u0438 \u043c\u044b \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u0432\u0441\u0435 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u044b \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043f\u0435\u0440\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438?<\/p><\/blockquote>\n<p>\u041d\u0435\u0442. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 AST, \u043d\u0430\u0439\u0434\u0451\u043c \u0432\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>l10n<\/code> \u0438 \u043f\u043e\u043d\u0430\u0434\u0435\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u0435\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u044c \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u043b\u0438\u0442\u0435\u0440\u0430\u043b, \u0430 \u043d\u0435 \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u043c \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435\u043e\u0442\u043a\u0443\u0434\u0430 \u0432\u0437\u044f\u0442\u044c \u043f\u0435\u0440\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u044e\u0447\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041c\u043e\u0436\u0435\u043c \u043b\u0438 \u043c\u044b \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>CheckBox.checked<\/code>, <code>TextArea.enabled<\/code> \u0438 <code>props.editable<\/code> \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0441\u0432\u044f\u0437\u044c\u044e?<\/p><\/blockquote>\n<p>\u041d\u0435\u0442. \u0418 \u043d\u0435 \u0432\u0435\u0440\u044c\u0442\u0435 \u0430\u0434\u0435\u043f\u0442\u0430\u043c \u0420\u0435\u0430\u043a\u0442\u0430, \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0449\u0438\u043c, \u0447\u0442\u043e \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043c \u043d\u0435\u0442, \u0438 \u0447\u0442\u043e \u043e\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u041e\u043d\u043e \u0438 \u043d\u0443\u0436\u043d\u043e, \u0438 \u0435\u0441\u0442\u044c, \u0445\u043e\u0442\u044c \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0441\u0442\u044b\u043b\u0438 \u0441 \u043f\u0430\u0440\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u043f\u0441\u0430\u043c\u0438 \u0432\u0438\u0434\u0430 <code>checked={ editable } onToggle={ setEditable }<\/code>.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041c\u043e\u0436\u0435\u043c \u043b\u0438 \u043c\u044b \u0442\u0430\u043c \u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>editable<\/code>, \u0442\u043e \u0442\u0435\u043a\u0441\u0442\u0430\u0440\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439?<\/p><\/blockquote>\n<p>\u041d\u0435\u0442. \u0420\u0430\u0437\u0432\u0435 \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u043e\u0440\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c data-flow \u0430\u043d\u0430\u043b\u0438\u0437. \u0418 \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0441\u043e \u0432\u0441\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041c\u043e\u0436\u0435\u043c \u043b\u0438 \u043c\u044b \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e CSS-\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>.example .output .link<\/code> \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e \u043c\u0430\u0442\u0447\u0438\u0442\u0441\u044f?<\/p><\/blockquote>\n<p>\u041d\u0435\u0442. \u0422\u0430\u043a \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0441\u0442\u0440\u043e\u043a \u0432 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043b\u0433\u043e, \u043d\u043e \u0441\u0443\u0442\u044c \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u044f\u0441\u043d\u0430: <strong>\u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f\u0445 \u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e \u0448\u0443\u043c\u0430<\/strong>. \u042d\u0442\u043e \u043a\u0430\u043f\u0438\u0442\u0430\u043b\u044c\u043d\u043e \u043e\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/su\/ts\/ff\/sutsffdhrkthwacgj4-qsqifdcw.jpeg\" alt=\"\u0410 \u043a\u043e\u0440\u043e\u043b\u044c-\u0442\u043e \u0433\u043e\u043b\u044b\u0439!\"><\/p>\n<p>  <\/p>\n<h1 id=\"a-vozmozhna-li-deklarativnost\">\u0410 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u043b\u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c?<\/h1>\n<p>  <\/p>\n<p>\u0427\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u044f\u0437\u044b\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043e\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439, \u0442\u0435\u043c \u043f\u0440\u043e\u0449\u0435 \u0435\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 \u044d\u0442\u043e\u0433\u043e \u2014 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438, \u043d\u0443\u0436\u0435\u043d \u044f\u0437\u044b\u043a \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0412\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u0442\u0430\u043a\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c \u043e\u0431\u044b\u0447\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f JS \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u044f\u0437\u044b\u043a\u0438, \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0435\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u0432\u0435\u043b\u0438\u043a \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u043b\u0438\u0431\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0440\u0430\u0437\u0443 \u0432 \u043d\u0451\u043c, \u043b\u0438\u0431\u043e \u0437\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432 &quot;\u0448\u0430\u0431\u043b\u043e\u043d\u044b&quot; \u0432\u043a\u0440\u0430\u043f\u043b\u0435\u043d\u0438\u044f \u043d\u0430 JS. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0438 \u043e \u043a\u0430\u043a\u043e\u0439 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438, \u043d\u043e \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 2 \u0447\u0430\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c.<\/li>\n<li>\u0418\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <strong>\u043d\u0430\u0434\u043e \u043e\u0442\u0434\u0435\u043b\u044f\u0442\u044c &quot;\u0448\u0430\u0431\u043b\u043e\u043d\u044b&quot; \u043e\u0442 &quot;\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432&quot;, \u0430 \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u0434\u043d\u043e \u043a\u0430\u043a \u0431\u044b \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0430, \u0430 \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 \u0435\u0451 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u044f\u0437\u044b\u043a <a href=\"https:\/\/github.com\/hyoo-ru\/mam_mol\/tree\/master\/view#viewtree\" rel=\"nofollow noopener noreferrer\">view.tree<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 <a href=\"https:\/\/mol.hyoo.ru\/#!section=view.tree\/source=%24my_example%20%24mol_view%0A%09sub%20%2F%0A%09%09%3C%3D%20Panel%20%24my_bipanel%0A%09%09%09left%20%3C%3D%20input%20%2F%0A%09%09%09%09%3C%3D%20Editable%20%24mol_check_box%0A%09%09%09%09%09checked%3Fval%20%3C%3D%3E%20editable%3Fval%20true%0A%09%09%09%09%09title%20%40%20%5CEditable%0A%09%09%09%09%3C%3D%20Input%20%24mol_textarea%0A%09%09%09%09%09hint%20%40%20%5CMarkdown%20content..%0A%09%09%09%09%09value%3Fval%20%3C%3D%3E%20text%3Fval%20%5C%0A%09%09%09%09%09enabled%20%3C%3D%20editable%0A%09%09%09right%20%3C%3D%20output%20%2F%0A%09%09%09%09%3C%3D%20Output_label%20%24mol_paragraph%0A%09%09%09%09%09sub%20%2F%20%3C%3D%20output_label%20%40%20%5CResult%0A%09%09%09%09%3C%3D%20Output%20%24mol_text%0A%09%09%09%09%09text%20%3C%3D%20text%0A\" rel=\"nofollow noopener noreferrer\">$mol<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">$my_example $mol_view     sub \/         &lt;= Panel $my_bipanel             left &lt;= input \/                 &lt;= Editable $mol_check_box                     checked?val &lt;=&gt; editable?val true                     title @ \\Editable                 &lt;= Input $mol_textarea                     hint @ \\Markdown content..                     value?val &lt;=&gt; text?val \\                     enabled &lt;= editable             right &lt;= output \/                 &lt;= Output_label $mol_paragraph                     sub \/ &lt;= output_label @ \\Result                 &lt;= Output $mol_text                     text &lt;= text<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043d \u043c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043c\u0435\u043d\u044c\u0448\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e\u0433\u043e JSX \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u0438\u0437 \u043d\u0435\u0433\u043e \u0435\u0449\u0451 \u0438 \u043b\u0435\u0433\u043a\u043e <a href=\"https:\/\/habhub.hyoo.ru\/#!author=nin-jin\/repo=HabHub\/article=20\" rel=\"nofollow noopener noreferrer\">\u0432\u044b\u0447\u043b\u0435\u043d\u044f\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/a>, <a href=\"https:\/\/github.com\/nin-jin\/slides\/tree\/master\/css-in-ts\" rel=\"nofollow noopener noreferrer\">\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/a> \u0438 \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0435\u0449\u0451. \u041c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c <a href=\"https:\/\/studio.hyoo.ru\/#!source=%24my_app%20%24mol_page%0A%09plugins%20%2F%20%3C%3D%20Theme%0A%09body%20%2F%0A%09%09%3C%3D%20Main%0A%09%09%3C%3D%20Dates%0A%09Theme%20%24mol_theme_auto%0A%09title_default%20%5C%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82%2C%20%D0%BC%D0%B8%D1%80!%0A%09title%3Fnext%20%3C%3D%20title_default%0A%09Topic%20%24mol_string%0A%09%09hint%20%3C%3D%20title_default%0A%09%09value%3F%20%3C%3D%3E%20title%3F%0A%09Topic_field%20%24mol_form_field%0A%09%09name%20%5CTopic%0A%09%09control%20%3C%3D%20Topic%0A%09Main%20%24mol_row%20sub%20%2F%20%3C%3D%20Topic_field%0A%09start%3Fnext%20%24mol_time_moment%0A%09Start%20%24mol_date%20value_moment%3F%20%3C%3D%3E%20start%3F%0A%09Start_field%20%24mol_form_field%0A%09%09name%20%5CStart%0A%09%09control%20%3C%3D%20Start%0A%09finish%3Fnext%20%24mol_time_moment%0A%09Finish%20%24mol_date%20value_moment%3F%20%3C%3D%3E%20finish%3F%0A%09Finish_field%20%24mol_form_field%0A%09%09name%20%5CFinish%0A%09%09control%20%3C%3D%20Finish%0A%09Dates%20%24mol_row%20sub%20%2F%0A%09%09%3C%3D%20Start_field%0A%09%09%3C%3D%20Finish_field%0A\/pack=https%3A%2F%2Fmol.hyoo.ru\/preview\" rel=\"nofollow noopener noreferrer\">\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0442\u043e\u0440<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0437\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438, \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u043d\u0438 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0434\u0430, \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435. \u041d\u0443 \u0430 \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u044e \u043c\u043e\u0449\u044c \u044f\u0437\u044b\u043a\u0430 \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export class $my_example extends $.$my_example {      output() {         return this.text() ? super.output() : []     }  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441 \u043f\u043e\u0434\u0430\u0447\u0438 \u0424\u0435\u0439\u0441\u0431\u0443\u043a\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0447\u0435\u0433\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u044b\u0439 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 JSX \u0438 \u043a\u0443\u0447\u0443 \u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u044b\u0442\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0435\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0410 \u0432 \u0442\u0435\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0432\u043c\u0435\u0441\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043d\u0435\u0434\u043e-DSL \u043c\u0438\u043c\u0438\u043a\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434 HTML, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0440\u0436\u0435\u043d\u0446\u044b \u0420\u0435\u0430\u043a\u0442\u0430 \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ru\/yh\/8j\/ruyh8j2psiyiagk-az5f8ws_v7m.jpeg\" alt=\"Dart, \u0434\u0430 \u043d\u0435 \u0414\u0430\u0440\u0442\"><\/p>\n<p>  <\/p>\n<h1 id=\"chto-opyat-za-naezdy-na-jsx\">\u0427\u0442\u043e \u043e\u043f\u044f\u0442\u044c \u0437\u0430 \u043d\u0430\u0435\u0437\u0434\u044b \u043d\u0430 JSX?<\/h1>\n<p>  <\/p>\n<p>\u0420\u0430\u0437 \u0443\u0436 \u043c\u044b \u0443\u0436\u0435 \u043d\u0430\u0435\u0445\u0430\u043b\u0438, \u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u0440\u043e\u0435\u0434\u0435\u043c\u0441\u044f \u0434\u043e \u043a\u043e\u043d\u0446\u0430, \u043f\u043e \u0432\u0441\u0435\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0430 JSX \u043f\u043e\u043c\u0438\u043c\u043e \u043d\u0435\u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438&#8230;<\/p>\n<p>  <\/p>\n<h2 id=\"push-semantika\">Push \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u0437\u0430\u0432\u0451\u0440\u043d\u0443\u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043b\u0438\u0448\u044c \u0438\u043d\u043e\u0433\u0434\u0430. \u0420\u0435\u0448\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e VDOM:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">return (     &lt;Dialog visible={ opened } &gt;         { ()=&gt; &lt;&gt;Heavy content&lt;\/&gt; }     &lt;\/Dialog&gt; )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u043e, \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0435\u0441\u0442\u044c &quot;\u043d\u043e&quot;:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0417\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043f\u043e\u0434\u0440\u044f\u0434 \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e.<\/li>\n<li>\u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 useCallback, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432.<\/li>\n<li>\u0411\u0435\u0437 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/li>\n<li>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f VDOM \u043d\u0430 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0443\u0434\u0430 \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const dialogContent = useCallback( ()=&gt; (     &lt;&gt;Heavy content&lt;\/&gt; ) )  return userObserver( ()=&gt; (     &lt;Dialog visible={ opened } &gt;         { dialogContent }     &lt;\/Dialog&gt; ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 push \u0438 pull \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438 \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u0435\u043c\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043a\u0440\u0430\u0442\u0446\u0435 \u043e\u0431\u0440\u0438\u0441\u0443\u044e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 pull: \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u0423 push \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438 \u0436\u0435 \u0441 \u044d\u0442\u0438\u043c \u0432\u0441\u0435\u043c \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<\/p>\n<p>  <\/p>\n<h2 id=\"neeffektivnost\">\u041d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h2>\n<p>  <\/p>\n<p>JSX \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u0447\u043d\u044b\u0439 JS \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0437-\u0437\u0430 \u0441\u0432\u043e\u0435\u0439 <a href=\"https:\/\/habhub.hyoo.ru\/#!author=nin-jin\/repo=HabHub\/article=42\" rel=\"nofollow noopener noreferrer\">\u043c\u0435\u0433\u0430\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u0438<\/a> \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 JIT-\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c:<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/perf.js.hyoo.ru\/#!prefix=let%20res%0A%0Aconst%20A%20%3D%20props%20%3D%3E%20createElement%28%20%22input%22%2C%20props%2C%20null%20%29%0Aconst%20B%20%3D%20props%20%3D%3E%20createElement%28%20%22div%22%2C%20props%2C%20null%20%29%0Aconst%20C%20%3D%20props%20%3D%3E%20createElement%28%20%22a%22%2C%20props%2C%20null%20%29%0Aconst%20D%20%3D%20props%20%3D%3E%20createElement%28%20%22iframe%22%2C%20props%2C%20null%20%29%0Aconst%20E%20%3D%20props%20%3D%3E%20createElement%28%20%22object%22%2C%20props%2C%20null%20%29%0Aconst%20F%20%3D%20props%20%3D%3E%20createElement%28%20%22button%22%2C%20props%2C%20null%20%29%0Aconst%20G%20%3D%20props%20%3D%3E%20createElement%28%20%22img%22%2C%20props%2C%20null%20%29%0Aconst%20H%20%3D%20props%20%3D%3E%20createElement%28%20%22meta%22%2C%20props%2C%20null%20%29%0A\/prefixes=%5B%22const%20createElement%20%3D%20%28%20tagName%2C%20props%2C%20children%20%29%3D%3E%5Cn%5Ct%28%7B%20tagName%2C%20props%2C%20children%20%7D%29%5Cn%22%2C%22const%20createElement%20%3D%20%28%20tagName%2C%20props%2C%20...%20children%20%29%3D%3E%5Cn%5Cttypeof%20tagName%20%3D%3D%3D%20&#039;string&#039;%5Cn%5Ct%5Ct%3F%20%7B%20tagName%2C%20props%2C%20children%20%7D%5Cn%5Ct%5Ct%3A%20tagName%28%20props%2C%20...%20children%20%29%5Cn%22%2C%22%22%5D\/sources=%5B%22res%20%3D%20createElement%28%20%5C%22div%5C%22%2C%20%7B%7D%2C%20%5B%5Cn%5CtA%28%7B%20value%3A%20%5C%22A%5C%22%20%7D%29%2C%5Cn%5CtB%28%7B%20title%3A%20%5C%22B%5C%22%20%7D%29%2C%5Cn%5CtC%28%7B%20href%3A%20%5C%22C%5C%22%20%7D%29%2C%5Cn%5CtD%28%7B%20src%3A%20%5C%22D%5C%22%20%7D%29%2C%5Cn%5CtE%28%7B%20data%3A%20%5C%22E%5C%22%20%7D%29%2C%5Cn%5CtF%28%7B%20onclick%3A%20%5C%22F%5C%22%20%7D%29%2C%5Cn%5CtG%28%7B%20alt%3A%20%5C%22G%5C%22%20%7D%29%2C%5Cn%5CtH%28%7B%20charset%3A%20%5C%22H%5C%22%20%7D%29%2C%5Cn%5D%20%29%22%2C%22res%20%3D%20createElement%28%20%5C%22div%5C%22%2C%20null%2C%5Cn%5CtcreateElement%28%20A%2C%20%7B%20value%3A%20%5C%22A%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20B%2C%20%7B%20title%3A%20%5C%22B%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20C%2C%20%7B%20href%3A%20%5C%22C%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20D%2C%20%7B%20src%3A%20%5C%22D%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20E%2C%20%7B%20data%3A%20%5C%22E%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20F%2C%20%7B%20onclick%3A%20%5C%22F%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20G%2C%20%7B%20alt%3A%20%5C%22G%5C%22%20%7D%20%29%2C%5Cn%5CtcreateElement%28%20H%2C%20%7B%20charset%3A%20%5C%22H%5C%22%20%7D%20%29%2C%5Cn%29%22%5D\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c64\/cc4\/b1a\/c64cc4b1a9bf58ba1faa4b7f968bfab9.png\"><\/a><\/p>\n<p>  <\/p>\n<p>\u0421\u0432\u0435\u0440\u0445\u0443 \u2014 \u0442\u043e, \u043a\u0430\u043a\u0438\u043c \u043e\u043d \u043c\u043e\u0433 \u0431\u044b \u0431\u044b\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u043f\u0440\u0438 \u043c\u043e\u043d\u043e\u043c\u043e\u0440\u0444\u043d\u043e\u0441\u0442\u0438. \u0410 \u0441\u043d\u0438\u0437\u0443 \u2014 \u0441\u0443\u0440\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 FireFox.<\/p>\n<p>  <\/p>\n<h2 id=\"slabye-vozmozhnosti-svyazyvaniya\">\u0421\u043b\u0430\u0431\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>JSX \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u043f\u043e\u0434 \u043f\u0440\u043e\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u041d\u043e \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u044c. \u0425\u043e\u0447\u0435\u0448\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u2014 \u0438\u0437\u0432\u043e\u043b\u044c \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432 useCallback \u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0432\u0441\u0451, \u043e\u0442 \u0447\u0435\u0433\u043e \u043e\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 (\u0438 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u043e\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u0431\u0443\u0434\u0435\u0448\u044c):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const setName = useCallBack( ( name: string )=&gt; {     setInfo({ ... info, name }) }, [ info, setInfo ] )  return &lt;Input value={ info.name } onChange={ setName }&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0437\u0430\u0431\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e useCallback \u0442\u0443\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043f\u0430\u0441\u0430\u0442\u044c \u043e\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 <code>info<\/code>, \u0442\u043e \u0435\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 <code>info.name<\/code> \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f. \u0410 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440 <code>Input<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u043e\u043b\u044f <code>info<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u044f \u0440\u0430\u043d\u0435\u0435 \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b, \u0447\u0442\u043e \u043e\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0441\u0442\u044b\u043b\u0438 \u0441 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0430\u0440\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u042d\u0442\u043e \u043c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u043e, \u0442\u0430\u043a \u0435\u0449\u0451 \u0438 \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0437\u044a\u0435\u0437\u0436\u0430\u0435\u0442\u0441\u044f, \u043f\u0440\u0438\u0432\u043e\u0434\u044f \u043a\u043e \u043a\u0440\u0435\u043f\u043a\u0438\u043c \u043e\u0431\u043d\u0438\u043c\u0430\u0448\u043a\u0430\u043c \u0441 \u0434\u0435\u0431\u0430\u0433\u0433\u0435\u0440\u043e\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"nekonsistentnost\">\u041d\u0435\u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c<\/h2>\n<p>  <\/p>\n<p>\u0418\u0437-\u0437\u0430 \u043f\u043e\u0434\u0440\u0430\u0436\u0430\u043d\u0438\u044f HTML \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c, \u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0438 \u043d\u0435\u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u2014 \u0434\u0440\u0443\u0433\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;input type=&quot;password&quot; minLength={ 5 } className={ 'password ' + className  } \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0434\u0432\u0443\u043c\u044f \u0441\u043e\u0432\u0441\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Dialog&gt;     &lt;Hello \/&gt;     &lt;World \/&gt; &lt;\/Dialog&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Dialog     children={[         &lt;Hello \/&gt;,         &lt;World \/&gt;,     ]} \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0443\u0436 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 <a href=\"https:\/\/www.robinwieruch.de\/conditional-rendering-react\" rel=\"nofollow noopener noreferrer\">\u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/a> \u2014 \u043e\u0434\u0438\u043d \u0445\u0443\u0436\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u2014 \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438 \u0443\u0441\u0438\u0434\u0435\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0434\u0432\u0443\u0445 \u0441\u0442\u0443\u043b\u044c\u044f\u0445: HTML \u0438 JS.<\/p>\n<p>  <\/p>\n<h2 id=\"kostyli-dlya-kommentariev\">\u041a\u043e\u0441\u0442\u044b\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Dialog&gt;     &lt;Hello \/&gt;     {\/* World *\/} &lt;\/Dialog&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"volshebnye-atributy\">\u0412\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>JSX \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0444\u043e\u0440\u0441\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 <a href=\"https:\/\/habhub.hyoo.ru\/#!author=nin-jin\/repo=HabHub\/article=20\" rel=\"nofollow noopener noreferrer\">\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c<\/a>. \u0410 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0435\u0441\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Dialog&gt;     &lt;Hello ref={ setHelloRef } \/&gt;     &lt;World ref={ setWorldRef } \/&gt; &lt;\/Dialog&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0451\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0442 \u043d\u043e\u0432\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043b\u0438\u0448\u043d\u0435\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;Dialog&gt;     &lt;Message key=&quot;hello&quot;&gt;Hello&lt;\/Message&gt;     &lt;Message key=&quot;world&quot;&gt;World&lt;\/Message&gt; &lt;\/Dialog&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0430\u0432\u0434\u0430, \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0435 \u0432 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043d\u0435 \u0441\u043f\u0430\u0441\u0430\u0435\u0442 \u0438 \u043e\u043d.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0431\u0435\u0434\u0430 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442, \u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043d\u0438 \u043d\u0435\u043e\u0442\u043b\u0438\u0447\u0438\u043c\u044b \u043e\u0442 \u043b\u044e\u0431\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<p>  <\/p>\n<h2 id=\"mnogo-musora-v-vyorstke\">\u041c\u043d\u043e\u0433\u043e \u043c\u0443\u0441\u043e\u0440\u0430 \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435<\/h2>\n<p>  <\/p>\n<p>\u041c\u0430\u043b\u043e \u043d\u0430\u043c \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0442\u0435\u0433\u043e\u0432 \u0438\u0437 HTML. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u0438 <a href=\"https:\/\/gist.github.com\/zerkalica\/e88192cf7adef439c9f0faab9235c0ba\" rel=\"nofollow noopener noreferrer\">\u043b\u0435\u0441\u0435\u043d\u043a\u0443 \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u0432<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;ThemeContext.Provider value={theme} &gt;     &lt;UserContext.Provider value={signedInUser} &gt;         &lt;Layout \/&gt;     &lt;\/UserContext.Provider&gt; &lt;\/ThemeContext.Provider&gt;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;ThemeContext.Consumer&gt;     { theme =&gt; (         &lt;UserContext.Consumer&gt;             { user =&gt; (                 &lt;ProfilePage user={user} theme={theme} \/&gt;             ) }         &lt;\/UserContext.Consumer&gt;     ) } &lt;\/ThemeContext.Consumer&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"otsutstvie-ogranicheniy\">\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439<\/h2>\n<p>  <\/p>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437, \u0442\u0430\u043a \u0435\u0449\u0451 \u0438 \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043a\u043e\u0434 \u043f\u0438\u0448\u0435\u0442 \u043d\u0435 \u0433\u043e\u0432\u043d\u043e\u043a\u043e\u0434\u0435\u0440, \u043f\u043e\u0440\u043e\u0439 \u0431\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0433\u0434\u0430 \u0438\u043b\u0438 \u043b\u0435\u043d\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0430 \u0441\u0440\u0435\u0437\u0430\u0442\u044c \u0443\u0433\u043e\u043b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442, \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u043f\u0440\u043e\u0449\u0435. \u041d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u043e\u0435 \u043e\u043a\u043d\u043e \u0442\u0443\u0442, \u043f\u043e\u043a\u043e\u0441\u0438\u0432\u0448\u0435\u0435\u0441\u044f \u0442\u0430\u043c, \u0438 \u0432\u043e\u0442 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0447\u0451\u0442\u043a\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u0430 \u043b\u044e\u0442\u0430\u044f \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0449\u0430\u044f \u043b\u0430\u043f\u0448\u0430, \u0433\u0434\u0435 \u0432\u0441\u0451 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441\u043e \u0432\u0441\u0435\u043c, \u043b\u0435\u0436\u0438\u0442 \u0432\u043f\u0435\u0440\u0435\u043c\u0435\u0448\u043a\u0443, \u043d\u043e \u043a\u043e\u043d\u0446\u044b \u0441 \u043a\u043e\u043d\u0446\u0430\u043c\u0438 \u0444\u0438\u0433 \u0441\u0432\u0435\u0434\u0451\u0448\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">&lt;div className=&quot;tag-list&quot;&gt;     {tags.map((tag) =&gt; (         &lt;button             key={tag}             className=&quot;tag-pill tag-default&quot;             onClick={() =&gt;                 dispatch({                     type: 'SET_TAB',                     tab: { type: 'TAG', label: tag },                 })             }         &gt;             {tag}         &lt;\/button&gt;     ))} &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/chagweyh\/react-hooks-typescript-realworld\/blob\/master\/src\/components\/Home\/Tags.tsx#L46\" rel=\"nofollow noopener noreferrer\">\u0412 \u0446\u0438\u043a\u043b\u0435 \u0445\u0440\u0435\u043d\u0430\u0447\u0438\u043c \u043d\u0435\u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435, \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0443\u0442 \u0436\u0435 \u043f\u043e \u0441\u0440\u0435\u0434\u0438 &quot;\u0432\u0451\u0440\u0441\u0442\u043a\u0438&quot; \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043e\u043d \u0434\u0435\u043b\u0430\u0435\u0442, \u2014 \u043c\u0435\u043d\u044f\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/a> <em>\u041d\u0435, \u043d\u0443 \u0430 \u0447\u0442\u043e, \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u0448\u044c \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0445. \u041f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0431\u044b\u0441\u0442\u0440\u044b\u0435, \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0430\u043b\u043e, \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0435\u0437\u0434\u0435<\/em>..<\/p>\n<p>  <\/p>\n<h1 id=\"a-viewtree-pryam-takoy-idealnyy\">\u0410 view.tree \u043f\u0440\u044f\u043c \u0442\u0430\u043a\u043e\u0439 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439?<\/h1>\n<p>  <\/p>\n<p>\u041d\u0435\u0442, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0435\u0434\u0430\u043b\u044c \u0432 \u043f\u043e\u043b, \u0434\u0430\u0432\u0438\u043c \u0438 \u0435\u0433\u043e..<\/p>\n<p>  <\/p>\n<h2 id=\"slabaya-integraciya-s-ide\">\u0421\u043b\u0430\u0431\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 IDE<\/h2>\n<p>  <\/p>\n<p>Microsoft \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 JSX \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 TypeScript, \u0447\u0442\u043e \u0434\u0430\u043b\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0442\u0430\u0439\u043f\u0447\u0435\u043a, \u043d\u043e \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0432 \u0442\u0430\u0439\u043f\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0439 Language Server. \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u0445 \u0436\u0435 VSCode, \u043d\u043e \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 IDE.<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, Microsoft \u043d\u0435 \u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u0441 TS. <code>view.tree<\/code>, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 TS, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 \u0442\u0430\u0439\u043f\u0447\u0435\u043a \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435, \u043d\u043e IDE \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e \u043d\u0435 \u0432\u0438\u0434\u0438\u0442. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438, \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0438 \u0438 \u0442\u043f. <a href=\"https:\/\/github.com\/nin-jin\/tree.d#ide-support\" rel=\"nofollow noopener noreferrer\">\u0425\u043e\u0440\u043e\u0448\u043e \u0445\u043e\u0442\u044c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0435\u0441\u0442\u044c.<\/a><\/p>\n<p>  <\/p>\n<h2 id=\"neyavnaya-tipizaciya\">\u041d\u0435\u044f\u0432\u043d\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412\u043e \u0438\u043c\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u0432 \u044f\u0437\u044b\u043a\u0435 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u0438\u043f \u044f\u0432\u043d\u043e. \u0422\u0438\u043f\u044b \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0438\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u0430\u0451\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>null<\/code> \u0438\u043c\u0435\u0435\u0442 \u0442\u0438\u043f <code>any<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/**  * Placeholder null  *\/ Placeholder() {     return null as any }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/**  * name!id?next \\Unknown  *\/ @ $mol_mem_key name(id: any, next?: any) {     if ( next !== undefined ) return next as never     return &quot;Unknown&quot; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u043e \u044d\u0442\u043e \u0432\u0441\u0451 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u0430 \u043d\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c. \u0412\u0435\u0434\u044c \u043c\u043e\u0436\u043d\u043e \u0436\u0435 \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/**  * Placeholder null $mol_view  *\/ Placeholder() {     return null as null | $mol_view }  \/**  * name!number?string \\Unknown  *\/ @ $mol_mem_key name(id: number, next?: string) {     if ( next !== undefined ) return next     return &quot;Unknown&quot; }<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"chto-tut-eschyo-skazat\">\u0427\u0442\u043e \u0442\u0443\u0442 \u0435\u0449\u0451 \u0441\u043a\u0430\u0437\u0430\u0442\u044c?<\/h1>\n<p>  <\/p>\n<p>\u0424\u0443\u0445, \u043f\u043e\u043a\u0430\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u043b\u0430\u0432\u0443. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0434\u0443\u0445, \u043f\u043e\u0440\u0430\u0437\u043c\u044b\u0441\u043b\u0438\u0442\u044c \u043d\u0430\u0434 \u0441\u043c\u044b\u0441\u043b\u043e\u043c \u0431\u044b\u0442\u0438\u044f, \u0438 \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435..<\/p>\n<p>  <\/p>\n<p>\u0412 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 &quot;<a href=\"https:\/\/github.com\/nin-jin\/slides\/tree\/master\/tree\" rel=\"nofollow noopener noreferrer\">Tree \u2014 \u0435\u0434\u0438\u043d\u044b\u0439 AST \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435\u043c\u0438<\/a>&quot; \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c <code>tree<\/code>. \u0412 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 &quot;<a href=\"https:\/\/www.youtube.com\/watch?v=rQEqXIo4PVM\" rel=\"nofollow noopener noreferrer\">\u0421\u0432\u043e\u0439 \u044f\u0437\u044b\u043a \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 sourcemaps \u0437\u0430 \u043f\u043e\u043b\u0447\u0430\u0441\u0430<\/a>&quot; \u0441 \u0435\u0433\u043e \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u043e\u043c. \u0410 \u0432 \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 &quot;<a href=\"https:\/\/github.com\/nin-jin\/slides\/tree\/master\/mol#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D1%8F-%D0%B2%D0%BE-viewtree\" rel=\"nofollow noopener noreferrer\">$mol \u2014 \u043b\u0443\u0447\u0448\u0435\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u043e\u0442 \u0433\u0435\u043c\u043e\u0440\u0440\u043e\u044f<\/a>&quot; \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0432 \u044f\u0437\u044b\u043a <code>view.tree<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0439\u0442\u0435 \u0432 \u0447\u0430\u0442 &quot;<a href=\"https:\/\/t.me\/lang_idioms\" rel=\"nofollow noopener noreferrer\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a>&quot; \u0432\u0441\u0451 \u044d\u0442\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c. \u0418\u043b\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0447\u0430\u0442 &quot;<a href=\"https:\/\/t.me\/mam_mol\" rel=\"nofollow noopener noreferrer\">$mol: \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/a>&quot; \u0435\u0441\u043b\u0438 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b <a href=\"https:\/\/mol.hyoo.ru\/\" rel=\"nofollow noopener noreferrer\">\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a $mol<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0443 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0439\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0441\u0432\u043e\u0438 \u0438\u0434\u0435\u0438 \u043a\u0430\u043a \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043d\u0435 \u0432\u043e\u0434\u0440\u0443\u0436\u0430\u044f \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0435 \u043a\u043e\u043b\u044f\u0441\u043a\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 \u043c\u043d\u043e\u0433\u043e\u044d\u0442\u0430\u0436\u043d\u044b\u0445 \u043a\u043e\u0441\u0442\u044b\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oy\/kv\/al\/oykvallsrdaaozpsbvcyjowi8bu.jpeg\" alt=\"\u0422\u043e, \u0447\u0442\u043e \u0442\u0435\u0431\u044f \u043d\u0435 \u0443\u0431\u0438\u0432\u0430\u0435\u0442, \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0435\u0431\u044f\u2026 \u0441\u0442\u0440\u0430\u043d\u043d\u0435\u0435!\"><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/82c\/99d\/43c\/82c99d43c7397f3021bc3e35bddd7081.png\" alt=\"\u0421\u043a\u0443\u043a\u0430\"><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/565414\/\"> https:\/\/habr.com\/ru\/post\/565414\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p>\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u043c\u0438\u0442\u0440\u0438\u0439 \u041a\u0430\u0440\u043b\u043e\u0432\u0441\u043a\u0438\u0439 \u0438 \u044f\u2026 \u043b\u044e\u0431\u043b\u044e \u0440\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b. \u0410 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u043a\u0440\u0430\u0439\u043d\u0435 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0439 \u0432\u043e\u043a\u0440\u0443\u0433 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0440\u0432\u0451\u043c \u0438\u0445 \u043d\u0430 \u043b\u043e\u0441\u043a\u0443\u0442\u044b \u0441\u043d\u0438\u0437\u0443 \u0432\u0432\u0435\u0440\u0445 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ys\/ao\/1l\/ysao1lff2xn8ope1eq2cxqdesae.jpeg\" alt=\"\u0420\u0430\u0437\u0440\u044b\u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b. \u0418\u0445 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 \u0438 \u0444\u0430\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. \u0417\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u0438 \u043f\u0440\u043e\u0435\u0434\u0435\u043c\u0441\u044f \u043a\u0430\u0442\u043a\u043e\u043c \u043f\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u043d\u0430\u044f \u0433\u0430\u043c\u043c\u0430 \u0447\u0443\u0432\u0441\u0442\u0432 \u043d\u0430\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0430.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-325768","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325768","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=325768"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325768\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=325768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=325768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=325768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}