{"id":63962,"date":"2024-05-27T21:27:57","date_gmt":"2024-05-27T17:57:57","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/"},"modified":"2024-05-27T21:27:57","modified_gmt":"2024-05-27T17:57:57","slug":"todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/","title":{"rendered":"\u0628\u0631\u0646\u0627\u0645\u0647 Todo \u0628\u062f\u0648\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @lazarv\/react-server"},"content":{"rendered":"<div data-article-id=\"1866773\" id=\"article-body\">\n<p>\u0647\u0645\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u062c\u062f\u06cc\u062f \u0628\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 Todo \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0646\u062f.  \u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @lazarv\/react-server\u060c \u06cc\u06a9 \u0645\u062a\u0627 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u062a\u06cc React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645!<\/p>\n<p>\u0647\u062f\u0641 \u0645\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0648 \u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 React \u0627\u0633\u062a.  \u0645\u0627 \u0641\u0642\u0637 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 React Server Components \u0648 Server Actions \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.  \u0622\u06cc\u0627 \u0627\u06cc\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a\u061f  \u06a9\u0627\u0645\u0644\u0627!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 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\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D8%B3%D9%84%D8%A7%D9%85_%D8%AF%D9%86%DB%8C%D8%A7\" >\u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627!<\/a><\/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\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86\" >\u0686\u06cc\u062f\u0645\u0627\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D8%B5%D9%81%D8%AD%D9%87\" >\u0635\u0641\u062d\u0647<\/a><\/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\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D9%85%D9%88%D8%B1%D8%AF\" >\u0645\u0648\u0631\u062f<\/a><\/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\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\" >\u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0633\u0631\u0648\u0631<\/a><\/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\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D9%85%D9%88%D8%B1%D8%AF_%D8%AC%D8%AF%DB%8C%D8%AF%DB%8C_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0648\u0631\u062f \u062c\u062f\u06cc\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AA%D9%88%D9%84%DB%8C%D8%AF\" >\u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f<\/a><\/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\/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig\/#%D8%B3%D8%AE%D9%86%D8%A7%D9%86_%D9%BE%D8%A7%DB%8C%D8%A7%D9%86%DB%8C\" >\u0633\u062e\u0646\u0627\u0646 \u067e\u0627\u06cc\u0627\u0646\u06cc<\/a><\/li><\/ul><\/nav><\/div>\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_%D9%BE%D8%B1%D9%88%DA%98%D9%87\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f\u060c \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 pnpm \u0648 \u0646\u0635\u0628 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632\u060c \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">mkdir <\/span>todo\n<span class=\"nb\">cd <\/span>todo\npnpm init\npnpm config <span class=\"nb\">set <\/span>auto-install-peers <span class=\"nb\">true<\/span> <span class=\"nt\">--location<\/span> project\npnpm add @lazarv\/react-server better-sqlite3 zod\npnpm add <span class=\"nt\">-D<\/span> @types\/better-sqlite3 @types\/react @types\/react-dom autoprefixer postcss tailwindcss typescript\npnpx tailwindcss init <span class=\"nt\">-p<\/span>\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 \u0630\u062e\u06cc\u0631\u0647 \u0627\u0642\u0644\u0627\u0645 Todo \u062e\u0648\u062f\u060c \u0627\u0632 \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0645\u062d\u0644\u06cc Sqlite \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0627\u0632 Zod \u0648 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0633\u0627\u0632\u06cc \u0627\u0632 Tailwind CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u062a\u0645\u0627\u0645 \u06a9\u062f \u0645\u0646\u0628\u0639 \u0645\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc Tailwind\u060c \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f <strong>tailwind.config.js<\/strong> \u0628\u0647 \u0627\u06cc\u0646:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"cm\">\/** @type {import('tailwindcss').Config} *\/<\/span>\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.\/src\/**\/*.tsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">theme<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">extend<\/span><span class=\"p\">:<\/span> <span class=\"p\">{},<\/span>\n  <span class=\"p\">},<\/span>\n  <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span>\n<span class=\"p\">};<\/span>\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\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0647\u06cc\u0686 \u0637\u0631\u0627\u062d\u06cc \u0647\u06cc\u062c\u0627\u0646 \u0627\u0646\u06af\u06cc\u0632 Tailwind \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u06cc \u062f\u0647\u06cc\u0645\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a Tailwind 3 \u062e\u0637\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. <strong>src\/index.css<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"k\">@tailwind<\/span> <span class=\"n\">base<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">components<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">utilities<\/span><span class=\"p\">;<\/span>\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=\"%D8%B3%D9%84%D8%A7%D9%85_%D8%AF%D9%86%DB%8C%D8%A7\"><\/span>\n<p>  \u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627!<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062e\u0648\u0628 \u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0628\u0647\u062a\u0631 \u0627\u0632 \u06cc\u06a9 \u00ab\u0633\u0644\u0627\u0645 \u062c\u0647\u0627\u0646\u00bb \u062e\u0648\u0628 \u0642\u062f\u06cc\u0645\u06cc \u0646\u06cc\u0633\u062a!  \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Todo \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645!  \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <strong>src\/index.tsx<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Index<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Hello World!<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u06cc\u06a9\u0631\u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>pnpm exec react-server .\/src\/index.tsx<\/code> .  \u0628\u0631\u0627\u06cc \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0632\u0646\u062f\u06af\u06cc\u200c\u0645\u0627\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0686\u0646\u062f \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a npm \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <strong>package.json<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">scripts<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">dev<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-server .\/src\/index.tsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">build<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-server build .\/src\/index.tsx<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">start<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-server start<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">},<\/span>\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>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>pnpm dev<\/code> \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647  \u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0645\u0627\u060c http:\/\/localhost:3000 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 Hello World \u0645\u0627 \u0627\u0641\u062a\u062e\u0627\u0631 \u06a9\u0646\u06cc\u062f!  \u0628\u0631\u0646\u0627\u0645\u0647  \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>pnpm dev --open<\/code> \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86\"><\/span>\n<p>  \u0686\u06cc\u062f\u0645\u0627\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 Todo \u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u062f\u0627\u0631\u062f\u060c \u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <strong>src\/Layout.tsx<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Layout<\/span><span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">PropsWithChildren<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">html<\/span> <span class=\"na\">lang<\/span><span class=\"p\">=<\/span><span class=\"s\">\"en\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">head<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">meta<\/span> <span class=\"na\">charSet<\/span><span class=\"p\">=<\/span><span class=\"s\">\"utf-8\"<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">meta<\/span> <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content<\/span><span class=\"p\">=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">title<\/span><span class=\"p\">&gt;<\/span>Todo<span class=\"p\"\/><span class=\"nt\">title<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">head<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">body<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"p-4\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-4xl font-bold mb-4\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span><span class=\"p\">&gt;<\/span>Todo<span class=\"p\"\/><span class=\"nt\">a<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">body<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">html<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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\u06cc\u0686 \u0686\u06cc\u0632 \u062c\u0627\u0644\u0628\u06cc \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0641\u0642\u0637 \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0633\u0646\u062f \u0645\u0639\u0645\u0648\u0644\u06cc HTML.  \u0645\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 Layout \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0648\u0634\u0634 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B5%D9%81%D8%AD%D9%87\"><\/span>\n<p>  \u0635\u0641\u062d\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0645\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 Todo \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0632 \u062a\u0645\u0627\u0645 \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 Hello World \u062e\u062f\u0627\u062d\u0627\u0641\u0638\u06cc \u06a9\u0646\u06cc\u0645!  \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/index.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">allTodos<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/actions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">AddTodo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/AddTodo<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Item<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Item<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Index<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">todos<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">allTodos<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">Layout<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">AddTodo<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-gray-500\"<\/span><span class=\"p\">&gt;<\/span>No todos yet!<span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">}<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Item<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"na\">title<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span> <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\"\/><span class=\"nc\">Layout<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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>\u062f\u0631 \u0627\u06cc\u0646 React Server Component\u060c \u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062f \u0630\u062e\u06cc\u0631\u0647 \u0634\u062f\u0647 Todo \u0631\u0627 \u0628\u0627 \u062a\u0645\u0627\u0633 \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>allTodos()<\/code> \u0648 \u0627\u0632 \u0646\u062a\u06cc\u062c\u0647 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 JSX \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0645\u0627 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 Layout \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f \u062f\u0631 \u06cc\u06a9 \u0633\u0646\u062f HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%88%D8%B1%D8%AF\"><\/span>\n<p>  \u0645\u0648\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0622\u06cc\u062a\u0645 \u0647\u0627\u06cc\u0645\u0627\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062c\u0632\u0621 Item \u062f\u0631 \u0622\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <strong>src\/Item.tsx<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">deleteTodo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/actions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">type<\/span> <span class=\"nx\">Props<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">title<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Item<\/span><span class=\"p\">({<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">Props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex row items-center justify-between py-1 px-4 my-1 rounded-lg text-lg border bg-gray-100 text-gray-600 mb-2\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex-1\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">form<\/span> <span class=\"na\">action<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">deleteTodo<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span> <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"hidden\"<\/span> <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"id\"<\/span> <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"font-medium\"<\/span><span class=\"p\">&gt;<\/span>Delete<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">form<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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\u0624\u0644\u0641\u0647 Item \u0645\u0648\u0631\u062f Todo \u0645\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <code>id<\/code> \u0648 <code>title<\/code> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc  \u0627\u0645\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0686\u0647\u061f <code\/>? It\u2019s a server action! When the user will submit the form by clicking on the \u201cDelete\u201d button, the browser will call our server action. This is possible without any JavaScript on the frontend, as React supports progressive enhancement for server actions and the initial form action will call the server action by including a hidden input field in the form:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span> <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"hidden\"<\/span> <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"$ACTION_ID_\/Users\/lazarv\/Projects\/tutorials\/todo\/src\/actions.ts#deleteTodo\"<\/span><span class=\"p\">&gt;<\/span>\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>\u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u06cc\u0646 \u0631\u0627 \u062d\u0644 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f <code>$ACTION_ID_<\/code> \u0645\u0633\u06cc\u0631 \u067e\u06cc\u0634\u0648\u0646\u062f \u0627\u06a9\u0634\u0646 \u0633\u0631\u0648\u0631 \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u0627\u0628\u0639 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0631\u0648\u0631 \u0645\u0627 \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%82%D8%AF%D8%A7%D9%85%D8%A7%D8%AA_%D8%B3%D8%B1%D9%88%D8%B1\"><\/span>\n<p>  \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0633\u0631\u0648\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0627\u0632 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Todo \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0627\u06cc\u0646 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0628\u062e\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062e\u062c\u0627\u0644\u062a \u0646\u06a9\u0634\u06cc\u062f\u060c \u0647\u0646\u0648\u0632 \u0647\u0645 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <strong>src\/actions.ts<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">redirect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@lazarv\/react-server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">Database<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">better-sqlite3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"o\">*<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">zod<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zod<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Database<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">db.sqlite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">exec<\/span><span class=\"p\">(<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT)<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">);<\/span>\n\n<span class=\"nx\">type<\/span> <span class=\"nx\">Todo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">title<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">addTodoSchema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">zod<\/span><span class=\"p\">.<\/span><span class=\"nf\">object<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"nx\">zod<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">string<\/span><span class=\"p\">()<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">min<\/span><span class=\"p\">(<\/span><span class=\"mi\">3<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Title must be at least 3 characters<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">max<\/span><span class=\"p\">(<\/span><span class=\"mi\">100<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Title must be at most 100 characters<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">refine<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">value<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Title is required<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nf\">transform<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">value<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">()),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">deleteTodoSchema<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">zod<\/span><span class=\"p\">.<\/span><span class=\"nf\">object<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">zod<\/span><span class=\"p\">.<\/span><span class=\"nf\">string<\/span><span class=\"p\">().<\/span><span class=\"nf\">transform<\/span><span class=\"p\">((<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">(),<\/span> <span class=\"mi\">10<\/span><span class=\"p\">)),<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">addTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormData<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">addTodoSchema<\/span><span class=\"p\">.<\/span><span class=\"nf\">safeParse<\/span><span class=\"p\">(<\/span><span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">fromEntries<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">));<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">success<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">issues<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">prepare<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">INSERT INTO todos(title) VALUES (?)<\/span><span class=\"dl\">\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">run<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">);<\/span>\n  <span class=\"nf\">redirect<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">allTodos<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">prepare<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">SELECT * FROM todos<\/span><span class=\"dl\">\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">all<\/span><span class=\"p\">()<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Todo<\/span><span class=\"p\">[];<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">deleteTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FormData<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">deleteTodoSchema<\/span><span class=\"p\">.<\/span><span class=\"nf\">safeParse<\/span><span class=\"p\">(<\/span><span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">fromEntries<\/span><span class=\"p\">(<\/span><span class=\"nx\">formData<\/span><span class=\"p\">));<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">success<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">issues<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">;<\/span>\n  <span class=\"nx\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">prepare<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">DELETE FROM todos WHERE id = ?<\/span><span class=\"dl\">\"<\/span><span class=\"p\">).<\/span><span class=\"nf\">run<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n  <span class=\"nf\">redirect<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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>\u062f\u0631 \u062e\u0637 \u0627\u0648\u0644 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u060c \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0631\u0627 \u0627\u0628\u0632\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u0639\u0645\u0644 \u0633\u0631\u0648\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>\u201cuse server\u201d;<\/code> \u0628\u062e\u0634\u0646\u0627\u0645\u0647  \u0647\u0645\u0647 \u062a\u0648\u0627\u0628\u0639 \u063a\u06cc\u0631\u0647\u0645\u06af\u0627\u0645 \u0635\u0627\u062f\u0631 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0631\u0648\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p>\u0645\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Sqlite \u0631\u0627 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u0627\u0698\u0648\u0644 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0637\u0631\u062d\u0648\u0627\u0631\u0647 \u0647\u0627\u06cc Zod \u0631\u0627 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u0627\u0641\u0632\u0648\u062f\u0646 \u0648 \u062d\u0630\u0641 \u0622\u06cc\u062a\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u062a\u0645\u0627\u0645 \u0627\u06a9\u0634\u0646 \u0647\u0627\u06cc \u0633\u0631\u0648\u0631\u060c \u06cc\u06a9 \u0639\u062f\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f <code>FormData<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0641\u0631\u0645 \u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 <code>safeParse<\/code> \u0627\u06cc\u0646\u0647\u0627 \u067e\u0633 \u0627\u0632 \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u0627\u0634\u06cc\u0627\u0621 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>Object.fromEntries<\/code>.<\/p>\n<p>\u0627\u06af\u0631 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc Zod \u0646\u0627\u0645\u0648\u0641\u0642 \u0628\u0627\u0634\u062f\u060c \u0645\u0633\u0627\u0626\u0644 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062e\u0637\u0627 \u0645\u0637\u0631\u062d \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u0641\u0642\u06cc\u062a\u060c \u06cc\u06a9 \u0641\u0631\u0645\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u0631\u062c \u06cc\u0627 \u062d\u0630\u0641 \u0622\u06cc\u062a\u0645 Todo \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646\u060c \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>redirect<\/code> \u0628\u0631\u0627\u06cc \u0647\u062f\u0627\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u062a\u0645\u0627\u0633 \u0627\u0642\u062f\u0627\u0645 \u0633\u0631\u0648\u0631.  \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 \u0628\u0627\u0632\u062e\u0648\u0627\u0646\u06cc \u0635\u0641\u062d\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u0627 \u062d\u0630\u0641 \u0645\u062c\u062f\u062f \u0645\u0648\u0631\u062f Todo\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u0641\u0631\u0645 \u0627\u0631\u0633\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0647\u0645 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u06cc\u0645 <code>allTodos<\/code> \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0639\u0645\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0647\u0645\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0648\u0627\u062d\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%88%D8%B1%D8%AF_%D8%AC%D8%AF%DB%8C%D8%AF%DB%8C_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0648\u0631\u062f \u062c\u062f\u06cc\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a AddTodo\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <strong>src\/AddTodo.tsx<\/strong> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useActionState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@lazarv\/react-server\/router<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ZodIssue<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">zod<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">addTodo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/actions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">AddTodo<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">formData<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useActionState<\/span><span class=\"o\">&lt;<\/span>\n    <span class=\"k\">typeof<\/span> <span class=\"nx\">addTodo<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">string<\/span> <span class=\"o\">&amp;<\/span> <span class=\"nb\">Error<\/span> <span class=\"o\">&amp;<\/span> <span class=\"nx\">ZodIssue<\/span><span class=\"p\">[]<\/span>\n  <span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"nx\">addTodo<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">form<\/span> <span class=\"na\">action<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">addTodo<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"mb-4\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"mb-2\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n          <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"title\"<\/span>\n          <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text\"<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bg-gray-50 border border-gray-300 text-gray-900 rounded-lg p-2.5\"<\/span>\n          <span class=\"na\">defaultValue<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">formData<\/span><span class=\"p\">?.<\/span><span class=\"kd\">get<\/span><span class=\"p\">?.(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">string<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">autoFocus<\/span>\n        <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n        <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-white bg-blue-700 hover:bg-blue-800 rounded-lg px-5 py-2 mb-2 text-center\"<\/span>\n        <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"submit\"<\/span>\n      <span class=\"p\">&gt;<\/span>\n        Submit\n      <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">error<\/span><span class=\"p\">?.<\/span><span class=\"nx\">map<\/span><span class=\"p\">?.(({<\/span> <span class=\"nx\">message<\/span> <span class=\"p\">},<\/span> <span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span>\n          <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">i<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bg-red-50 border rounded-lg border-red-500 text-red-500 p-2.5 mb-2\"<\/span>\n        <span class=\"p\">&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">message<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">))<\/span> <span class=\"o\">??<\/span>\n        <span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bg-red-50 border rounded-lg border-red-500 text-red-500 p-2.5\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"nx\">error<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\"\/><span class=\"nt\">form<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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\u0627 \u0642\u0628\u0644\u0627\u064b \u0645\u06cc \u062f\u0627\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0633\u0631\u0648\u0631 \u0627\u0632 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code\/>. But what about the result of our server action call? <code>useActionState<\/code> \u0628\u0631\u0627\u06cc \u0646\u062c\u0627\u062a!<\/p>\n<p>\u0628\u0627 \u0639\u0628\u0648\u0631 \u0627\u0632 <code>addTodo<\/code> \u0645\u0631\u062c\u0639 \u0639\u0645\u0644\u06a9\u0631\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0631\u0648\u0631 \u0628\u0647 <code>useActionState<\/code> \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0646\u062a\u06cc\u062c\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0639\u0645\u0644 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u06a9\u0634\u0646 \u0633\u0631\u0648\u0631 \u062e\u0627\u0635 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u06a9\u0646\u06cc\u0645 <code>error<\/code> \u0646\u062a\u06cc\u062c\u0647  \u0627\u06cc\u0646 \u0645\u0633\u0627\u0626\u0644 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062e\u0637\u0627\u06cc Zod \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0639\u0645\u0644 \u0627\u0641\u0632\u0648\u062f\u0646 \u0633\u0631\u0648\u0631 \u067e\u0631\u062a\u0627\u0628 \u06a9\u0631\u062f\u06cc\u0645.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0645\u0647 \u0645\u0633\u0627\u0626\u0644 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc Zod \u0631\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u0645 \u0648 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u062e\u0637\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AA%D9%88%D9%84%DB%8C%D8%AF\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627\u0646\u0646\u062f <code>@lazarv\/react-server<\/code> \u062f\u0631 \u062d\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648 \u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f \u0627\u0633\u062a\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0648\u0686\u06a9 Vite \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 <strong>\u0628\u0647\u062a\u0631-sqlite3<\/strong> \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u062e\u0627\u0631\u062c\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f  \u0645\u0627 \u0646\u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">build<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">rollupOptions<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">external<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">better-sqlite3<\/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<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\u0648\u0627\u0631\u062f \u0641\u0648\u0642 \u0631\u0627 \u062f\u0631 a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <strong>vite.config.ts<\/strong> \u0641\u0627\u06cc\u0644.  \u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u06cc\u0646 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u062d\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u062a\u0639\u0648\u06cc\u0636 \u0645\u0627\u0698\u0648\u0644 \u062f\u0627\u063a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0633\u0627\u062e\u062a \u062a\u0648\u0644\u06cc\u062f\u060c \u0641\u0642\u0637 \u0633\u0646\u062f \u0648 \u06cc\u06a9 \u062f\u0627\u0631\u0627\u06cc\u06cc CSS \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>pnpm build<\/code> \u0648 \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0631\u0648\u0631 \u062a\u0648\u0644\u06cc\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f <code>pnpm start<\/code> . <\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%AE%D9%86%D8%A7%D9%86_%D9%BE%D8%A7%DB%8C%D8%A7%D9%86%DB%8C\"><\/span>\n<p>  \u0633\u062e\u0646\u0627\u0646 \u067e\u0627\u06cc\u0627\u0646\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062e\u0648\u062f\u0634\u0647!  \u0645\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631 \u06a9\u0648\u0686\u06a9 Todo \u062f\u0627\u0631\u06cc\u0645.  \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0645\u0648\u0646\u0647 \u0631\u0627 \u062f\u0631 GitHub \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634 \u0641\u0648\u0642\u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u0648\u0631\u062f Todo \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0622\u0633\u0627\u0646 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0648 \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f\u0647 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0644\u0630\u062a \u0628\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 @lazarv\/react-server \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0631\u0627 \u062f\u0648\u0633\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f!  \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0647\u06cc\u062c\u0627\u0646 \u0627\u0646\u06af\u06cc\u0632 \u062f\u06cc\u06af\u0631 \u062a\u0648\u0633\u0637 React \u0648 \u062e\u0648\u062f \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a!  \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0632 \u0647\u06cc\u0686 \u0645\u0624\u0644\u0641\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0627\u06cc\u0646 \u062f\u0631 \u06cc\u06a9 \u0622\u0645\u0648\u0632\u0634 \u062f\u06cc\u06af\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.  \u0633\u0627\u06cc\u062a \u0645\u0633\u062a\u0646\u062f\u0627\u062a <code>@lazarv\/react-server<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f \u0648 \u0633\u0627\u062e\u062a \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0622\u0646 \u062f\u0631 Vercel \u062d\u062f\u0648\u062f 5 \u062b\u0627\u0646\u06cc\u0647 \u0637\u0648\u0644 \u0645\u06cc \u06a9\u0634\u062f!  \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u0632 Vite \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0631\u06cc\u0639 \u0627\u0633\u062a!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0647\u0645\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u062c\u062f\u06cc\u062f \u0628\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 Todo \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @lazarv\/react-server\u060c \u06cc\u06a9 \u0645\u062a\u0627 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644\u06cc\u0633\u062a\u06cc React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645! \u0647\u062f\u0641 \u0645\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0648 \u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 React \u0627\u0633\u062a. \u0645\u0627 \u0641\u0642\u0637 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":63963,"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-63962","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\/63962","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=63962"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63962\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/63963"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=63962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=63962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=63962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}