{"id":94637,"date":"2025-01-26T08:02:54","date_gmt":"2025-01-26T04:32:54","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/"},"modified":"2025-01-26T08:02:54","modified_gmt":"2025-01-26T04:32:54","slug":"host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/","title":{"rendered":"Host React \u0628\u0627 \u0633\u0631\u0648\u0631 Blazor"},"content":{"rendered":"<div data-article-id=\"2240500\" id=\"article-body\">\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc React \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Blazor Server \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f. Blazor \u06cc\u06a9 \u0645\u062f\u0644 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0628\u0647 \u0646\u0627\u0645 Hosted Blazor \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 Blazor \u0648 Blazor WebAssembly (WASM) \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0648\u0627\u062d\u062f \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 HTML \u0631\u0627 \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06cc\u0627 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c React \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u0642\u0648\u06cc \u062e\u0648\u062f \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062f\u0631 \u0647\u0645\u0647 \u062c\u0646\u0628\u0647 \u0647\u0627\u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0637\u06cc\u0641 \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0627\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 UI\u060c \u0628\u0631\u062a\u0631 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0632\u06cc\u062a \u0628\u0627\u0644\u0642\u0648\u0647 \u0627\u0646\u06af\u06cc\u0632\u0647 \u0627\u06cc\u0646 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0648\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/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\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#pnpm_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\" >pnpm \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#React_Side_%D8%B1%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >React Side \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\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-4\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D9%85%D8%B1%D8%A7%D8%AD%D9%84\" >\u0645\u0631\u0627\u062d\u0644<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Blazor_Side\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Blazor Side<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D9%85%D8%B1%D8%A7%D8%AD%D9%84-2\" >\u0645\u0631\u0627\u062d\u0644:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D9%87%D9%85%DA%A9%D8%A7%D8%B1%DB%8C_%D8%AF%D9%88_%D8%B7%D8%B1%D9%81%D9%87_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\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-8\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D9%85%D8%B1%D8%A7%D8%AD%D9%84-3\" >\u0645\u0631\u0627\u062d\u0644:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/host-react-%d8%a8%d8%a7-%d8%b3%d8%b1%d9%88%d8%b1-blazor\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0648\u0627\u0631\u062f \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\n<strong>\u06af\u0631\u0647<\/strong> + <strong>pnpm<\/strong> (\u06cc\u0627 npm \u06cc\u0627 \u0645\u0634\u0627\u0628\u0647). \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>pnpm<\/code>.<\/li>\n<li>\n<strong>\u0628\u0647 \u0633\u0631\u0639\u062a<\/strong> \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc React.<\/li>\n<li>\n<strong>NET Core<\/strong> (NET 7 \u06cc\u0627 \u062c\u062f\u06cc\u062f\u062a\u0631 &#8212; \u06a9\u0647 \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 Blazor \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f)<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"pnpm_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  pnpm \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0647 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0646\u0635\u0628 \u0631\u0633\u0645\u06cc \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0646\u0635\u0628 pnpm. <\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f Node.js \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>pnpm<\/code> \u062f\u0633\u062a\u0648\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight powershell\"><code><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">env<\/span><span class=\"w\"> <\/span><span class=\"nx\">use<\/span><span class=\"w\"> <\/span><span class=\"nt\">--global<\/span><span class=\"w\"> <\/span><span class=\"nx\">lts<\/span><span class=\"w\">\n<\/span><\/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=\"React_Side_%D8%B1%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  React Side \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 React \u0628\u062f\u0648\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0627\u062a \u0646\u062a \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AD%D9%84\"><\/span>\n<p>  \u0645\u0631\u0627\u062d\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<p>\u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0631\u0627\u0647 \u062d\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>HostedReact<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u062f\u0631 \u0622\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0648 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0631\u0648\u0631 Blazor \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u0641\u0647\u0631\u0633\u062a \u0631\u0627\u0647 \u062d\u0644 \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u062f\u0648 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a: \u06cc\u06a9\u06cc \u067e\u0631\u0648\u0698\u0647 \u0633\u0631\u0648\u0631 Blazor \u0648 \u062f\u06cc\u06af\u0631\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight powershell\"><code><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">new<\/span><span class=\"w\"> <\/span><span class=\"nx\">sln<\/span><span class=\"w\">\n<\/span><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">new<\/span><span class=\"w\"> <\/span><span class=\"nx\">gitignore<\/span><span class=\"w\">\n<\/span><span class=\"n\">md<\/span><span class=\"w\"> <\/span><span class=\"nx\">src<\/span><span class=\"w\">\n<\/span><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">new<\/span><span class=\"w\"> <\/span><span class=\"nx\">blazor<\/span><span class=\"w\"> <\/span><span class=\"nt\">-o<\/span><span class=\"w\"> <\/span><span class=\"o\">.<\/span><span class=\"nx\">\/src\/Sample<\/span><span class=\"w\">\n<\/span><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">sln<\/span><span class=\"w\"> <\/span><span class=\"nx\">add<\/span><span class=\"w\"> <\/span><span class=\"o\">.<\/span><span class=\"nx\">\/src\/Sample<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<\/li>\n<li>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>src<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc:<\/p>\n<pre class=\"highlight powershell\"><code><span class=\"n\">cd<\/span><span class=\"w\"> <\/span><span class=\"nx\">src<\/span><span class=\"w\">\n<\/span><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">create<\/span><span class=\"w\"> <\/span><span class=\"nx\">vite<\/span><span class=\"err\">@<\/span><span class=\"nx\">latest<\/span><span class=\"w\">\n<\/span><span class=\"n\">cd<\/span><span class=\"w\"> <\/span><span class=\"err\">&lt;<\/span><span class=\"nx\">Your-New-Project-Name<\/span><span class=\"err\">&gt;<\/span><span class=\"w\">\n<\/span><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">install<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<\/li>\n<li>\n<p>\u062a\u0639\u0627\u0631\u06cc\u0641 \u0646\u0648\u0639 \u06af\u0631\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0645\u0646\u06cc \u0646\u0648\u0639 \u0628\u0647\u062a\u0631 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight powershell\"><code><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">add<\/span><span class=\"w\"> <\/span><span class=\"nt\">-D<\/span><span class=\"w\"> <\/span><span class=\"err\">@<\/span><span class=\"nx\">types\/node<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<\/li>\n<li>\n<p>\u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <code>nodePolyfilles<\/code> \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0628\u0627 Vite:<\/p>\n<p>Vite \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0645\u0627\u0646\u0646\u062f <code>process<\/code> \u0628\u0631\u0627\u06cc \u062d\u0644 \u0645\u0633\u06cc\u0631\u0647\u0627\u060c \u0648 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0636\u0631\u0648\u0631\u06cc \u0647\u0633\u062a\u0646\u062f:<\/p>\n<pre class=\"highlight powershell\"><code><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">add<\/span><span class=\"w\"> <\/span><span class=\"nx\">node-stdlib-browser<\/span><span class=\"w\">\n<\/span><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">add<\/span><span class=\"w\"> <\/span><span class=\"nt\">-D<\/span><span class=\"w\"> <\/span><span class=\"nx\">vite-plugin-node-stdlib-browser<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<\/li>\n<li>\n<p>\u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc \u0645\u0627\u0698\u0648\u0644 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u0648\u0633\u0637 Blazor \u0645\u0635\u0631\u0641 \u0634\u0648\u062f:<\/p>\n<p>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>entrypoint.jsx<\/code> \u062f\u0631 React <code>src<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc<\/p>\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">createRoot<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">StrictMode<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">App<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/App.jsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/index.css<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Initialize<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">){<\/span>\n    <span class=\"nf\">createRoot<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">).<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">StrictMode<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">App<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">StrictMode<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p>\u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f <code>main.jsx<\/code> \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc.<\/p>\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/index.css<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">Initialize<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/entrypoint.jsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nc\">Initialize<\/span><span class=\"p\">(<\/span><span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p>Vite \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 (\u0628\u0647 \u062c\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9) \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c Vite \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627\u0646\u062f\u0644 \u0648 <code>index.html<\/code> \u0648 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0644\u0627\u0632\u0645 \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 Blazor Server\u060c \u0645\u0627 \u0628\u0647 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062e\u0631\u0648\u062c\u06cc \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Vite \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f (<code>vite.config.js<\/code> \u06cc\u0627 <code>vite.config.ts<\/code>) \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">path<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">path<\/span><span class=\"dl\">\"<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">defineConfig<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">vite<\/span><span class=\"dl\">'<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">react<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@vitejs\/plugin-react-swc<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"c1\">\/\/ @ts-expect-error Test<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">nodePolyfills<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">vite-plugin-node-stdlib-browser<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"c1\">\/\/ https:\/\/vite.dev\/config\/<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">defineConfig<\/span><span class=\"p\">({<\/span>\n<span class=\"na\">base<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/react\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"na\">build<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">lib<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">entry<\/span><span class=\"p\">:<\/span> <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">src\/entrypoint.jsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ReactApp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">fileName<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ReactApp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">formats<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">es<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">outDir<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/Sample\/wwwroot\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">emptyOutDir<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\n<span class=\"p\">},<\/span>\n<span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nf\">react<\/span><span class=\"p\">(),<\/span> <span class=\"nf\">nodePolyfills<\/span><span class=\"p\">()],<\/span>\n<span class=\"na\">resolve<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">alias<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">@<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/src<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"p\">})<\/span>\n<\/code><\/pre>\n<p><strong>\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627:<\/strong><\/p>\n<ul>\n<li>\u0627\u06cc\u0646 <code>outDir<\/code> \u0641\u06cc\u0644\u062f \u0645\u062d\u0644 \u062a\u0648\u0644\u06cc\u062f \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 Blazor \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f <code>wwwroot<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc<\/li>\n<li>\u0627\u06cc\u0646 <code>base<\/code> \u06a9\u0644\u06cc\u062f \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 Vite \u0627\u0633\u062a \u0648 \u0634\u0627\u0645\u0644 \u0622\u0646 \u0646\u0645\u06cc \u0634\u0648\u062f <code>wwwroot<\/code> \u0628\u062e\u0634<\/li>\n<\/ul>\n<p>\u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u0627\u0632 React JavaScript (\u0628\u0647 \u062c\u0627\u06cc TypeScript) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0647\u0646\u06af\u0627\u0645 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f\u0647\u0627\u06cc \u062f\u0627\u062a \u0646\u062a \u0627\u0632 JS \u0627\u0632 \u0647\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0627\u0639\u0644\u0627\u0646 \u0627\u0646\u0648\u0627\u0639 \u0635\u0631\u06cc\u062d \u062f\u0631 \u0637\u0648\u0644 interop \u0646\u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06cc\u0646 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0633\u062a \u0648 \u0628\u0647 \u062a\u0631\u062c\u06cc\u062d \u0634\u0645\u0627 \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647 React:<\/p>\n<p>\u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631 \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>wwwroot\/react<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc:<\/p>\n<pre class=\"highlight powershell\"><code><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">run<\/span><span class=\"w\"> <\/span><span class=\"nx\">build<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<p>\u062e\u0631\u0648\u062c\u06cc \u0634\u0627\u0645\u0644 \u062e\u0648\u0627\u0647\u062f \u0634\u062f <code>ReactApp.css<\/code> \u0648 <code>ReactApp.js<\/code>. \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>\/src\/Sample\/wwwroot\/react<\/code> \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 <code>.gitignore<\/code>.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Blazor_Side\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Blazor Side<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 React \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f\u060c \u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627 Blazor \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0627 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>Initialize<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u062f\u0631 React \u0627\u0639\u0644\u0627\u0645 \u0634\u062f <code>entrypoint.jsx<\/code> \u0641\u0627\u06cc\u0644<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AD%D9%84-2\"><\/span>\n<p>  \u0645\u0631\u0627\u062d\u0644:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<p>\u0637\u0631\u062d Blazor \u0631\u0627 \u0633\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 React \u062f\u0627\u0631\u0627\u06cc \u0633\u0628\u06a9 \u062e\u0627\u0635 \u062e\u0648\u062f (css) \u0627\u0633\u062a\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 \u0634\u0631 \u0686\u06cc\u0632\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0633\u0628\u06a9 Blazor \u062e\u0644\u0627\u0635 \u0634\u0648\u06cc\u0645. \u062d\u062a\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a layout \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0647\u062f\u0641 \u0631\u0646\u062f\u0631 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc <code>MainLayout.razor<\/code> \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u062e\u0627\u0644\u06cc:<\/p>\n<pre class=\"highlight html\"><code>@inherits LayoutComponentBase\n\n@Body\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc <code>App.razor<\/code>\u060c \u0622\u0646 \u0631\u0627 \u062d\u062f\u0627\u0642\u0644 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<pre class=\"highlight html\"><code><span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n\n<span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><base\/> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"@Assets[\"<\/span><span class=\"na\">Sample.styles.css<\/span><span class=\"err\">\"]\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><importmap> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"icon\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"image\/png\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"favicon.png\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><headoutlet> <span class=\"nt\">\/&gt;<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"\/>\n    <span class=\"nt\"><routes> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"_framework\/blazor.web.js\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"\/>\n<\/routes><\/span><\/headoutlet><\/span><\/span><\/importmap><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/li>\n<li>\n<p>\u06cc\u06a9 \u06a9\u0644\u0627\u0633 interop JS \u0628\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<p>Blazor \u0627\u0632 JavaScript Interop \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0648\u0627\u0628\u0639 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0633\u0645\u062a \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0627\u062c\u0632\u0627\u06cc React\u060c \u0627\u0632 JavaScript Interop \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>Initialize<\/code> \u062a\u0627\u0628\u0639\u06cc \u06a9\u0647 \u062f\u0631 \u062e\u0648\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u06cc\u062f <code>entrypoint.jsx<\/code> \u0641\u0627\u06cc\u0644<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>ReactJsInterop.cs<\/code> \u0641\u0627\u06cc\u0644 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 (\u06cc\u0627 \u0641\u0636\u0627\u06cc \u0646\u0627\u0645 \u0645\u0646\u0627\u0633\u0628 \u062f\u06cc\u06af\u0631\u06cc). \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight csharp\"><code><span class=\"k\">using<\/span> <span class=\"nn\">Microsoft.AspNetCore.Components<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">using<\/span> <span class=\"nn\">Microsoft.JSInterop<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">namespace<\/span> <span class=\"nn\">HostedReact<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">public<\/span> <span class=\"k\">sealed<\/span> <span class=\"k\">class<\/span> <span class=\"nc\">ReactJsInterop<\/span><span class=\"p\">(<\/span><span class=\"n\">IJSRuntime<\/span> <span class=\"n\">js<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"n\">IAsyncDisposable<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">readonly<\/span> <span class=\"n\">Lazy<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">Task<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">IJSObjectReference<\/span><span class=\"p\">&gt;&gt;<\/span> <span class=\"n\">importModule<\/span>\n        <span class=\"p\">=<\/span> <span class=\"k\">new<\/span><span class=\"p\">(()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"n\">js<\/span><span class=\"p\">.<\/span><span class=\"n\">InvokeAsync<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">IJSObjectReference<\/span><span class=\"p\">&gt;(<\/span><span class=\"s\">\"import\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\".\/react\/ReactApp.js\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">AsTask<\/span><span class=\"p\">());<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"n\">ValueTask<\/span> <span class=\"nf\">Initialize<\/span><span class=\"p\">(<\/span><span class=\"n\">ElementReference<\/span> <span class=\"n\">el<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">=&gt;<\/span> <span class=\"nf\">InvokeVoidAsync<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Initialize\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">el<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">async<\/span> <span class=\"n\">ValueTask<\/span> <span class=\"nf\">InvokeVoidAsync<\/span><span class=\"p\">(<\/span><span class=\"kt\">string<\/span> <span class=\"n\">identifier<\/span><span class=\"p\">,<\/span> <span class=\"k\">params<\/span> <span class=\"kt\">object<\/span><span class=\"p\">?[]?<\/span> <span class=\"n\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">module<\/span> <span class=\"p\">=<\/span> <span class=\"k\">await<\/span> <span class=\"n\">importModule<\/span><span class=\"p\">.<\/span><span class=\"n\">Value<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">await<\/span> <span class=\"n\">module<\/span><span class=\"p\">.<\/span><span class=\"nf\">InvokeVoidAsync<\/span><span class=\"p\">(<\/span><span class=\"n\">identifier<\/span><span class=\"p\">,<\/span> <span class=\"n\">args<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">async<\/span> <span class=\"n\">ValueTask<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">T<\/span><span class=\"p\">&gt;<\/span> <span class=\"n\">InvokeAsync<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">T<\/span><span class=\"p\">&gt;(<\/span><span class=\"kt\">string<\/span> <span class=\"n\">identifier<\/span><span class=\"p\">,<\/span> <span class=\"k\">params<\/span> <span class=\"kt\">object<\/span><span class=\"p\">?[]?<\/span> <span class=\"n\">args<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">module<\/span> <span class=\"p\">=<\/span> <span class=\"k\">await<\/span> <span class=\"n\">importModule<\/span><span class=\"p\">.<\/span><span class=\"n\">Value<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"n\">module<\/span><span class=\"p\">.<\/span><span class=\"n\">InvokeAsync<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">T<\/span><span class=\"p\">&gt;(<\/span><span class=\"n\">identifier<\/span><span class=\"p\">,<\/span> <span class=\"n\">args<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"k\">async<\/span> <span class=\"n\">ValueTask<\/span> <span class=\"nf\">DisposeAsync<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">importModule<\/span><span class=\"p\">.<\/span><span class=\"n\">IsValueCreated<\/span><span class=\"p\">){<\/span>\n            <span class=\"k\">using<\/span> <span class=\"nn\">var<\/span> <span class=\"n\">import<\/span> <span class=\"p\">=<\/span> <span class=\"n\">importModule<\/span><span class=\"p\">.<\/span><span class=\"n\">Value<\/span><span class=\"p\">;<\/span>\n            <span class=\"kt\">var<\/span> <span class=\"n\">module<\/span> <span class=\"p\">=<\/span> <span class=\"k\">await<\/span> <span class=\"n\">import<\/span><span class=\"p\">;<\/span>\n            <span class=\"k\">await<\/span> <span class=\"n\">module<\/span><span class=\"p\">.<\/span><span class=\"nf\">DisposeAsync<\/span><span class=\"p\">();<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p><strong>\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627:<\/strong><\/p>\n<ul>\n<li>\u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0645\u0627\u0698\u0648\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f (<code>ReactApp.js<\/code>) \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>Initialize<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0627\u062c\u0632\u0627\u06cc React \u062f\u0631 \u06cc\u06a9 \u0639\u0646\u0635\u0631 DOM.<\/li>\n<li>\u0627\u06cc\u0646 <code>ElementReference<\/code> \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0628\u0631\u0627\u06cc \u0639\u0628\u0648\u0631 \u0639\u0646\u0635\u0631 DOM \u06a9\u0647 React UI \u0631\u0627 \u062a\u0632\u0631\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<p>\u0628\u0639\u062f\u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>ReactJsInterop<\/code> \u0633\u0631\u0648\u06cc\u0633 \u0628\u0647 \u0638\u0631\u0641 \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc (DI) \u0634\u0645\u0627. \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>Program.cs<\/code> \u0641\u0627\u06cc\u0644 \u0634\u0627\u0645\u0644 \u062b\u0628\u062a \u0646\u0627\u0645:<\/p>\n<pre class=\"highlight csharp\"><code><span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"n\">Services<\/span><span class=\"p\">.<\/span><span class=\"n\">AddScoped<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">ReactJsInterop<\/span><span class=\"p\">&gt;();<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p>\u0631\u0646\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0628\u0627 Interop:<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>ReactJsInterop<\/code> \u06a9\u0644\u0627\u0633 \u062f\u0631 \u0635\u0641\u062d\u0647 Razor \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0627\u062c\u0632\u0627\u06cc React. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u0645 <code>Home.razor<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<pre class=\"highlight csharp\"><code><span class=\"n\">@page<\/span> <span class=\"s\">\"https:\/\/dev.to\/\"<\/span>\n\n<span class=\"n\">@rendermode<\/span> <span class=\"err\">@<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nf\">InteractiveServerRenderMode<\/span><span class=\"p\">(<\/span><span class=\"n\">prerender<\/span><span class=\"p\">:<\/span> <span class=\"k\">false<\/span><span class=\"p\">))<\/span>\n\n<span class=\"n\">@inject<\/span> <span class=\"n\">ReactJsInterop<\/span> <span class=\"n\">ReactJs<\/span>\n\n<span class=\"p\">&lt;<\/span><span class=\"n\">link<\/span> <span class=\"n\">rel<\/span><span class=\"p\">=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"n\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\".\/react\/ReactApp.css\"<\/span> <span class=\"p\">\/&gt;<\/span>\n<span class=\"p\">&lt;<\/span><span class=\"n\">div<\/span> <span class=\"n\">@ref<\/span><span class=\"p\">=<\/span><span class=\"s\">\"div\"<\/span> <span class=\"n\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"root\"<\/span><span class=\"p\">&gt;<\/span><span class=\"n\">Loading<\/span><span class=\"p\">...<\/span><span class=\"n\">div<\/span><span class=\"p\">&gt;<\/span>\n\n<span class=\"n\">@code<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"n\">ElementReference<\/span> <span class=\"n\">div<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">protected<\/span> <span class=\"k\">override<\/span> <span class=\"k\">async<\/span> <span class=\"n\">Task<\/span> <span class=\"nf\">OnAfterRenderAsync<\/span><span class=\"p\">(<\/span><span class=\"kt\">bool<\/span> <span class=\"n\">firstRender<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">firstRender<\/span><span class=\"p\">)<\/span>\n            <span class=\"k\">await<\/span> <span class=\"n\">ReactJs<\/span><span class=\"p\">.<\/span><span class=\"nf\">Initialize<\/span><span class=\"p\">(<\/span><span class=\"n\">div<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p><strong>\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627:<\/strong><\/p>\n<ul>\n<li>\u0645\u0631\u062c\u0639 \u0631\u0627 \u0628\u0647 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 React \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>ReactApp.css<\/code> \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u06cc React \u062f\u0631 Blazor \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/li>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>@ref<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f \u06cc\u06a9 Blazor \u06a9\u0646\u062a\u0631\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a <code>div<\/code> \u0639\u0646\u0635\u0631 (\u0628\u0627 <code>id=\"root\"<\/code>) \u0628\u0631\u0627\u06cc React \u062a\u0627 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u0627\u062c\u0631\u0627 \u0648 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 Blazor \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>dotnet run<\/code> \u062f\u0633\u062a\u0648\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0628\u0631\u0648\u06cc\u062f (\u0645\u062b\u0644\u0627\u064b <code>\/<\/code>) \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627. \u0628\u0627\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0627 \u062f\u0631 DOM \u0628\u0631\u0646\u0627\u0645\u0647 Blazor \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632:<\/p>\n<pre class=\"highlight powershell\"><code><span class=\"n\">pnpm<\/span><span class=\"w\"> <\/span><span class=\"nx\">run<\/span><span class=\"w\"> <\/span><span class=\"nx\">build<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u06cc \u0634\u0648\u062f <code>ReactApp.js<\/code> \u0648 <code>ReactApp.css<\/code> \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062f\u0627\u062e\u0644 Blazor <code>wwwroot\/react<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA_%D9%87%D9%85%DA%A9%D8%A7%D8%B1%DB%8C_%D8%AF%D9%88_%D8%B7%D8%B1%D9%81%D9%87_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0627 \u06a9\u0646\u0648\u0646\u060c \u0645\u0627 React \u0631\u0627 \u0628\u0647 \u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Blazor \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>Initialize<\/code> \u062a\u0627\u0628\u0639 \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f &#8211; \u0627\u0632 NET (Blazor) \u0628\u0647 React &#8211; \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u0645 \u062a\u0627 \u0628\u0647 React \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u0645 \u0628\u0647 \u062f\u0627\u062a\u200c\u0646\u062a \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u062f \u0648 \u062a\u0639\u0627\u0645\u0644 \u062f\u0648\u0637\u0631\u0641\u0647 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u0645\u0645\u06a9\u0646 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u0627\u06cc\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Interop Blazor (<code>[JSInvokable]<\/code>) \u062f\u0631 \u06a9\u0646\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0647\u0627\u06cc\u06cc \u062f\u0631 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f React.<\/p>\n<p>\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0645\u06a9\u0627\u0631\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc React UI \u0628\u0631 \u0627\u0633\u0627\u0633 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 Blazor \u06cc\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0646\u0637\u0642 Blazor \u0627\u0632 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AD%D9%84-3\"><\/span>\n<p>  \u0645\u0631\u0627\u062d\u0644:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<p>Methods \u0631\u0627 \u062f\u0631 Blazor \u0628\u0631\u0627\u06cc React to Call \u062f\u0631 \u0645\u0639\u0631\u0636 \u0646\u0645\u0627\u06cc\u0634 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f<\/p>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0645\u062a\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062f\u0631 Blazor \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u06a9\u0647 React \u0628\u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u06a9\u0627\u0646\u06cc\u0633\u0645 interop .NET-to-JS \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 <code>Home.razor<\/code> \u0641\u0627\u06cc\u0644 \u0634\u0627\u0645\u0644 \u0627\u0644\u0641 <code>[JSInvokable]<\/code> \u0631\u0648\u0634\u06cc \u06a9\u0647 React \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc <code>Home.razor<\/code> \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646:<\/p>\n<pre class=\"highlight csharp\"><code><span class=\"n\">@page<\/span> <span class=\"s\">\"https:\/\/dev.to\/\"<\/span>\n\n<span class=\"n\">@rendermode<\/span> <span class=\"err\">@<\/span><span class=\"p\">(<\/span><span class=\"k\">new<\/span> <span class=\"nf\">InteractiveServerRenderMode<\/span><span class=\"p\">(<\/span><span class=\"n\">prerender<\/span><span class=\"p\">:<\/span> <span class=\"k\">false<\/span><span class=\"p\">))<\/span>\n\n<span class=\"n\">@inject<\/span> <span class=\"n\">ReactJsInterop<\/span> <span class=\"n\">ReactJs<\/span>\n<span class=\"n\">@implements<\/span> <span class=\"n\">IDisposable<\/span>\n\n<span class=\"p\">&lt;<\/span><span class=\"n\">link<\/span> <span class=\"n\">rel<\/span><span class=\"p\">=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"n\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\".\/react\/ReactApp.css\"<\/span> <span class=\"p\">\/&gt;<\/span>\n<span class=\"p\">&lt;<\/span><span class=\"n\">div<\/span> <span class=\"n\">@ref<\/span><span class=\"p\">=<\/span><span class=\"s\">\"div\"<\/span> <span class=\"n\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"root\"<\/span><span class=\"p\">&gt;<\/span><span class=\"n\">Loading<\/span><span class=\"p\">...<\/span><span class=\"n\">div<\/span><span class=\"p\">&gt;<\/span>\n\n<span class=\"n\">@code<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"n\">ElementReference<\/span> <span class=\"n\">div<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">readonly<\/span> <span class=\"n\">DotNetObjectReference<\/span><span class=\"p\">&lt;<\/span><span class=\"n\">Home<\/span><span class=\"p\">&gt;<\/span> <span class=\"n\">me<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">me<\/span> <span class=\"p\">=<\/span> <span class=\"n\">DotNetObjectReference<\/span><span class=\"p\">.<\/span><span class=\"nf\">Create<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">protected<\/span> <span class=\"k\">override<\/span> <span class=\"k\">async<\/span> <span class=\"n\">Task<\/span> <span class=\"nf\">OnAfterRenderAsync<\/span><span class=\"p\">(<\/span><span class=\"kt\">bool<\/span> <span class=\"n\">firstRender<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">firstRender<\/span><span class=\"p\">)<\/span>\n            <span class=\"k\">await<\/span> <span class=\"n\">ReactJs<\/span><span class=\"p\">.<\/span><span class=\"nf\">Initialize<\/span><span class=\"p\">(<\/span><span class=\"n\">div<\/span><span class=\"p\">,<\/span> <span class=\"n\">me<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"p\">[<\/span><span class=\"n\">JSInvokable<\/span><span class=\"p\">]<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">int<\/span> <span class=\"nf\">GetSecretNumber<\/span><span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"m\">123<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"k\">void<\/span> <span class=\"nf\">Dispose<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">me<\/span><span class=\"p\">.<\/span><span class=\"nf\">Dispose<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<p><code>GetSecretNumber<\/code>  \u0631\u0648\u0634\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f. \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0645\u062a\u062f\u0647\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc JS \u0631\u0627 \u0628\u0627 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u0645 <code>JSInvokableAttribute<\/code>. \u06cc\u06a9 \u0631\u0648\u0634 JS \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0647\u0645\u06af\u0627\u0645 \u06cc\u0627 \u0647\u0645\u06af\u0627\u0645 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 <code>IDisposable<\/code> \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0622\u0632\u0627\u062f\u0633\u0627\u0632\u06cc \u0645\u0646\u0627\u0628\u0639 \u062a\u062e\u0635\u06cc\u0635 \u06cc\u0627\u0641\u062a\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a <code>DotNetObjectReference<\/code>\u060c \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647.<\/p>\n<\/li>\n<li>\n<p>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc React Initialize Function:<\/p>\n<p>\u062f\u0631 \u0634\u0645\u0627 <code>entrypoint.jsx<\/code> \u0641\u0627\u06cc\u0644\u060c \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u062f <code>Initialize<\/code> \u062a\u0627\u0628\u0639 \u067e\u0630\u06cc\u0631\u0634 \u0627\u0636\u0627\u0641\u06cc <code>.NET<\/code> \u0645\u0631\u062c\u0639 \u0634\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f \u062f\u0627\u062a \u0646\u062a \u0627\u0632 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>entrypoint.jsx<\/code> \u0641\u0627\u06cc\u0644 \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646:<\/p>\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">createRoot<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">StrictMode<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">App<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/App.jsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/index.css<\/span><span class=\"dl\">'<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Initialize<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">,<\/span> <span class=\"nx\">dotnet<\/span><span class=\"p\">){<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">number<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">dotnet<\/span><span class=\"p\">.<\/span><span class=\"nf\">invokeMethodAsync<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">GetSecretNumber<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"nf\">createRoot<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">).<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">StrictMode<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">App<\/span> <span class=\"na\">n<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">number<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">StrictMode<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<p>\u0648 \u0628\u0633. \u0627\u06a9\u0646\u0648\u0646 \u0645\u0627 \u0628\u06cc\u0646 JS \u0648 .NET \u0627\u0631\u062a\u0628\u0627\u0637 \u062f\u0648 \u0637\u0631\u0641\u0647 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u0648 \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u0631\u062a\u0631 React\u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0648\u06cc\u0698\u06af\u06cc Hot Module Replacement (HMR) \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u062a\u0648\u0633\u0639\u0647 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0622\u063a\u0627\u0632 \u0634\u062f. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 Blazor \u062f\u0627\u0631\u0627\u06cc HMR \u0627\u0633\u062a\u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u06a9\u062f \u062f\u0627\u062a\u200c\u0646\u062a \u06cc\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc Razor \u0627\u063a\u0644\u0628 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u062f\u0627\u0631\u0646\u062f\u060c \u06a9\u0647 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0648\u0633\u0639\u0647 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u06a9\u0645\u062a\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062a\u0631\u06a9\u06cc\u0628\u06cc \u062f\u0627\u0631\u0627\u06cc \u0645\u0639\u0627\u0648\u0636\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 React \u0628\u0627 HMR \u0628\u0647\u062a\u0631 \u0648 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u063a\u0646\u06cc \u0622\u0646\u060c \u062a\u0648\u0633\u0639\u0647 UI \u0631\u0627 \u0633\u0631\u0639\u062a \u0645\u06cc \u0628\u062e\u0634\u062f\u060c \u06cc\u06a9 \u0644\u0627\u06cc\u0647 API \u0627\u0636\u0627\u0641\u06cc \u0628\u06cc\u0646 \u062f\u0627\u062a \u0646\u062a \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Blazor \u062e\u0627\u0644\u0635\u060c \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0648 \u0633\u0631\u0628\u0627\u0631 \u0628\u0627\u0644\u0642\u0648\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0627\u0636\u0627\u0641\u06cc <code>pnpm run build<\/code> \u0645\u0631\u062d\u0644\u0647 \u0628\u0631\u0627\u06cc React 3 \u062a\u0627 4 \u062b\u0627\u0646\u06cc\u0647 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f \u062a\u0627 \u06a9\u0627\u0645\u0644 \u0634\u0648\u062f\u060c \u06a9\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0628\u0627 \u0632\u0645\u0627\u0646 \u062a\u062f\u0648\u06cc\u0646 HMR Blazor \u0642\u0627\u0628\u0644 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u0633\u062a \u0648 \u0645\u0632\u0627\u06cc\u0627\u06cc \u062f\u0631\u06a9 \u0634\u062f\u0647 \u062f\u0631 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0633\u0627\u062f\u0647 \u0631\u0627 \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0645\u06cc \u0631\u0633\u0627\u0646\u062f.<\/li>\n<\/ul>\n<p>\u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0627\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0631\u0632\u0634 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0646\u0642\u0627\u0637 \u0642\u0648\u062a React \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 UI \u0627\u0632 \u0642\u0628\u0644 \u0628\u0627 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 API \u0645\u0648\u062c\u0648\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 HTTP \u06cc\u0627 gRPC \u0628\u0631\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0647\u0645\u0633\u0648 \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u0686\u0646\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f\u06cc\u060c \u0627\u062f\u063a\u0627\u0645 React-Blazor \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0628\u0647\u0631\u0647\u200c\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u06cc React \u0631\u0627\u0647\u200c\u062d\u0644\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0645\u0646\u0633\u062c\u0645 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0628\u0627\u0637\u0646\u06cc\/ \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0642\u0648\u06cc Blazor \u0628\u0647\u0631\u0647 \u0645\u06cc\u200c\u0628\u0631\u062f.<\/p>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647\u060c \u0627\u06af\u0631\u0686\u0647 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0631\u0627\u0647\u200c\u062d\u0644\u06cc \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0646\u0628\u0627\u0634\u062f\u060c \u0627\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0642\u0627\u0646\u0639\u200c\u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0647\u0645 \u0628\u0647 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 UI \u067e\u0648\u06cc\u0627 React \u0648 \u0647\u0645 \u0628\u0647 \u0627\u062f\u063a\u0627\u0645 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0645\u062d\u06cc\u0637 Full Stack .NET Blazor \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc React \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Blazor Server \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f. Blazor \u06cc\u06a9 \u0645\u062f\u0644 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0628\u0647 \u0646\u0627\u0645 Hosted Blazor \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0633\u0631\u0648\u0631 Blazor \u0648 Blazor WebAssembly (WASM) \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 \u0648\u0627\u062d\u062f \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 HTML \u0631\u0627 \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f \u0633\u0645\u062a \u0633\u0631\u0648\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":94638,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fshcf2w5sm5dwl3qae8uk.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-94637","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\/94637","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=94637"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/94637\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/94638"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=94637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=94637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=94637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}