{"id":111384,"date":"2025-05-31T16:41:16","date_gmt":"2025-05-31T12:11:16","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/"},"modified":"2025-05-31T16:41:16","modified_gmt":"2025-05-31T12:11:16","slug":"%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/","title":{"rendered":"\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a Master Frontend: \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc Userauth \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f"},"content":{"rendered":"<div data-article-id=\"2548352\" id=\"article-body\">\n<p>\u0622\u0645\u0627\u062f\u0647 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0627\u0633\u0631\u0627\u0631 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0647\u0633\u062a\u06cc\u062f\u061f \u0627\u0645\u0631\u0648\u0632 \u060c \u0634\u0645\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a\u0646 \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc Userauth \u06a9\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u060c \u0648\u0627\u0631\u062f \u062f\u0646\u06cc\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0645\u0646 \u0645\u06cc \u0634\u0648\u06cc\u062f. \u0627\u06cc\u0646 \u0641\u0642\u0637 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0641\u0631\u0645 \u0647\u0627 \u0646\u06cc\u0633\u062a &#8211; \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0647\u0633\u062a\u06cc\u062f!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/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\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%AF%D8%B1%DA%A9_%D8%AC%D8%A7%D8%AF%D9%88%DB%8C_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\" >\u062f\u0631\u06a9 \u062c\u0627\u062f\u0648\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/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\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%82%D9%84%D8%B9%D9%87_React_%D8%AE%D9%88%D8%AF\" >\u062a\u0646\u0638\u06cc\u0645 \u0642\u0644\u0639\u0647 React \u062e\u0648\u062f<\/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\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%A8%D8%A7_API_%D8%AA%D9%85%D8%B1%DB%8C%D9%86_%D8%AE%D9%88%D8%AF_%D9%85%D9%84%D8%A7%D9%82%D8%A7%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF_%E2%80%93_reqres\" >\u0628\u0627 API \u062a\u0645\u0631\u06cc\u0646 \u062e\u0648\u062f \u0645\u0644\u0627\u0642\u0627\u062a \u06a9\u0646\u06cc\u062f &#8211; reqres<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_reqres_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF_%D9%82%DB%8C%D8%A7%D8%B3_%D8%B3%D8%A7%D8%AF%D9%87\" >\u0686\u06af\u0648\u0646\u0647 reqres \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f (\u0642\u06cc\u0627\u0633 \u0633\u0627\u062f\u0647)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\" >\u0633\u0627\u062e\u062a \u0633\u06cc\u0633\u062a\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%A8%D9%86%DB%8C%D8%A7%D8%AF_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%88%D8%B1%D9%88%D8%AF_%D8%B4%D9%85%D8%A7\" >\u0628\u0646\u06cc\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0648\u0631\u0648\u062f \u0634\u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%AC%D8%A7%D8%AF%D9%88%DB%8C%DB%8C_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\" >\u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0627\u062f\u0648\u06cc\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%B1%D8%A7%D8%A8%D8%B7_%D9%81%D8%B1%D9%85_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\" >\u0631\u0627\u0628\u0637 \u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D8%B3%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%AE%D8%AA%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA\" >\u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0633\u0627\u062f\u0647 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D9%85%D8%A7%D9%86%D9%86%D8%AF_%DB%8C%DA%A9_%D8%AD%D8%B1%D9%81%D9%87_%D8%A7%DB%8C\" >\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u062d\u0631\u0641\u0647 \u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\" >\u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%AE%D8%B7%D8%A7_%E2%80%93_%D9%88%D9%82%D8%AA%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%D9%86%D8%AF\" >\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627 &#8211; \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%B3%D8%B7%D8%AD_%D8%A8%D8%B9%D8%AF%DB%8C_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%88%D8%A7%D9%82%D8%B9%DB%8C_%D9%88_%D9%81%D8%B1%D8%A7%D8%AA%D8%B1_%D8%A7%D8%B2_%D8%A2%D9%86\" >\u0633\u0637\u062d \u0628\u0639\u062f\u06cc: \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648\u0627\u0642\u0639\u06cc \u0648 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0622\u0646<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#integration_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_Firebase\" >integration \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a Firebase<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%F0%9F%A4%96_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_AI\" >\ud83e\udd16 \u0627\u0641\u0632\u0648\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc AI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%F0%9F%9B%A1_%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85_%D8%A7%D9%85%D9%86%DB%8C%D8%AA%DB%8C_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87\" >\ud83d\udee1 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0645\u0646\u06cc\u062a\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%F0%9F%8E%A8_%D8%AA%D8%B9%D8%A7%D9%84%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C\" >\ud83c\udfa8 \u062a\u0639\u0627\u0644\u06cc \u0637\u0631\u0627\u062d\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#tips_%D9%86%DA%A9%D8%A7%D8%AA_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D9%85%D8%AD%D9%84%DB%8C_Bamenda_Beyond\" >tips \u0646\u06a9\u0627\u062a \u062a\u0648\u0633\u0639\u0647 \u0645\u062d\u0644\u06cc (Bamenda &#038; Beyond)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D9%85%D8%A3%D9%85%D9%88%D8%B1%DB%8C%D8%AA_%D8%B4%D9%85%D8%A7_%D8%AF%D8%B1_%D8%A7%D9%86%D8%AA%D8%B8%D8%A7%D8%B1_%D8%A7%D8%B3%D8%AA_%F0%9F%9A%80\" >\u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u0634\u0645\u0627 \u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0633\u062a! \ud83d\ude80<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%F0%9F%92%A1_%D9%86%DA%A9%D8%A7%D8%AA_%D8%AD%D8%B1%D9%81%D9%87_%D8%A7%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D9%88%D9%81%D9%82%DB%8C%D8%AA\" >\ud83d\udca1 \u0646\u06a9\u0627\u062a \u062d\u0631\u0641\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a7%d8%ad%d8%b1%d8%a7%d8%b2-%d9%87%d9%88%db%8c%d8%aa-master-frontend-%d9%86%d8%b3%d8%ae%d9%87-%db%8c-%d9%86%d9%85%d8%a7%db%8c%d8%b4%db%8c-userauth-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a8%d8%b3\/#%D8%A7%DB%8C%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D8%B3%D9%88%D9%86%D8%AF\" >\u0627\u06cc\u062f\u0647 \u0647\u0627\u06cc \u067e\u0633\u0648\u0646\u062f:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\u062f\u0631\u06a9 \u062c\u0627\u062f\u0648\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/li>\n<li>\u062a\u0646\u0638\u06cc\u0645 \u0642\u0644\u0639\u0647 React \u062e\u0648\u062f<\/li>\n<li>\u0628\u0627 API \u062a\u0645\u0631\u06cc\u0646 \u062e\u0648\u062f \u0645\u0644\u0627\u0642\u0627\u062a \u06a9\u0646\u06cc\u062f &#8211; reqres<\/li>\n<li>\u0633\u0627\u062e\u062a \u0633\u06cc\u0633\u062a\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/li>\n<li>\u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0633\u0627\u062f\u0647 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/li>\n<li>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u062d\u0631\u0641\u0647 \u0627\u06cc<\/li>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<\/li>\n<li>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627 &#8211; \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f<\/li>\n<li>\u0633\u0637\u062d \u0628\u0639\u062f\u06cc: \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648\u0627\u0642\u0639\u06cc \u0648 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0622\u0646<\/li>\n<li>\u0627\u06cc\u062f\u0647 \u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648 \u067e\u06cc\u0634\u0631\u0641\u062a<\/li>\n<\/ol>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%DA%A9_%D8%AC%D8%A7%D8%AF%D9%88%DB%8C_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\"><\/span>\n<p>  \u062f\u0631\u06a9 \u062c\u0627\u062f\u0648\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0645\u0627\u0646\u0646\u062f \u0648\u0631\u0648\u062f\u06cc VIP Club \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0634\u06af\u0627\u0647 \u0627\u0633\u062a \u0648 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a Pass VIP (\u0646\u0634\u0627\u0646\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631) \u0628\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 \u0645\u0646\u0627\u0633\u0628 (\u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc\/\u0631\u0645\u0632 \u0639\u0628\u0648\u0631) \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f. \u067e\u0633 \u0627\u0632 \u06af\u0630\u0631 \u0627\u0632 \u0622\u0646\u0647\u0627 \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0645\u0646\u0627\u0637\u0642 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc (\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647) \u0628\u0627\u0634\u06af\u0627\u0647 \u0634\u0645\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f.<\/p>\n<p><strong>\u0622\u0646\u0686\u0647 \u0634\u0645\u0627 \u062a\u0633\u0644\u0637 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a:<\/strong><\/p>\n<ul>\n<li>\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0648 \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631<\/li>\n<li>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062a\u0648\u06a9\u0646<\/li>\n<li>\u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647 \u0648 \u062c\u0644\u0633\u0627\u062a \u06a9\u0627\u0631\u0628\u0631<\/li>\n<li>\u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u06cc API \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%82%D9%84%D8%B9%D9%87_React_%D8%AE%D9%88%D8%AF\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u0642\u0644\u0639\u0647 React \u062e\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0632\u0645\u06cc\u0646 \u0628\u0627\u0632\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx create-react-app userauth-demo\n<span class=\"nb\">cd <\/span>userauth-demo\nnpm start\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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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>\u0642\u0644\u0639\u0647 React \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0644\u0646\u062f \u0627\u0633\u062a! \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0633\u0627\u062e\u062a \u0642\u0627\u0628 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u0627\u0645\u0646 \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f &#8211; \u0627\u06a9\u0646\u0648\u0646 \u0645\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7_API_%D8%AA%D9%85%D8%B1%DB%8C%D9%86_%D8%AE%D9%88%D8%AF_%D9%85%D9%84%D8%A7%D9%82%D8%A7%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF_%E2%80%93_reqres\"><\/span>\n<p>  \u0628\u0627 API \u062a\u0645\u0631\u06cc\u0646 \u062e\u0648\u062f \u0645\u0644\u0627\u0642\u0627\u062a \u06a9\u0646\u06cc\u062f &#8211; reqres<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Reqres (https:\/\/reqres.in) \u0632\u0645\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0634\u0645\u0627\u0633\u062a &#8211; \u06cc\u06a9 API \u062c\u0639\u0644\u06cc \u0627\u0645\u0627 \u0648\u0627\u0642\u0639 \u0628\u06cc\u0646\u0627\u0646\u0647 \u06a9\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0627\u0646\u0646\u062f \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0648\u0627\u0642\u0639\u06cc \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632 \u067e\u0631\u0648\u0627\u0632 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u0633\u062a!<\/p>\n<p><strong>\u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0647 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f:<\/strong><\/p>\n<ul>\n<li>\n<code>POST \/api\/login<\/code>  &#8211; \u062f\u0631\u0648\u0627\u0632\u0647 \u0648\u0631\u0648\u062f\u06cc \u0634\u0645\u0627<\/li>\n<li>\n<code>POST \/api\/register<\/code>  &#8211; \u0645\u06cc\u0632 \u062b\u0628\u062a \u0646\u0627\u0645\n<\/li>\n<li>\n<code>GET \/api\/users<\/code>  &#8211; \u0641\u0647\u0631\u0633\u062a \u0639\u0636\u0648<\/li>\n<li>\n<code>GET \/api\/users\/{id}<\/code>  &#8211; \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0639\u0636\u0648 \u0627\u0646\u0641\u0631\u0627\u062f\u06cc<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_reqres_%DA%A9%D8%A7%D8%B1_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF_%D9%82%DB%8C%D8%A7%D8%B3_%D8%B3%D8%A7%D8%AF%D9%87\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 reqres \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f (\u0642\u06cc\u0627\u0633 \u0633\u0627\u062f\u0647)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Reqres \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0630\u06cc\u0631\u0646\u062f\u0647 \u0645\u0641\u06cc\u062f \u062f\u0631 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u0627\u062f\u0627\u0631\u06cc \u0645\u0633\u062e\u0631\u0647 \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0628\u0631\u0631\u0633\u06cc (\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645) \u062a\u0645\u0631\u06cc\u0646 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0646\u06cc\u062f (\u062b\u0628\u062a \u0646\u0627\u0645)<\/li>\n<li>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0645\u0646\u062f\u0627\u0646 \u0631\u0627 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f (\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f)<\/li>\n<li>\u067e\u0630\u06cc\u0631\u0646\u062f\u0647 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u062d\u0631\u0641\u0647 \u0627\u06cc \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f \u060c \u062d\u062a\u06cc \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0641\u0642\u0637 \u062a\u0645\u0631\u06cc\u0646 \u0628\u0627\u0634\u062f!<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0633\u06cc\u0633\u062a\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f Bouncer \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 &#8211; \u0645\u0624\u0644\u0641\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0633\u062a\u0631\u0633\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0627\u0639\u0637\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D9%86%DB%8C%D8%A7%D8%AF_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%88%D8%B1%D9%88%D8%AF_%D8%B4%D9%85%D8%A7\"><\/span>\n<p>  \u0628\u0646\u06cc\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0648\u0631\u0648\u062f \u0634\u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">LoginForm<\/span><span class=\"p\">({<\/span> <span class=\"nx\">onLoginSuccess<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">email<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEmail<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">password<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setPassword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setError<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/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\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"login-container\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>Welcome Back! \ud83d\udeaa<span class=\"p\"\/><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"cm\">\/* We'll build this step by step *\/<\/span><span class=\"si\">}<\/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\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">LoginForm<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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><strong>\u0627\u06cc\u0646\u062c\u0627 \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f\u061f<\/strong><\/p>\n<ul>\n<li>\n<code>email\/password<\/code>  &#8211; \u062c\u0639\u0628\u0647 \u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0627\u0639\u062a\u0628\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631<\/li>\n<li>\n<code>loading<\/code>  &#8211; \u067e\u0631\u0686\u0645 &#8220;\u0644\u0637\u0641\u0627 \u0635\u0628\u0631 \u06a9\u0646\u06cc\u062f&#8221; \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0639\u062a\u0628\u0627\u0631 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645<\/li>\n<li>\n<code>error<\/code>  &#8211; \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u067e\u06cc\u0627\u0645 \u0628\u0631\u0627\u06cc \u0648\u0642\u062a\u06cc \u06a9\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u0634\u0648\u062f<\/li>\n<li>\n<code>onLoginSuccess<\/code>  &#8211; \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0634\u0646 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645!<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%AC%D8%A7%D8%AF%D9%88%DB%8C%DB%8C_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\"><\/span>\n<p>  \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0627\u062f\u0648\u06cc\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">handleLogin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ Stop the form from refreshing the page<\/span>\n\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Clear any previous errors<\/span>\n\n    <span class=\"c1\">\/\/ Send credentials to our digital bouncer<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/reqres.in\/api\/login<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">password<\/span><span class=\"p\">:<\/span> <span class=\"nx\">password<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Success! User gets their VIP pass<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Login successful! Token:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">token<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">authToken<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">token<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">onLoginSuccess<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Bouncer says \"no entry\"<\/span>\n      <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Login failed<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Network error - please try again<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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><strong>\u062a\u062c\u0632\u06cc\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a:<\/strong><\/p>\n<ol>\n<li>\n<strong><code>e.preventDefault()<\/code><\/strong>: \u0641\u0631\u0645 \u0631\u0627 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062e\u0648\u062f \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u062f (\u062a\u062c\u062f\u06cc\u062f \u0635\u0641\u062d\u0647)<\/li>\n<li>\n<strong><code>method: 'POST'<\/code><\/strong>: \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0631\u0633\u0627\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0647\u0633\u062a\u06cc\u0645 \u060c \u0646\u0647 \u0641\u0642\u0637 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0622\u0646<\/li>\n<li>\n<strong><code>headers<\/code><\/strong>: \u06af\u0641\u062a\u0646 \u0633\u0631\u0648\u0631 &#8220;\u0633\u0644\u0627\u0645 \u060c \u0645\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc JSON \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u0645&#8221;<\/li>\n<li>\n<strong><code>localStorage.setItem()<\/code><\/strong>: \u0630\u062e\u06cc\u0631\u0647 \u067e\u0627\u0633 VIP (\u062a\u0648\u06a9\u0646) \u062f\u0631 \u0627\u06cc\u0645\u0646 \u0645\u0631\u0648\u0631\u06af\u0631<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D8%A8%D8%B7_%D9%81%D8%B1%D9%85_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\"><\/span>\n<p>  \u0631\u0627\u0628\u0637 \u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"p\">&lt;<\/span><span class=\"nt\">form<\/span> <span class=\"na\">onSubmit<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLogin<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"email\"<\/span>\n      <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Email address\"<\/span>\n      <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">email<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setEmail<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">required<\/span>\n    <span class=\"p\">\/&gt;<\/span>\n  <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n  <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\n      <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Password\"<\/span>\n      <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">password<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setPassword<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n      <span class=\"na\">required<\/span>\n    <span class=\"p\">\/&gt;<\/span>\n  <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n  <span class=\"si\">{<\/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\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"error-message\"<\/span><span class=\"p\">&gt;<\/span>\n      \u26a0\ufe0f <span class=\"si\">{<\/span><span class=\"nx\">error<\/span><span class=\"si\">}<\/span>\n    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n\n  <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"submit\"<\/span> <span class=\"na\">disabled<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">loading<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"si\">{<\/span><span class=\"nx\">loading<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Checking credentials...<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Enter the Club \ud83d\udeaa<\/span><span class=\"dl\">'<\/span><span class=\"si\">}<\/span>\n  <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\n<span class=\"p\">{<\/span><span class=\"cm\">\/* Pro tip for testing *\/<\/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\">\"test-credentials\"<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\ud83e\uddea Test with: eve.holt@reqres.in \/ any password<span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n<span class=\"p\"\/><span class=\"nt\">div<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AB%D8%A8%D8%AA_%D9%86%D8%A7%D9%85_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D8%B3%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%AE%D8%AA%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA\"><\/span>\n<p>  \u062b\u0628\u062a \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0633\u0627\u062f\u0647 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062b\u0628\u062a \u0646\u0627\u0645 \u0645\u0627\u0646\u0646\u062f \u067e\u0631 \u06a9\u0631\u062f\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0639\u0636\u0648\u06cc\u062a \u0627\u0633\u062a. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0648\u0646\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">handleRegister<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Submit membership application<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/reqres.in\/api\/register<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">email<\/span><span class=\"p\">:<\/span> <span class=\"nx\">email<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">password<\/span><span class=\"p\">:<\/span> <span class=\"nx\">password<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Welcome to the club!<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Registration successful!<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Clear any errors<\/span>\n      <span class=\"c1\">\/\/ You might want to auto-login here or show success message<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Registration failed<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setError<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Network error during registration<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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><strong>\u062a\u0641\u0627\u0648\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0632 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645:<\/strong><\/p>\n<ul>\n<li>\u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0634\u0627\u0628\u0647 \u060c \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0645\u062e\u062a\u0644\u0641 (<code>\/api\/register<\/code>)<\/li>\n<li>\u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc &#8220;\u062d\u0633\u0627\u0628 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647&#8221; \u0628\u0647 \u062c\u0627\u06cc &#8220;\u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u0639\u0637\u0627 \u0634\u062f\u0647&#8221; \u0627\u0633\u062a<\/li>\n<li>\u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u06cc\u0627 \u062a\u0623\u06cc\u06cc\u062f \u062e\u0648\u062f\u06a9\u0627\u0631 \u0647\u062f\u0627\u06cc\u062a \u0634\u0648\u06cc\u062f<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%D9%85%D8%A7%D9%86%D9%86%D8%AF_%DB%8C%DA%A9_%D8%AD%D8%B1%D9%81%D9%87_%D8%A7%DB%8C\"><\/span>\n<p>  \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u062d\u0631\u0641\u0647 \u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633 \u0627\u0632 \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u060c \u0622\u0646\u0647\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u0646\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0639\u0636\u0648 \u0631\u0627 \u0628\u0628\u06cc\u0646\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0633\u0627\u0632\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">UserDirectory<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">users<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUsers<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([]);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">loading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">selectedUser<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSelectedUser<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Fetch the member directory<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">fetchUsers<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/reqres.in\/api\/users?page=1<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n      <span class=\"nf\">setUsers<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ ReqRes wraps users in a 'data' property<\/span>\n\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Failed to fetch users:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">finally<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setLoading<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/ Fetch detailed info for one member<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">fetchUserDetails<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`https:\/\/reqres.in\/api\/users\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n      <span class=\"nf\">setSelectedUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Failed to fetch user details:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/ Load users when component starts<\/span>\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">fetchUsers<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">},<\/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\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"user-directory\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>Club Members \ud83d\udc65<span class=\"p\"\/><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n\n      <span class=\"si\">{<\/span><span class=\"nx\">loading<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Loading member directory...<span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">}<\/span>\n\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"users-grid\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"si\">{<\/span><span class=\"nx\">users<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> \n            <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> \n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"user-card\"<\/span>\n            <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">fetchUserDetails<\/span><span class=\"p\">(<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">avatar<\/span><span class=\"si\">}<\/span> <span class=\"na\">alt<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">first_name<\/span><span class=\"p\">}<\/span><span class=\"s2\">'s avatar`<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h3<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">first_name<\/span><span class=\"si\">}<\/span> <span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">last_name<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">h3<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/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><span class=\"si\">}<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n      <span class=\"si\">{<\/span><span class=\"nx\">selectedUser<\/span> <span class=\"o\">&amp;&amp;<\/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\">\"user-details\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">h3<\/span><span class=\"p\">&gt;<\/span>Selected Member Details<span class=\"p\"\/><span class=\"nt\">h3<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Name: <span class=\"si\">{<\/span><span class=\"nx\">selectedUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">first_name<\/span><span class=\"si\">}<\/span> <span class=\"si\">{<\/span><span class=\"nx\">selectedUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">last_name<\/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\">p<\/span><span class=\"p\">&gt;<\/span>Email: <span class=\"si\">{<\/span><span class=\"nx\">selectedUser<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/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><span class=\"si\">}<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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><strong>\u062f\u0631\u06a9 \u062c\u0631\u06cc\u0627\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627:<\/strong><\/p>\n<ul>\n<li>\n<code>useEffect<\/code>  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f (\u0645\u0627\u0646\u0646\u062f \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0641\u0647\u0631\u0633\u062a \u0639\u0636\u0648)<\/li>\n<li>\n<code>map()<\/code>  \u0628\u0631\u0627\u06cc \u0647\u0631 \u0639\u0636\u0648 \u06a9\u0627\u0631\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f (\u0645\u0627\u0646\u0646\u062f \u0686\u0627\u067e \u06a9\u0627\u0631\u062a \u0648\u06cc\u0632\u06cc\u062a)<\/li>\n<li>\u0631\u0648\u06cc Handlers \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0642\u06cc\u0642 \u0631\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f (\u0645\u0627\u0646\u0646\u062f \u062c\u0633\u062a\u062c\u0648\u06cc \u0646\u0645\u0627\u06cc\u0647 \u06a9\u0627\u0645\u0644 \u0634\u062e\u0635\u06cc)<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D9%88%D8%B6%D8%B9%DB%8C%D8%AA_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA\"><\/span>\n<p>  \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0686\u0627\u0644\u0634 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u06cc\u0627\u062f \u0622\u0648\u0631\u062f\u0646 \u0686\u0647 \u06a9\u0633\u06cc \u062f\u0631 \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0633\u06cc\u0633\u062a\u0645 \u062d\u0627\u0641\u0638\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isAuthenticated<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsAuthenticated<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">currentUser<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setCurrentUser<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Check if user was previously logged in<\/span>\n  <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">token<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">authToken<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">token<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setIsAuthenticated<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ In a real app, you'd validate this token<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLoginSuccess<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">userData<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setIsAuthenticated<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setCurrentUser<\/span><span class=\"p\">(<\/span><span class=\"nx\">userData<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLogout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">authToken<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setIsAuthenticated<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">setCurrentUser<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\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\">\"app\"<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">isAuthenticated<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Welcome to the Club!<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLogout<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Exit Club \ud83d\udeaa<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\"\/><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">UserDirectory<\/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> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">LoginForm<\/span> <span class=\"na\">onLoginSuccess<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLoginSuccess<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"cm\">\/* Add registration form toggle here *\/<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">)<\/span><span class=\"si\">}<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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><strong>\u062a\u062c\u0632\u06cc\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a:<\/strong><\/p>\n<ul>\n<li>\n<code>isAuthenticated<\/code>  &#8211; \u067e\u0631\u0686\u0645 \u0628\u0648\u0644\u06cc (\u0622\u06cc\u0627 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0628\u0627\u0634\u06af\u0627\u0647 \u0647\u0633\u062a\u0646\u062f \u06cc\u0627 \u0646\u0647\u061f)<\/li>\n<li>\n<code>currentUser<\/code>  &#8211; \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 (\u062f\u0642\u06cc\u0642\u0627\u064b \u0686\u0647 \u06a9\u0633\u06cc \u062f\u0631 \u0628\u0627\u0634\u06af\u0627\u0647 \u0627\u0633\u062a\u061f)<\/li>\n<li>\n<code>localStorage<\/code>  \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f &#8211; \u0627\u0639\u0636\u0627\u06cc \u0628\u0627\u0632\u06af\u0634\u062a \u0631\u0627 \u0628\u0647 \u062e\u0627\u0637\u0631 \u0628\u0633\u067e\u0627\u0631\u06cc\u062f<\/li>\n<li>\u0627\u0631\u0627\u0626\u0647 \u0645\u0634\u0631\u0648\u0637 &#8211; \u0646\u0645\u0627\u06cc\u0634 \u0646\u0638\u0631\u0627\u062a \u0645\u062e\u062a\u0644\u0641 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0636\u0639\u06cc\u062a AUTH<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%B3%DB%8C%D8%AF%DA%AF%DB%8C_%D8%A8%D9%87_%D8%AE%D8%B7%D8%A7_%E2%80%93_%D9%88%D9%82%D8%AA%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A7%D9%86_%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87_%D9%85%DB%8C_%DA%A9%D9%86%D9%86%D8%AF\"><\/span>\n<p>  \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627 &#8211; \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0634\u062a\u0628\u0627\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f &#8211; \u0631\u0645\u0632\u0647\u0627\u06cc \u0639\u0628\u0648\u0631 \u0627\u0634\u062a\u0628\u0627\u0647 \u060c \u0645\u0634\u06a9\u0644\u0627\u062a \u0634\u0628\u06a9\u0647 \u060c \u062c\u0644\u0633\u0627\u062a \u0645\u0646\u0642\u0636\u06cc. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0627 \u0644\u0637\u0641 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">errors<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setErrors<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">({});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">validateForm<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">newErrors<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{};<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">email<\/span><span class=\"p\">.<\/span><span class=\"nf\">includes<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">newErrors<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Please enter a valid email<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">password<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&lt;<\/span> <span class=\"mi\">6<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">newErrors<\/span><span class=\"p\">.<\/span><span class=\"nx\">password<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Password must be at least 6 characters<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setErrors<\/span><span class=\"p\">(<\/span><span class=\"nx\">newErrors<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nf\">keys<\/span><span class=\"p\">(<\/span><span class=\"nx\">newErrors<\/span><span class=\"p\">).<\/span><span class=\"nx\">length<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleSubmit<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nf\">validateForm<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Don't submit if validation fails<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Your API call here...<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ Display errors in your JSX<\/span>\n<span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"error\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">email<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;}<\/span>\n<span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">password<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"error\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">password<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">span<\/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>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\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><strong>\u0641\u0644\u0633\u0641\u0647 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627:<\/strong><\/p>\n<ul>\n<li>\u0627\u0639\u062a\u0628\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 (\u0642\u0628\u0644 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0628\u0647 \u0633\u0631\u0648\u0631)<\/li>\n<li>\u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0631\u0648\u0634\u0646 \u0648 \u0645\u0641\u06cc\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f<\/li>\n<li>\u062e\u0631\u0627\u0628 \u0646\u0634\u0648\u06cc\u062f &#8211; \u0628\u0627 \u0644\u0637\u0641 \u0648 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u0634\u0628\u06a9\u0647<\/li>\n<li>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%B7%D8%AD_%D8%A8%D8%B9%D8%AF%DB%8C_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%88%D8%A7%D9%82%D8%B9%DB%8C_%D9%88_%D9%81%D8%B1%D8%A7%D8%AA%D8%B1_%D8%A7%D8%B2_%D8%A2%D9%86\"><\/span>\n<p>  \u0633\u0637\u062d \u0628\u0639\u062f\u06cc: \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648\u0627\u0642\u0639\u06cc \u0648 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0622\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645! \u0634\u0645\u0627 \u0627\u0635\u0648\u0644 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0631\u0627 \u062a\u0633\u0644\u0637 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062f. \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0641\u0642\u0637 \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0634\u0645\u0627\u0633\u062a. \u0627\u06cc\u0646\u062c\u0627 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0633\u0641\u0631 \u0634\u0645\u0627 \u0627\u062f\u0627\u0645\u0647 \u062f\u0627\u0631\u062f:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"integration_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_Firebase\"><\/span>\n<p>  integration \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a Firebase<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u0631\u062c\u0647 \u062a\u0648\u0644\u06cc\u062f \u0627\u0633\u062a\u061f Firebase \u0645\u0633\u06cc\u0631 \u0627\u0631\u062a\u0642\u0627\u0621 \u0634\u0645\u0627\u0633\u062a:<\/p>\n<ul>\n<li>\n<strong>\u0622\u0646\u0686\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f<\/strong>: \u062d\u0633\u0627\u0628 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648\u0627\u0642\u0639\u06cc \u060c \u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u060c \u0648\u0631\u0648\u062f \u0627\u062c\u062a\u0645\u0627\u0639\u06cc (Google \u060c Facebook)<\/li>\n<li>\n<strong>\u0634\u0631\u0648\u0639<\/strong>: \u0627\u0632 \u06a9\u0646\u0633\u0648\u0644 Firebase \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u06cc\u062f\n<\/li>\n<li>\n<strong>\u0686\u0627\u0644\u0634 \u0628\u0639\u062f\u06cc \u0634\u0645\u0627<\/strong>: Reqres \u0631\u0627 \u0628\u0627 Auth Firebase \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%A4%96_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_AI\"><\/span>\n<p>  \ud83e\udd16 \u0627\u0641\u0632\u0648\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc AI<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u0633\u06cc\u0633\u062a\u0645 AUTH \u0634\u0645\u0627 \u0628\u0627\u0647\u0648\u0634 \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<ul>\n<li>\n<strong>\u062a\u0648\u0635\u06cc\u0647 \u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f\u0627\u0646\u0647<\/strong>: &#8220;\u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f! \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0639\u0627\u0644\u06cc\u062a \u0634\u0645\u0627 &#8230;&#8221;<\/li>\n<li>\n<strong>\u0628\u06cc\u0646\u0634 \u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc<\/strong>: \u062a\u0634\u062e\u06cc\u0635 \u0646\u0627\u0647\u0646\u062c\u0627\u0631\u06cc AI \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/li>\n<li>\n<strong>\u0634\u0631\u0648\u0639<\/strong>: \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0647\u0648\u0634\u0645\u0646\u062f \u060c API Gemini Google \u0631\u0627 \u06a9\u0627\u0648\u0634 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%9B%A1_%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85_%D8%A7%D9%85%D9%86%DB%8C%D8%AA%DB%8C_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87\"><\/span>\n<p>  \ud83d\udee1 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0645\u0646\u06cc\u062a\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0627\u0646\u0634 \u0627\u0645\u0646\u06cc\u062a\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0644\u0627 \u0628\u0628\u0631\u06cc\u062f:<\/p>\n<ul>\n<li>\n<strong>\u0646\u0634\u0627\u0646\u0647 \u0647\u0627\u06cc JWT<\/strong>: \u062f\u0631\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc<\/li>\n<li>\n<strong>\u0646\u0634\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u0627\u0632\u0647<\/strong>: \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u06cc\u0645\u0646<\/li>\n<li>\n<strong>\u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0646\u0642\u0634<\/strong>: \u0645\u062c\u0648\u0632\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u062e\u062a\u0644\u0641<\/li>\n<li>\n<strong>\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062f\u0648 \u0639\u0627\u0645\u0644\u06cc<\/strong>: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0644\u0627\u06cc\u0647 \u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc \u0627\u0636\u0627\u0641\u06cc<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8E%A8_%D8%AA%D8%B9%D8%A7%D9%84%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C\"><\/span>\n<p>  \ud83c\udfa8 \u062a\u0639\u0627\u0644\u06cc \u0637\u0631\u0627\u062d\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062c\u0631\u06cc\u0627\u0646 \u0647\u0627\u06cc \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0632\u06cc\u0628\u0627 \u0648 \u0628\u0635\u0631\u06cc \u0628\u0627\u0634\u062f:<\/p>\n<ul>\n<li>\n<strong>\u062f\u0631\u06cc\u0628\u0644<\/strong>: &#8220;\u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645&#8221; \u06cc\u0627 &#8220;UI \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631&#8221; \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\n<strong>\u0639\u0648\u062f<\/strong>: \u0641\u06cc\u0644\u062a\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 &#8220;ui\/ux&#8221; \u0648 &#8220;login&#8221;<\/li>\n<li>\n<strong>\u0645\u0648\u0627\u062f-\u06cc\u0648\u0648\u06cc \u06cc\u0627 \u062e\u0646\u062c\u0631<\/strong>: \u0627\u062c\u0632\u0627\u06cc \u0641\u0631\u0645 \u0627\u0632 \u067e\u06cc\u0634 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647<\/li>\n<li>\n<strong>\u062a\u0645\u0631\u06a9\u0632 \u0631\u0648\u06cc UX<\/strong>: \u0627\u0646\u062a\u0642\u0627\u0644 \u0635\u0627\u0641 \u060c \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u062e\u0637\u0627\u06cc \u067e\u0627\u06a9 \u060c \u0634\u0627\u062e\u0635 \u0647\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"tips_%D9%86%DA%A9%D8%A7%D8%AA_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D9%85%D8%AD%D9%84%DB%8C_Bamenda_Beyond\"><\/span>\n<p>  tips \u0646\u06a9\u0627\u062a \u062a\u0648\u0633\u0639\u0647 \u0645\u062d\u0644\u06cc (Bamenda &#038; Beyond)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u0645\u062d\u062f\u0648\u062f \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u061f \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647\u06cc\u0646\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\n<strong>\u0637\u0631\u0627\u062d\u06cc \u0622\u0641\u0644\u0627\u06cc\u0646 \u0627\u0648\u0644<\/strong>: \u062d\u0627\u0644\u062a \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062d\u0627\u0641\u0638\u0647 \u067e\u0646\u0647\u0627\u0646<\/li>\n<li>\n<strong>\u067e\u06cc\u0634\u0631\u0641\u062a \u067e\u06cc\u0634\u0631\u0648\u0646\u062f\u0647<\/strong>: \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0633\u0627\u0633\u06cc \u0628\u062f\u0648\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/li>\n<li>\n<strong>\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0647\u0648\u0634\u0645\u0646\u062f<\/strong>: \u0641\u0642\u0637 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0622\u0646\u0686\u0647 \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%A3%D9%85%D9%88%D8%B1%DB%8C%D8%AA_%D8%B4%D9%85%D8%A7_%D8%AF%D8%B1_%D8%A7%D9%86%D8%AA%D8%B8%D8%A7%D8%B1_%D8%A7%D8%B3%D8%AA_%F0%9F%9A%80\"><\/span>\n<p>  \u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u0634\u0645\u0627 \u062f\u0631 \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0633\u062a! \ud83d\ude80<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 DNA \u062a\u0623\u06cc\u06cc\u062f \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u062f\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u062f &#8211; \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0645\u0646. \u0686\u0627\u0644\u0634 \u0634\u0645\u0627:<\/p>\n<p><strong>\u06cc\u06a9 \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc userauth \u062c\u0644\u0627 \u062f\u0647\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f:<\/strong><\/p>\n<ul>\n<li>\u062c\u0631\u06cc\u0627\u0646 \u0648\u0631\u0648\u062f\/\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0635\u0627\u0641<\/li>\n<li>\u0631\u0627\u0628\u0637 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0632\u06cc\u0628\u0627<\/li>\n<li>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627\u06cc \u0642\u0648\u06cc<\/li>\n<li>\u0686\u0634\u0645 \u0627\u0646\u062f\u0627\u0632 \u0637\u0631\u0627\u062d\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0634\u0645\u0627<\/li>\n<\/ul>\n<p>\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u060c \u0647\u0631 \u0628\u0633\u062a\u0631 \u0627\u0635\u0644\u06cc \u0628\u0627 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0633\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u0634\u062f. \u0641\u06cc\u0633 \u0628\u0648\u06a9 \u060c \u062a\u0648\u06cc\u06cc\u062a\u0631 \u060c \u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645 &#8211; \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u0628\u0627 &#8220;\u0622\u06cc\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0648\u0627\u0631\u062f \u0634\u0648\u0646\u062f\u061f&#8221; \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0622\u0646 \u0645\u0647\u0627\u0631\u062a \u0627\u0633\u0627\u0633\u06cc \u062a\u0633\u0644\u0637 \u06cc\u0627\u0641\u062a\u0647 \u0627\u06cc\u062f.<\/p>\n<p>\u0627\u0644\u06af\u0648\u06cc\u06cc \u06a9\u0647 \u0628\u0627 Reqres \u0622\u0645\u0648\u062e\u062a\u0647 \u0627\u06cc\u062f \u060c \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 API \u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u062a\u0631\u062c\u0645\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0645\u0641\u0627\u0647\u06cc\u0645 \u0646\u0634\u0627\u0646\u0647 \u0647\u0627 \u060c \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a \u062c\u0647\u0627\u0646\u06cc \u0627\u0633\u062a. \u0634\u0645\u0627 \u0641\u0642\u0637 \u062f\u0631 \u062d\u0627\u0644 \u0633\u0627\u062e\u062a \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u0646\u06cc\u0633\u062a\u06cc\u062f &#8211; \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u06cc\u0645\u0646 \u0648\u0628 \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%92%A1_%D9%86%DA%A9%D8%A7%D8%AA_%D8%AD%D8%B1%D9%81%D9%87_%D8%A7%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%85%D9%88%D9%81%D9%82%DB%8C%D8%AA\"><\/span>\n<p>  \ud83d\udca1 \u0646\u06a9\u0627\u062a \u062d\u0631\u0641\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0633\u0627\u062f\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u060c \u0633\u067e\u0633 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u0634\u0645\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0647\u0648\u06cc\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u0646\u062f<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D8%B3%D9%88%D9%86%D8%AF\"><\/span>\n<p>  \u0627\u06cc\u062f\u0647 \u0647\u0627\u06cc \u067e\u0633\u0648\u0646\u062f:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\u0648\u06cc\u0631\u0627\u06cc\u0634 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0634\u0627\u062e\u0635 \u0647\u0627\u06cc \u0642\u062f\u0631\u062a \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062f\u0627\u0634\u0628\u0648\u0631\u062f\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0646\u0642\u0634 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u062d\u0627\u0644\u0627 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0686\u06cc\u0632\u06cc \u0627\u0645\u0646 \u0648 \u0632\u06cc\u0628\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f! \u0648\u0628 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0647\u0645 \u0637\u0631\u0641\u0647\u0627\u06cc \u0641\u0646\u06cc \u0648 \u0647\u0645 \u0627\u0632 \u062a\u062c\u0631\u0628\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u0631\u0627 \u062f\u0631\u06a9 \u0645\u06cc \u06a9\u0646\u0646\u062f. \ud83d\udd10\u2728<\/p>\n<hr\/>\n<p><em>\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9 \u060c \u0645\u062a\u062e\u0635\u0635 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0622\u06cc\u0646\u062f\u0647! \ud83d\udee1<\/em><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0622\u0645\u0627\u062f\u0647 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0627\u0633\u0631\u0627\u0631 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0639\u062a\u0628\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0647\u0633\u062a\u06cc\u062f\u061f \u0627\u0645\u0631\u0648\u0632 \u060c \u0634\u0645\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a\u0646 \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc Userauth \u06a9\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u060c \u0648\u0627\u0631\u062f \u062f\u0646\u06cc\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0645\u0646 \u0645\u06cc \u0634\u0648\u06cc\u062f. \u0627\u06cc\u0646 \u0641\u0642\u0637 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0641\u0631\u0645 \u0647\u0627 \u0646\u06cc\u0633\u062a &#8211; \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u0647\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":111385,"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%2Fubs6h91qt26ubxmpcesh.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-111384","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\/111384","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=111384"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/111384\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/111385"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=111384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=111384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=111384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}