{"id":17394,"date":"2023-04-13T23:40:49","date_gmt":"2023-04-13T20:10:49","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/"},"modified":"2023-04-13T23:40:49","modified_gmt":"2023-04-13T20:10:49","slug":"react-api-for-javascript-devs-8d4","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/","title":{"rendered":"React API \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a"},"content":{"rendered":"<div data-article-id=\"1380311\" id=\"article-body\">\n<p>React \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646 \u0648 \u062c\u0630\u0627\u0628 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f\u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06a9\u06cc\u0628 \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0628\u0647 React\u060c \u0641\u0631\u0636 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0646\u062d\u0648\u0647 \u0646\u06af\u0627\u0631\u0634 \u0627\u062c\u0632\u0627\u06cc React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JSX \u062f\u0627\u0631\u06cc\u062f\u060c \u06cc\u06a9 \u067e\u0633\u0648\u0646\u062f \u0646\u062d\u0648\u06cc \u0628\u0631\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0622\u0633\u0627\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u062d\u0648\u0647 \u0646\u0648\u0634\u062a\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JSX \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0644\u06cc\u0646\u06a9 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#React_%D9%88_DOM_%D9%85%D8%AF%D9%84_%D8%B4%DB%8C%D8%A1_%D8%B3%D9%86%D8%AF\" >React \u0648 DOM (\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0633\u0646\u062f)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#createElement\" >createElement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D9%85%D8%AA%D9%86_%D8%AF%D8%B1_%DB%8C%DA%A9_%DA%AF%D8%B1%D9%87\" >\u0646\u0648\u0634\u062a\u0646 \u0645\u062a\u0646 \u062f\u0631 \u06cc\u06a9 \u06af\u0631\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#%D8%A7%D9%84%D8%AD%D8%A7%D9%82_%D8%A8%D9%87_%D8%B9%D9%86%D8%B5%D8%B1_%D9%85%D9%88%D8%AC%D9%88%D8%AF\" >\u0627\u0644\u062d\u0627\u0642 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0645\u0648\u062c\u0648\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\" >\u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%86%D8%B4%D8%A7%D9%86_%D8%AF%D9%87%DB%8C%D8%AF\" >\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#createElement-2\" >createElement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#createRoot\" >createRoot<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D8%A7%D8%AF%D9%86\" >\u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0646<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/react-api-for-javascript-devs-8d4\/#TL_DR\" >TL; DR<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"React_%D9%88_DOM_%D9%85%D8%AF%D9%84_%D8%B4%DB%8C%D8%A1_%D8%B3%D9%86%D8%AF\"><\/span>\n<p>  React \u0648 DOM (\u0645\u062f\u0644 \u0634\u06cc\u0621 \u0633\u0646\u062f)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React \u0627\u0632 DOM \u0645\u062c\u0627\u0632\u06cc (Document Object Model) \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0648 \u062d\u0641\u0638 \u0648\u0636\u0639\u06cc\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632\u060c DOM \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0627\u0642\u0639\u06cc \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>DOM \u0633\u0627\u062e\u062a\u0627\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0631\u0627 \u0628\u0647 \u0634\u06a9\u0644 \u062f\u0631\u062e\u062a\u06cc \u0627\u0632 \u06af\u0631\u0647 \u0647\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0647\u0631 \u06af\u0631\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 HTML\u060c \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u06cc\u0627 \u06cc\u06a9 \u06af\u0631\u0647 \u0645\u062a\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c DOM \u0628\u0627\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0634\u0648\u062f \u062a\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0645\u0646\u0639\u06a9\u0633 \u06a9\u0646\u062f.  \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062a\u062c\u0633\u0645 dom \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0631\u0648\u0634 \u0645\u062a\u062f\u0627\u0648\u0644 \u0648 \u0645\u0647\u0645 DOM \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 React API \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"createElement\"><\/span>\n<p>  createElement<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0632 \u0646\u0627\u0645\u0634 \u0645\u0634\u062e\u0635 \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0646\u062d\u0648 &#8211; <code>document.createElement(tagName, options)<\/code><\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc &#8211;<\/p>\n<ul>\n<li>TagName (\u0631\u0634\u062a\u0647): \u0646\u0627\u0645 \u0639\u0646\u0635\u0631 HTML (h1, p, img)<\/li>\n<li>\u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 (\u0634\u06cc\u0621): <em>\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc<\/em>\n<\/li>\n<\/ul>\n<p>\u0645\u062b\u0627\u0644 &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const root = document.createElement('div')\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <strong>\u0628\u062e\u0634<\/strong> \u0639\u0646\u0635\u0631 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631 \u0631\u06cc\u0634\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631\u0628\u0627\u0631\u0647 createElement \u0628\u06cc\u0634\u062a\u0631 \u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%D8%B4%D8%AA%D9%86_%D9%85%D8%AA%D9%86_%D8%AF%D8%B1_%DB%8C%DA%A9_%DA%AF%D8%B1%D9%87\"><\/span>\n<p>  \u0646\u0648\u0634\u062a\u0646 \u0645\u062a\u0646 \u062f\u0631 \u06cc\u06a9 \u06af\u0631\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0627\u0632 createElement\u060c \u06cc\u06a9 div HTML \u062e\u0627\u0644\u06cc \u0633\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645.  \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u0645\u062a\u0646 \u062f\u0631 \u0639\u0646\u0635\u0631 HTML \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645.<\/p>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u06af \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u062c\u062f\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const greeter = document.createElement('p')\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u062a\u06af \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u0627\u06cc\u062c\u0627\u062f \u0648 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631 greeter \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u062d\u0627\u0644 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u062a\u0646\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631\u060c \u062f\u0648 \u0631\u0627\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<ol>\n<li>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06af\u0631\u0647 \u0645\u062a\u0646\u06cc\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const textNode = document.createTextNode('Hello World')\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u06af\u0631\u0647 \u0645\u062a\u0646\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0633\u0644\u0627\u0645\/\u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>greeter.appendChild(textNode)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f <code>&lt;p&gt;Hello World&lt;\/p&gt;<\/code>.<\/p>\n<ol>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc textContent\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>greeter.textContent=\"Hello World\"\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f <code>&lt;p&gt;Hello World&lt;\/p&gt;<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%84%D8%AD%D8%A7%D9%82_%D8%A8%D9%87_%D8%B9%D9%86%D8%B5%D8%B1_%D9%85%D9%88%D8%AC%D9%88%D8%AF\"><\/span>\n<p>  \u0627\u0644\u062d\u0627\u0642 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0645\u0648\u062c\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0635\u0641\u062d\u0647 HTML \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a \u06a9\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u0646\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062d\u0627\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0628\u0627\u0634\u062f \u0645\u0627\u0646\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>&lt;div id=\"hero\"&gt;\n  &lt;p&gt;Hello World&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0648\u0642\u060c \u0628\u0627\u06cc\u062f \u0645\u062a\u062f\u0647\u0627\u06cc append \u0648 appendChild DOM \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0648\u0634 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0644\u062d\u0627\u0642 \u06cc\u06a9 \u0645\u062a\u0646 \u06cc\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0639\u0646\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ Creating a div\nconst root = document.createElement('div')\nroot.setAttribute('id','hero')\n\n\/\/ Creating a paragraph element\nconst greeter = document.createElement('p')\ngreeter.textContent=\"Hello World\"\n\n\/\/ Append greeter to root\n\nroot.append(greeter)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>&lt;div id=\"hero\"&gt;\n  &lt;p&gt;Hello World&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062a\u062f\u0647\u0627\u06cc append \u0648 appendChild \u06cc\u06a9\u0633\u0627\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u062a\u0641\u0627\u0648\u062a \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u062a\u062f append \u0631\u0634\u062a\u0647 \u0648 \u06af\u0631\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0631\u0648\u0634 appendChild \u0641\u0642\u0637 \u0639\u0646\u0627\u0635\u0631 \u06af\u0631\u0647 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f.  \u0645\u062a\u062f appendChild \u0631\u0634\u062a\u0647 \u0633\u0627\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0646\u0645\u06cc \u067e\u0630\u06cc\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>root.appendChild('Hello World') \/\/ this won't work\nroot.appendChild(document.createTextNode('Hello World')) \/\/ will work\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0641\u0627\u0648\u062a \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u062a\u062f appendChild \u0634\u06cc \u06af\u0631\u0647 \u0636\u0645\u06cc\u0645\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u062a\u062f append \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<p>\u0622\u062e\u0631\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0648\u0644\u06cc \u0628\u0647 \u0647\u0645\u0627\u0646 \u0627\u0647\u0645\u06cc\u062a\u060c<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0633\u062a.  \u0627\u06cc\u0646\u0647\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0636\u0627\u0641\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0641\u062a\u0627\u0631 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 \u0647\u0627 &#8211; <code>class, id, src, style<\/code><\/p>\n<p>\u0627\u06cc\u0646\u0647\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0631\u0627\u06cc\u062c HTML \u0647\u0633\u062a\u0646\u062f.  \u0644\u06cc\u0633\u062a \u062f\u0642\u06cc\u0642 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u06cc\u0627\u0628\u06cc\u062f.<\/p>\n<p>DOM \u0645\u062a\u062f setAttribute \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 HTML \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0646\u062d\u0648 &#8211; <code>element.setAttribute(name, value)<\/code><\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc &#8211;<\/p>\n<ol>\n<li>name (string) : \u0646\u0627\u0645 \u0635\u0641\u062a\u06cc \u0627\u0633\u062a \u0645\u0627\u0646\u0646\u062f <code>class, id<\/code> \u0648 \u063a\u06cc\u0631\u0647.<\/li>\n<li>value (string): \u0631\u0634\u062a\u0647 \u0627\u06cc \u062d\u0627\u0648\u06cc \u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc.<\/li>\n<\/ol>\n<p>\u0645\u062b\u0627\u0644 &#8211;<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const root = document.createElement('div')\nroot.setAttribute('id', 'root')\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u06cc\u06a9 \u0639\u0646\u0635\u0631 div \u0628\u0627 id \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u06cc\u0634\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>&lt;div id=\"root\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D9%86%D8%B4%D8%A7%D9%86_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React \u0627\u0632 \u062f\u0648 \u0628\u0633\u062a\u0647 \u0627\u0635\u0644\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<ul>\n<li>\n<code>React<\/code>: \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u060c \u0639\u0646\u0627\u0635\u0631\u060c refs\u060c \u0642\u0637\u0639\u0627\u062a\u060c \u0642\u0644\u0627\u0628\u200c\u0647\u0627 \u0648 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 API \u0633\u0637\u062d \u0628\u0627\u0644\u0627\u06cc React \u0627\u0633\u062a.<\/li>\n<li>\n<code>ReactDOM<\/code>: \u0628\u0633\u062a\u0647 ReactDOM \u0631\u0648\u0634 \u0647\u0627\u06cc \u062e\u0627\u0635 DOM \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0631\u0648\u0634 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0631\u0646\u062f\u0631\u060c \u0627\u06cc\u062c\u0627\u062f \u067e\u0648\u0631\u062a\u0627\u0644 \u0648 \u063a\u06cc\u0631\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0633\u0647 \u0631\u0648\u0634 \u0632\u06cc\u0631 React API \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<ol>\n<li>createElement<\/li>\n<li>createRoot<\/li>\n<li>\u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0646<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"createElement-2\"><\/span>\n<p>  createElement<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0631\u0627 <code>createElement<\/code> \u062a\u0627\u0628\u0639 \u0628\u062e\u0634\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React \u0627\u0633\u062a.  \u0645\u0639\u0645\u0648\u0644\u0627 \u0647\u0646\u06af\u0627\u0645 \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc React \u0627\u0632 JSX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0631\u0627 \u0648\u0627\u0642\u0639\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.  \u0631\u0627 <code>createElement<\/code> \u0627\u06af\u0631 \u0627\u0632 JSX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062a\u0627\u0628\u0639 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f.  \u0627\u06af\u0631 \u0627\u0632 JSX \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u06a9\u0631\u062f\u06cc\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644 \u0632\u06cc\u0627\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u063a\u0644\u0628 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>JSX \u0641\u0642\u0637 \u06cc\u06a9 \u0642\u0646\u062f \u0646\u062d\u0648\u06cc \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0633 \u0627\u0633\u062a <code>createElement<\/code> \u062a\u0627\u0628\u0639.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0641\u0647\u0645\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0686\u0647 \u06a9\u0627\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0631\u0627 <code>createElement<\/code> \u062a\u0627\u0628\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u062f\u0648\u0646 \u0646\u0648\u0634\u062a\u0646 JSX \u06cc\u06a9 \u0639\u0646\u0635\u0631 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0646\u062d\u0648 &#8211; <code>createElement(type, props, ...children)<\/code><\/p>\n<p>\u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0648\u062f\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0644\u0648\u0627\u0632\u0645 \u062c\u0627\u0646\u0628\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f\u060c \u0633\u067e\u0633 \u0646\u062d\u0648 \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647<\/p>\n<p>\u0646\u062d\u0648 &#8211; <code>createElement(type, props)<\/code><\/p>\n<p>\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u067e\u0627\u06cc\u0647 \u0647\u0627 = <code>{...props, children:[...children]}<\/code><\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc &#8211;<\/p>\n<ol>\n<li>type &#8211; \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0646\u0648\u0639 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0646\u0627\u0645 \u0628\u0631\u0686\u0633\u0628 (\u0631\u0634\u062a\u0647) \u0628\u0627\u0634\u062f \u0645\u0627\u0646\u0646\u062f <code>div<\/code> \u06cc\u0627 <code>span<\/code>\u060c \u06cc\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639\u060c \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u06cc\u0627 \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u0628\u0627\u0634\u062f.<\/li>\n<li>props &#8211; \u0622\u0631\u06af\u0648\u0645\u0627\u0646 props \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0634\u06cc \u06cc\u0627 \u062a\u0647\u06cc \u0628\u0627\u0634\u062f.  \u0627\u06af\u0631 null \u0631\u0627 \u067e\u0627\u0633 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0634\u06cc \u062e\u0627\u0644\u06cc \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u06a9\u0648\u062f\u06a9\u0627\u0646 &#8211; \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0635\u0641\u0631 \u06cc\u0627 \u0628\u06cc\u0634\u062a\u0631 \u06af\u0631\u0647 \u0641\u0631\u0632\u0646\u062f \u0628\u0627\u0634\u062f.<\/li>\n<\/ol>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0645\u0648\u0644\u0641\u0647 JSX \u0647\u0646\u06af\u0627\u0645 \u0646\u0648\u0634\u062a\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u062e\u0627\u0645 API \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f.<\/p>\n<p>\u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 JSX \u0633\u0627\u062f\u0647 \u0627\u0633\u062a <code>Greeter<\/code> \u062c\u0632\u0621.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const Greeter = ({name}) =&gt; {\n return &lt;div className=\"container\"&gt;\n  &lt;p&gt;Hello {name}&lt;\/p&gt;\n &lt;\/div&gt;\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API\u0647\u0627\u06cc \u062e\u0627\u0645 \u0646\u0648\u0634\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c JSX \u0628\u0627\u0644\u0627 \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const elementType=\"div\"\nconst elementProps = {className: \"container\"}\nconst Greeter = createElement(elementType, elementProps, createElement('p', null, 'Hello', name))\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0644\u06cc\u0646\u06a9 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u062d\u0648\u0647 \u062a\u0631\u0627\u0646\u0633\u0641\u06cc\u0644 \u0634\u062f\u0646 JSX \u062f\u0631 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>createElement<\/code> \u0634\u0628\u06cc\u0647 \u0646\u0633\u062e\u0647 JSX \u0627\u0633\u062a \u0627\u0645\u0627 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u0646\u0648\u0634\u062a\u0646 \u0622\u0646 \u062f\u0634\u0648\u0627\u0631 \u0627\u0633\u062a.  \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u060c JSX \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React \u062a\u0631\u062c\u06cc\u062d \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f <code>createElement<\/code> API \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627.<\/p>\n<p>\u0627\u06af\u0631 \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f \u0628\u0647 \u062f\u06cc\u062f\u0646 \u06a9\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0647\u0633\u062a\u06cc\u062f <code>createElement<\/code> \u062f\u0631 \u0645\u062e\u0632\u0646 \u0631\u0633\u0645\u06cc React\u060c \u0627\u06cc\u0646\u062c\u0627 \u0631\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"createRoot\"><\/span>\n<p>  createRoot<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 React \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u06af\u0631\u0647 DOM \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u06cc\u0634\u0647 React \u0627\u0632 \u06af\u0631\u0647 DOM \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0632\u06cc\u0628\u0627\u06cc\u06cc React \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644 \u06cc\u0627 \u0641\u0642\u0637 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0633\u062a\u06cc\u062f\u060c \u062f\u0631 \u062f\u0631\u062e\u062a DOM \u062e\u0648\u062f \u062a\u0646\u0647\u0627 \u06af\u0631\u0647 \u0631\u06cc\u0634\u0647 \u0648\u0627\u062d\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a.  \u0627\u06af\u0631 \u0627\u0632 React \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u062a\u0646\u0647\u0627 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0631\u0648\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.  \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0647\u0631 \u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u06a9 \u0628\u062e\u0634 \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 UI \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0646\u062d\u0648 &#8211; <code>createRoot(domNode, options)<\/code><\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc &#8211;<\/p>\n<ol>\n<li>domNode &#8211; \u06cc\u06a9 \u0639\u0646\u0635\u0631 DOM.  \u0639\u0646\u0635\u0631 DOM \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0631\u06cc\u0634\u0647 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0633\u067e\u0633 \u0627\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0631\u06cc\u0634\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0648\u0627\u0628\u0639\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f <code>render<\/code> \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/li>\n<li>\u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 &#8211; \u06cc\u06a9 \u0634\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc.<\/li>\n<\/ol>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0631\u0648\u062a\u060c \u0628\u0627\u06cc\u062f \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f <code>root.render(&lt;App\/&gt;)<\/code> \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a React \u062f\u0631 \u0622\u0646.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B1%D8%A7%D8%A6%D9%87_%D8%AF%D8%A7%D8%AF%D9%86\"><\/span>\n<p>  \u0627\u0631\u0627\u0626\u0647 \u062f\u0627\u062f\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Render \u0631\u0648\u0634\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u06cc\u06a9 JSX \u062f\u0631 \u06af\u0631\u0647 DOM \u0631\u06cc\u0634\u0647 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0646\u062d\u0648 &#8211; <code>root.render(component)<\/code><\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc &#8211;<\/p>\n<ol>\n<li>\u06cc\u06a9 \u06af\u0631\u0647 React \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0645\u06cc \u06af\u06cc\u0631\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0631\u0634\u062a\u0647\u060c \u0639\u062f\u062f\u060c \u062a\u0647\u06cc \u06cc\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0646\u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0628\u06af\u06cc\u0631\u062f.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"TL_DR\"><\/span>\n<p>  TL; DR<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0628\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 React API \u0645\u0627\u0646\u0646\u062f <code>createElement<\/code>\u060c <code>createRoot<\/code>\u060c \u0648 <code>render<\/code>.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>React \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646 \u0648 \u062c\u0630\u0627\u0628 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f\u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0631\u0627\u0628\u0637 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06a9\u06cc\u0628 \u0634\u0648\u0646\u062f. \u0642\u0628\u0644 \u0627\u0632 \u067e\u0631\u062f\u0627\u062e\u062a\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0628\u0647 React\u060c \u0641\u0631\u0636 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631\u06a9 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":17395,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-17394","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/17394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=17394"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/17394\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/17395"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=17394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=17394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=17394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}