{"id":18105,"date":"2026-05-24T10:50:35","date_gmt":"2026-05-24T07:20:35","guid":{"rendered":"https:\/\/fegabin.com\/?p=18105"},"modified":"2026-05-24T10:50:41","modified_gmt":"2026-05-24T07:20:41","slug":"react-tutorial-guide-2026","status":"publish","type":"post","link":"https:\/\/fegabin.com\/fa\/react-tutorial-guide-2026\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a (React) \u2013 \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0628\u0627 \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u062a\u0631\u06cc\u0646 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f"},"content":{"rendered":"\n

\u0622\u06cc\u0627 \u0645\u06cc\u200c\u062f\u0627\u0646\u0633\u062a\u06cc\u062f \u06a9\u0647 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong> (React) \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u062c\u0633\u062a\u062c\u0648\u062a\u0631\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u062f\u0631 \u062d\u0648\u0632\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0627\u0633\u062a\u061f \u0637\u0628\u0642 \u0622\u0645\u0627\u0631 \u0633\u0627\u06cc\u062a Stack Overflow<\/strong>\u060c \u0631\u06cc \u0627\u06a9\u062a \u0628\u0631\u0627\u06cc \u0634\u0634\u0645\u06cc\u0646 \u0633\u0627\u0644 \u0645\u062a\u0648\u0627\u0644\u06cc \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062d\u0628\u0648\u0628\u200c\u062a\u0631\u06cc\u0646 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0644\u06cc\u0644 \u0627\u0635\u0644\u06cc<\/strong>\u060c \u0633\u0627\u062f\u06af\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\u060c \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u0627\u0644\u0627 \u0648 \u0642\u062f\u0631\u062a \u062f\u0631 \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc (SPA)<\/strong> \u0627\u0633\u062a.<\/p>\n\n\n\n

\u0631\u06cc \u0627\u06a9\u062a (React.js) \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0627\u06cc \u0645\u062a\u0646\u200c\u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0641\u06cc\u0633\u0628\u0648\u06a9 \u062a\u0648\u0633\u0639\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0648 \u0627\u0645\u0631\u0648\u0632\u0647 \u0634\u0631\u06a9\u062a\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u062a\u0641\u0644\u06cc\u06a9\u0633\u060c \u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645\u060c Airbnb \u0648 \u0627\u067e\u0644<\/strong> \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646<\/strong>\u060c \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong> \u0627\u0632 \u0635\u0641\u0631 \u062a\u0627 \u0635\u062f \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u0634\u0648\u06cc\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646<\/strong>\u060c \u0645\u0628\u0627\u0646\u06cc \u067e\u0627\u06cc\u0647\u060c \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0648 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc<\/strong> \u0631\u0627 \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a.<\/p>\n\n\n\n

\u0627\u06af\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0633\u062a\u06cc\u062f \u0648 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u0627\u0631\u062f \u062f\u0646\u06cc\u0627\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0634\u0648\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n\n\n\n

\u0631\u06cc \u0627\u06a9\u062a \u0686\u06cc\u0633\u062a \u0648 \u0686\u0631\u0627 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u0645\u061f<\/h2>\n\n\n\n

\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u0627\u0648\u0644 \u0627\u0632 \u0647\u0645\u0647<\/strong> \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0686\u06cc\u0633\u062a \u0648 \u0686\u0647 \u0645\u0632\u0627\u06cc\u0627\u06cc\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9\u200c\u0647\u0627 \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n

\u0631\u06cc \u0627\u06a9\u062a \u0686\u06cc\u0633\u062a\u061f<\/h3>\n\n\n\n

\u0631\u06cc \u0627\u06a9\u062a (React) \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647<\/strong> \u062a\u0648\u0633\u0637 \u0645\u0647\u0646\u062f\u0633 \u0641\u06cc\u0633\u0628\u0648\u06a9 \u0628\u0647 \u0646\u0627\u0645 \u062c\u0631\u062f\u0646 \u0648\u0627\u06a9\u0647<\/strong> \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f1\u06f3 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062a\u0646\u200c\u0628\u0627\u0632 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f. \u0628\u0631\u062e\u0644\u0627\u0641 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0645\u0627\u0646\u0646\u062f Angular<\/strong>\u060c \u0631\u06cc \u0627\u06a9\u062a \u0641\u0642\u0637 \u0645\u0633\u0626\u0648\u0644 \u0644\u0627\u06cc\u0647 View (\u0646\u0645\u0627\u06cc\u0634) \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a \u0648 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0646\u0628\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n

\u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0631\u06cc \u0627\u06a9\u062a:<\/strong><\/p>\n\n\n\n

    \n
  • \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a:<\/strong> \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647 \u0642\u0637\u0639\u0627\u062a \u06a9\u0648\u0686\u06a9 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f<\/li>\n\n\n\n
  • Virtual DOM:<\/strong> \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0633\u0631\u06cc\u0639 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0635\u0641\u062d\u0647 \u0628\u062f\u0648\u0646 \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u06a9\u0644 \u0635\u0641\u062d\u0647<\/li>\n\n\n\n
  • \u06cc\u06a9\u0637\u0631\u0641\u0647 \u0628\u0648\u062f\u0646 \u062c\u0631\u06cc\u0627\u0646 \u062f\u0627\u062f\u0647:<\/strong> \u062f\u06cc\u0628\u0627\u06af \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u06a9\u062f<\/li>\n\n\n\n
  • \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0647\u0648\u06a9\u200c\u0647\u0627 (Hooks):<\/strong> \u0645\u062f\u06cc\u0631\u06cc\u062a state \u0648 lifecycle \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc<\/li>\n\n\n\n
  • \u062c\u0627\u0645\u0639\u0647 \u0628\u0632\u0631\u06af \u0648 \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u063a\u0646\u06cc:<\/strong> \u0647\u0632\u0627\u0631\u0627\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0648 \u0627\u0628\u0632\u0627\u0631 \u06a9\u0645\u06a9\u06cc<\/li>\n<\/ul>\n\n\n\n

    \u0686\u0631\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0645\u062d\u0628\u0648\u0628\u200c\u062a\u0631\u06cc\u0646 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0627\u0633\u062a\u061f<\/h3>\n\n\n\n

    \u0637\u0628\u0642 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f5 Stack Overflow\u060c \u06f4\u06f2 \u062f\u0631\u0635\u062f<\/strong> \u0627\u0632 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0627\u0632 \u0631\u06cc \u0627\u06a9\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u062f\u0644\u0627\u06cc\u0644 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0645\u062d\u0628\u0648\u0628\u06cc\u062a \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<\/strong><\/p>\n\n\n\n

    \u06f1. \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0622\u0633\u0627\u0646 \u0648 \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0644\u0627\u06cc\u0645<\/strong><\/p>\n\n\n\n

    \u0627\u06af\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0634\u0646\u0627\u06cc\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0638\u0631\u0641 \u0686\u0646\u062f \u0647\u0641\u062a\u0647 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong> \u0628\u0647 \u0633\u0637\u062d \u062e\u0648\u0628\u06cc \u0628\u0631\u0633\u06cc\u062f. \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 Angular<\/strong> \u06a9\u0647 \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631\u06cc \u0645\u0627\u0646\u0646\u062f TypeScript \u0648 RxJS \u062f\u0627\u0631\u062f\u060c \u0631\u06cc \u0627\u06a9\u062a \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0627\u0633\u062a.<\/p>\n\n\n\n

    \u06f2. \u062a\u0642\u0627\u0636\u0627\u06cc \u0628\u0627\u0644\u0627\u06cc \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631<\/strong><\/p>\n\n\n\n

    \u0628\u0631 \u0627\u0633\u0627\u0633 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0633\u0627\u06cc\u062a Indeed<\/strong>\u060c \u062d\u0642\u0648\u0642 \u0645\u062a\u0648\u0633\u0637 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0631\u06cc \u0627\u06a9\u062a \u062f\u0631 \u0622\u0645\u0631\u06cc\u06a9\u0627 \u062d\u062f\u0648\u062f \u06f1\u06f2\u06f0,\u06f0\u06f0\u06f0 \u062f\u0644\u0627\u0631<\/strong> \u062f\u0631 \u0633\u0627\u0644 \u0627\u0633\u062a. \u0647\u0645\u0686\u0646\u06cc\u0646<\/strong>\u060c \u0622\u06af\u0647\u06cc\u200c\u0647\u0627\u06cc \u0634\u063a\u0644\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0646\u0633\u0628\u062a \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9\u200c\u0647\u0627 \u0628\u06cc\u0634\u062a\u0631 \u0627\u0633\u062a.<\/p>\n\n\n\n

    \u06f3. \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0642\u0648\u06cc \u0627\u0632 \u0633\u0626\u0648 \u0648 SSR<\/strong><\/p>\n\n\n\n

    \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 Next.js<\/strong> (\u06a9\u0647 \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0631\u06cc \u0627\u06a9\u062a \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647)\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0633\u0626\u0648 \u062f\u0648\u0633\u062a<\/strong> \u0648 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n\n\n\n

    \u06f4. \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u0642\u062f\u0631\u062a\u0645\u0646\u062f<\/strong><\/p>\n\n\n\n

    \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Redux<\/strong> (\u0645\u062f\u06cc\u0631\u06cc\u062a state)\u060c React Router<\/strong> (\u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0633\u06cc\u0631\u0647\u0627)\u060c Next.js<\/strong> (\u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u06a9\u0627\u0645\u0644) \u0648 Vite<\/strong> (\u0627\u0628\u0632\u0627\u0631 \u0633\u0627\u062e\u062a \u0633\u0631\u06cc\u0639) \u0627\u06a9\u0648\u0633\u06cc\u0633\u062a\u0645 \u0631\u06cc \u0627\u06a9\u062a \u0631\u0627 \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f.<\/p>\n\n\n\n

    \u0645\u0642\u0627\u06cc\u0633\u0647 \u0631\u06cc \u0627\u06a9\u062a \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9\u200c\u0647\u0627<\/h3>\n\n\n\n
    \u0648\u06cc\u0698\u06af\u06cc<\/th>React<\/th>Vue<\/th>Angular<\/th><\/tr><\/thead>
    \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc<\/td>\u0622\u0633\u0627\u0646<\/td>\u0622\u0633\u0627\u0646<\/td>\u062f\u0634\u0648\u0627\u0631<\/td><\/tr>
    \u0639\u0645\u0644\u06a9\u0631\u062f<\/td>\u0639\u0627\u0644\u06cc<\/td>\u0639\u0627\u0644\u06cc<\/td>\u062e\u0648\u0628<\/td><\/tr>
    \u0645\u062d\u0628\u0648\u0628\u06cc\u062a<\/td>\u0628\u0633\u06cc\u0627\u0631 \u0628\u0627\u0644\u0627<\/td>\u0628\u0627\u0644\u0627<\/td>\u0645\u062a\u0648\u0633\u0637<\/td><\/tr>
    \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631<\/td>\u0639\u0627\u0644\u06cc<\/td>\u062e\u0648\u0628<\/td>\u0645\u062a\u0648\u0633\u0637<\/td><\/tr>
    \u0627\u0646\u062f\u0627\u0632\u0647<\/td>\u06a9\u0648\u0686\u06a9 (\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647)<\/td>\u06a9\u0648\u0686\u06a9<\/td>\u0628\u0632\u0631\u06af (\u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u06a9\u0627\u0645\u0644)<\/td><\/tr>
    \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0634\u0631\u06a9\u062a\u06cc<\/td>\u0641\u06cc\u0633\u0628\u0648\u06a9<\/td>Evan You<\/td>\u06af\u0648\u06af\u0644<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n

    \u0646\u06a9\u062a\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646:<\/strong> \u0627\u06af\u0631 \u062a\u0627\u0632\u0647 \u0648\u0627\u0631\u062f \u062f\u0646\u06cc\u0627\u06cc \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9\u200c\u0647\u0627\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0634\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong> \u0628\u0647\u062a\u0631\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0627\u0633\u062a\u060c \u0632\u06cc\u0631\u0627<\/strong> \u0647\u0645 \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631 \u062e\u0648\u0628\u06cc \u062f\u0627\u0631\u062f \u0648 \u0647\u0645 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0622\u0646 \u0646\u0633\u0628\u062a\u0627\u064b \u0622\u0633\u0627\u0646 \u0627\u0633\u062a.<\/p>\n<\/blockquote>\n\n\n\n

    \u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a\u061b \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0686\u0647 \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0628\u0627\u06cc\u062f \u0628\u062f\u0627\u0646\u06cc\u062f\u061f<\/h2>\n\n\n\n

    \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u0628\u0627\u06cc\u062f \u0628\u0627 \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0634\u0646\u0627 \u0628\u0627\u0634\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634<\/strong>\u060c \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0645\u0644 \u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627 \u0631\u0627 \u0645\u0631\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n

    \u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n

    \u0627\u06af\u0631 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0622\u0634\u0646\u0627 \u0646\u06cc\u0633\u062a\u06cc\u062f\u060c \u0627\u0628\u062a\u062f\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f:<\/strong><\/p>\n\n\n\n

    \u06f1. \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0648 \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647 (Variables & Data Types)<\/strong><\/p>\n\n\n\n

      \n
    • let<\/code>\u060c const<\/code> \u0648 var<\/code><\/li>\n\n\n\n
    • \u062a\u0641\u0627\u0648\u062a \u0628\u06cc\u0646 var<\/code> \u0648 let\/const<\/code><\/li>\n\n\n\n
    • \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647: string\u060c number\u060c boolean\u060c object\u060c array<\/li>\n<\/ul>\n\n\n\n

      \u06f2. \u062a\u0648\u0627\u0628\u0639 (Functions)<\/strong><\/p>\n\n\n\n

        \n
      • \u062a\u0648\u0627\u0628\u0639 \u0639\u0627\u062f\u06cc vs \u062a\u0648\u0627\u0628\u0639 \u067e\u06cc\u06a9\u0627\u0646\u06cc (Arrow functions)<\/li>\n\n\n\n
      • \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0648 return<\/li>\n\n\n\n
      • \u062a\u0648\u0627\u0628\u0639 \u062f\u0631\u062c\u0647 \u0627\u0648\u0644 (First-class functions)<\/li>\n<\/ul>\n\n\n\n

        \u06f3. \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0645\u062a\u062f\u0647\u0627\u06cc \u0622\u0646 (Arrays & Methods)<\/strong><\/p>\n\n\n\n

          \n
        • map()<\/code>\u060c filter()<\/code>\u060c reduce()<\/code> \u2013 \u0627\u06cc\u0646 \u0633\u0647 \u0645\u062a\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0647\u0633\u062a\u0646\u062f<\/strong><\/li>\n\n\n\n
        • forEach()<\/code>\u060c find()<\/code>\u060c some()<\/code>\u060c every()<\/code><\/li>\n<\/ul>\n\n\n\n

          \u06f4. \u0634\u06cc\u0621\u0647\u0627 (Objects)<\/strong><\/p>\n\n\n\n

            \n
          • \u0627\u06cc\u062c\u0627\u062f \u0648 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627<\/li>\n\n\n\n
          • Destructuring (\u062a\u062e\u0631\u06cc\u0628 \u0634\u06cc\u0621)<\/li>\n\n\n\n
          • Spread operator (...<\/code>)<\/li>\n<\/ul>\n\n\n\n

            \u06f5. \u0645\u062a\u062f\u0647\u0627\u06cc \u0631\u0634\u062a\u0647\u200c\u0647\u0627 (String Methods)<\/strong><\/p>\n\n\n\n

              \n
            • template literals<\/code> (\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 backticks \u0648 ${}<\/code>)<\/li>\n<\/ul>\n\n\n\n

              \u06f6. \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627 (Modules)<\/strong><\/p>\n\n\n\n

                \n
              • import<\/code> \u0648 export<\/code> \u2013 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a<\/strong><\/li>\n<\/ul>\n\n\n\n

                \u06f7. Promise \u0648 Async\/Await<\/strong><\/p>\n\n\n\n

                  \n
                • \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc API \u0648 \u06a9\u0627\u0631 \u0628\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631\u0647\u0645\u0632\u0645\u0627\u0646<\/li>\n<\/ul>\n\n\n\n

                  \u0646\u0635\u0628 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632<\/h3>\n\n\n\n

                  \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n\n\n\n

                  \u0627\u0628\u0632\u0627\u0631<\/th>\u062a\u0648\u0636\u06cc\u062d<\/th>\u0644\u06cc\u0646\u06a9 \u062f\u0627\u0646\u0644\u0648\u062f<\/th><\/tr><\/thead>
                  Node.js<\/strong><\/td>\u0645\u062d\u06cc\u0637 \u0627\u062c\u0631\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0645\u062a \u0633\u0631\u0648\u0631<\/td>nodejs.org<\/td><\/tr>
                  npm \u06cc\u0627 yarn<\/strong><\/td>\u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627 (\u0628\u0647 \u0647\u0645\u0631\u0627\u0647 Node.js \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f)<\/td>\u2013<\/td><\/tr>
                  VS Code<\/strong><\/td>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u0628\u0631\u0627\u06cc \u0631\u06cc \u0627\u06a9\u062a<\/td>code.visualstudio.com<\/td><\/tr>
                  Git<\/strong><\/td>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0633\u062e\u0647 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0645\u0627 \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f)<\/td>git-scm.com<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

                  \u0628\u0631\u0631\u0633\u06cc \u0646\u0635\u0628 \u0635\u062d\u06cc\u062d Node.js \u0648 npm<\/h3>\n\n\n\n

                  \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0646\u0635\u0628 \u0635\u062d\u06cc\u062d<\/strong>\u060c \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 (Command Prompt) \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n

                  node --version\nnpm --version<\/pre>\n\n\n\n
                  \u0627\u06af\u0631 \u062e\u0631\u0648\u062c\u06cc <\/strong>\u0645\u0634\u0627\u0628\u0647 \u0632\u06cc\u0631 \u062f\u06cc\u062f\u06cc\u062f\u060c \u0646\u0635\u0628 \u0634\u0645\u0627 \u0635\u062d\u06cc\u062d \u0627\u0633\u062a:<\/p>\n\n\n\n
                  v20.10.0\n10.2.3<\/pre>\n\n\n\n
                  \u0627\u06cc\u062c\u0627\u062f \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u06cc \u0627\u06a9\u062a \u0628\u0627 Vite<\/h3>\n\n\n\n
                  \u0642\u062f\u06cc\u0645\u0627<\/strong>\u00a0\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u0631\u06cc \u0627\u06a9\u062a \u0627\u0632\u00a0create-react-app<\/code>\u00a0\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u062f.\u00a0\u0627\u0645\u0627<\/strong>\u00a0\u0627\u0645\u0631\u0648\u0632\u0647 \u0627\u0628\u0632\u0627\u0631\u00a0Vite<\/strong>\u00a0\u0628\u0633\u06cc\u0627\u0631 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0648 \u0633\u0628\u06a9\u200c\u062a\u0631 \u0627\u0633\u062a.\u00a0\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639<\/strong>\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                  npm create vite@latest my-first-react-app -- --template react\ncd my-first-react-app\nnpm install\nnpm run dev<\/pre>\n\n\n\n
                  \u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627<\/strong>\u060c \u0622\u062f\u0631\u0633 http:\/\/localhost:5173<\/code> \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc\u200c\u06af\u0648\u06cc\u0645!<\/strong> \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u06cc \u0627\u06a9\u062a \u0634\u0645\u0627 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n
                  \n
                  \n
                  \u0646\u06a9\u062a\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646:<\/strong> \u0627\u06af\u0631 \u0628\u0627 \u062e\u0637\u0627\u06cc command not found<\/code> \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u06cc\u062f\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f Node.js \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0647\u0645\u0686\u0646\u06cc\u0646<\/strong>\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc LTS (\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0637\u0648\u0644\u0627\u0646\u06cc \u0645\u062f\u062a) Node.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n
                  \u0645\u0641\u0627\u0647\u06cc\u0645 \u067e\u0627\u06cc\u0647 \u062f\u0631 \u0631\u06cc \u0627\u06a9\u062a\u061b JSX \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/h2>\n\n\n\n
                  \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u0628\u0627 \u062f\u0648 \u0645\u0641\u0647\u0648\u0645 \u0628\u0646\u06cc\u0627\u062f\u06cc\u0646 \u06cc\u0639\u0646\u06cc JSX<\/strong> \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/strong> \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u0634\u0648\u06cc\u062f.<\/p>\n\n\n\n
                  JSX \u0686\u06cc\u0633\u062a\u061f<\/h3>\n\n\n\n
                  JSX \u0645\u062e\u0641\u0641 JavaScript XML<\/strong> \u0627\u0633\u062a \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u062f \u0634\u0628\u06cc\u0647 \u0628\u0647 HTML \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f. \u0628\u0631\u062e\u0644\u0627\u0641 HTML \u0648\u0627\u0642\u0639\u06cc<\/strong>\u060c JSX \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Babel \u0628\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0644\u0635 \u062a\u0628\u062f\u06cc\u0644 \u06af\u0631\u062f\u062f.<\/p>\n\n\n\n
                  \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647 JSX:<\/strong><\/p>\n\n\n\n
                  const element = <h1>\u0633\u0644\u0627\u0645\u060c \u062f\u0646\u06cc\u0627\u06cc \u0631\u06cc \u0627\u06a9\u062a!<\/h1>;<\/pre>\n\n\n\n
                  \u0642\u0648\u0627\u0646\u06cc\u0646 \u0645\u0647\u0645 JSX:<\/strong><\/p>\n\n\n\n
                  \u06f1. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 className \u0628\u0647 \u062c\u0627\u06cc class<\/strong><\/p>\n\n\n\n
                  \u062f\u0631 HTML \u0627\u0632\u00a0class<\/code>\u00a0\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c\u00a0\u0627\u0645\u0627<\/strong>\u00a0\u062f\u0631 JSX \u0628\u0627\u06cc\u062f \u0627\u0632\u00a0className<\/code>\u00a0\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
                  \/\/ \u062f\u0631\u0633\u062a\n<div className=\"container\">\u0645\u062d\u062a\u0648\u0627<\/div>\n\n\/\/ \u063a\u0644\u0637\n<div class=\"container\">\u0645\u062d\u062a\u0648\u0627<\/div><\/pre>\n\n\n\n
                  \u06f2. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 {} \u0628\u0631\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong><\/p>\n\n\n\n
                  \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0627\u062e\u0644 JSX\u060c \u0627\u0632 {}<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                  const name = \"\u0639\u0644\u06cc\";\nconst element = <h1>\u0633\u0644\u0627\u0645 {name}!<\/h1>;<\/pre>\n\n\n\n
                  \u06f3. \u0628\u0633\u062a\u0647 \u0634\u062f\u0646 \u062a\u06af\u200c\u0647\u0627<\/strong><\/p>\n\n\n\n
                  \u0647\u0645\u0647 \u062a\u06af\u200c\u0647\u0627 \u0628\u0627\u06cc\u062f \u0628\u0633\u062a\u0647 \u0634\u0648\u0646\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644<\/strong>\u060c \u062a\u06af <br><\/code> \u062f\u0631 JSX \u0628\u0647 \u0635\u0648\u0631\u062a <br \/><\/code> \u0646\u0648\u0634\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n
                  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 \u0631\u06cc \u0627\u06a9\u062a \u0686\u06cc\u0633\u062a\u061f<\/h2>\n\n\n\n
                  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0644\u0648\u06a9\u200c\u0647\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062f\u0631 \u0631\u06cc \u0627\u06a9\u062a \u0647\u0633\u062a\u0646\u062f. \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/strong> \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u0645\u0633\u062a\u0642\u0644 \u0648 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0633\u062a \u06a9\u0647 \u0638\u0627\u0647\u0631 \u0648 \u0631\u0641\u062a\u0627\u0631 \u062e\u0627\u0635 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u062f.<\/p>\n\n\n\n
                  \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 \u0631\u06cc \u0627\u06a9\u062a:<\/strong><\/p>\n\n\n\n
                  \u0646\u0648\u0639<\/th>\u062a\u0648\u0636\u06cc\u062d<\/th>\u0645\u062b\u0627\u0644<\/th><\/tr><\/thead>
                  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639\u06cc<\/strong><\/td>\u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0648 \u0645\u062f\u0631\u0646\u200c\u062a\u0631\u060c \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062a\u0627\u0628\u0639<\/td>function Welcome() { return <h1>Hello<\/h1>; }<\/code><\/td><\/tr>
                  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u0627\u0633\u06cc<\/strong><\/td>\u0642\u062f\u06cc\u0645\u06cc\u200c\u062a\u0631\u060c \u062f\u0627\u0631\u0627\u06cc \u0645\u062a\u062f lifecycle<\/td>class Welcome extends React.Component { ... }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                  \n
                  \u062a\u0648\u0635\u06cc\u0647:<\/strong>\u00a0\u062f\u0631\u00a0\u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u00a0\u0627\u0645\u0631\u0648\u0632\u06cc\u060c \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0648 \u0647\u0648\u06a9\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.\u00a0\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646<\/strong>\u060c \u0645\u0627 \u0646\u06cc\u0632 \u0631\u0648\u06cc \u0647\u0645\u06cc\u0646 \u0631\u0648\u0634 \u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<\/blockquote>\n\n\n\n
                  \u00a0\u0633\u0627\u062e\u062a \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u06cc \u0627\u06a9\u062a<\/h3>\n\n\n\n
                  \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 Welcome.jsx<\/code> \u062f\u0631 \u067e\u0648\u0634\u0647 src<\/code> \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                  function Welcome() {\n  return <h1>\u0628\u0647 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f!<\/h1>;\n}\n\nexport default Welcome;<\/pre>\n\n\n\n
                  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 App.jsx<\/h3>\n\n\n\n
                  \u0641\u0627\u06cc\u0644 App.jsx<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Welcome<\/code> \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                  import Welcome from '.\/Welcome';\n\nfunction App() {\n  return (\n    <div>\n      <Welcome \/>\n      <Welcome \/>\n      <Welcome \/>\n    <\/div>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
                  \u062e\u0631\u0648\u062c\u06cc:<\/strong> \u0639\u0628\u0627\u0631\u062a \u00ab\u0628\u0647 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f!\u00bb \u0633\u0647 \u0628\u0627\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n
                  \u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u2013 Props (\u062e\u0635\u0648\u0635\u06cc\u0627\u062a) <\/h3>\n\n\n\n
                  Props \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0648\u0627\u0644\u062f \u0628\u0647 \u0641\u0631\u0632\u0646\u062f \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644<\/strong>:<\/p>\n\n\n\n
                  \/\/ \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Welcome \u0628\u0627 props\nfunction Welcome(props) {\n  return <h1>\u0633\u0644\u0627\u0645 {props.name}!<\/h1>;\n}\n\n\/\/ \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 App\nfunction App() {\n  return (\n    <div>\n      <Welcome name=\"\u0639\u0644\u06cc\" \/>\n      <Welcome name=\"\u0645\u0631\u06cc\u0645\" \/>\n      <Welcome name=\"\u0631\u0636\u0627\" \/>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
                  \n
                  \u0646\u06a9\u062a\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646:<\/strong> Props \u0641\u0642\u0637 \u062e\u0648\u0627\u0646\u062f\u0646\u06cc (Read-only) \u0647\u0633\u062a\u0646\u062f. \u0628\u0647 \u0639\u0628\u0627\u0631\u062a \u062f\u06cc\u06af\u0631<\/strong>\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f props \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f.<\/p>\n<\/blockquote>\n\n\n\n
                  \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647 \u062f\u0631 \u0631\u06cc \u0627\u06a9\u062a\u061b \u0642\u0644\u0628 \u062a\u067e\u0646\u062f\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 State<\/h2>\n\n\n\n
                  \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u0628\u0627 \u0645\u0641\u0647\u0648\u0645 State<\/strong> (\u0648\u0636\u0639\u06cc\u062a) \u0648 \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u0634\u0648\u06cc\u062f.<\/p>\n\n\n\n
                  \u062a\u0641\u0627\u0648\u062a State \u0648 Props<\/h3>\n\n\n\n
                  \u0648\u06cc\u0698\u06af\u06cc<\/th>Props<\/th>State<\/th><\/tr><\/thead>
                  \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u063a\u06cc\u06cc\u0631<\/strong><\/td>\u0641\u0642\u0637 \u062e\u0648\u0627\u0646\u062f\u0646\u06cc (Read-only)<\/td>\u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 (Mutable)<\/td><\/tr>
                  \u0645\u0627\u0644\u06a9\u06cc\u062a<\/strong><\/td>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f<\/td>\u062e\u0648\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/td><\/tr>
                  \u06a9\u0627\u0631\u0628\u0631\u062f<\/strong><\/td>\u0627\u0631\u0633\u0627\u0644 \u062f\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u0644\u062f \u0628\u0647 \u0641\u0631\u0632\u0646\u062f<\/td>\u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f<\/td><\/tr>
                  \u0645\u0646\u0628\u0639 \u062f\u0627\u062f\u0647<\/strong><\/td>\u0627\u0632 \u0628\u06cc\u0631\u0648\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u0634\u0648\u062f<\/td>\u062f\u0631\u0648\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                  \u0647\u0648\u06a9 useState\u061b \u0645\u062f\u06cc\u0631\u06cc\u062a state \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc<\/h3>\n\n\n\n
                  \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 state \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc\u060c \u0627\u0632 \u0647\u0648\u06a9 useState<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0647\u0648\u06a9<\/strong> \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062f\u0648 \u0639\u0636\u0648\u06cc \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f: \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc state \u0648 \u062a\u0627\u0628\u0639 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0622\u0646.<\/p>\n\n\n\n
                  \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useState:<\/strong><\/p>\n\n\n\n
                  import { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0); \/\/ \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 0\n\n  return (\n    <div>\n      <p>\u0634\u0645\u0627\u0631\u0634: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>\n        \u0627\u0641\u0632\u0627\u06cc\u0634\n      <\/button>\n    <\/div>\n  );\n<\/pre>\n\n\n\n
                  \u0646\u06a9\u0627\u062a \u0645\u0647\u0645 \u062f\u0631\u0628\u0627\u0631\u0647 useState:<\/strong><\/p>\n\n\n\n
                    \n
                  • \u0627\u0648\u0644\u0627\u064b<\/strong>\u060c \u0647\u0648\u06a9\u200c\u0647\u0627 \u0641\u0642\u0637 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0633\u062a\u0646\u062f (\u0646\u0647 \u062f\u0627\u062e\u0644 \u062d\u0644\u0642\u0647\u200c\u0647\u0627 \u06cc\u0627 \u0634\u0631\u0637\u200c\u0647\u0627)<\/li>\n\n\n\n
                  • \u062b\u0627\u0646\u06cc\u0627\u064b<\/strong>\u060c \u062a\u0627\u0628\u0639\u00a0setCount<\/code>\u00a0\u0628\u0627\u0639\u062b \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u06cc\u200c\u0634\u0648\u062f<\/li>\n\n\n\n
                  • \u062b\u0627\u0644\u062b\u0627\u064b<\/strong>\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0631 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u0631\u0627 \u062f\u0631 state \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f (\u0639\u062f\u062f\u060c \u0631\u0634\u062a\u0647\u060c \u0622\u0631\u0627\u06cc\u0647\u060c \u0634\u06cc\u0621)<\/li>\n<\/ul>\n\n\n\n
                    \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc state \u0645\u062f\u06cc\u0631\u06cc\u062a<\/h3>\n\n\n\n
                    \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627<\/strong>\u060c \u0628\u0627\u06cc\u062f \u0647\u0645\u06cc\u0634\u0647 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b state \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u062f\u0647\u06cc\u062f:<\/p>\n\n\n\n
                    function TodoList() {\n  const [todos, setTodos] = useState(['\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0631\u06cc \u0627\u06a9\u062a', '\u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647']);\n\n  const addTodo = () => {\n    setTodos([...todos, '\u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f']); \/\/ spread operator \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0622\u06cc\u062a\u0645 \u062c\u062f\u06cc\u062f\n  };\n\n  const removeTodo = (index) => {\n    const newTodos = [...todos];\n    newTodos.splice(index, 1);\n    setTodos(newTodos);\n  };\n\n  return (\n    <ul>\n      {todos.map((todo, index) => (\n        <li key={index}>\n          {todo}\n          <button onClick={() => removeTodo(index)}>\u062d\u0630\u0641<\/button>\n        <\/li>\n      ))}\n      <button onClick={addTodo}>\u0627\u0641\u0632\u0648\u062f\u0646 \u06a9\u0627\u0631<\/button>\n    <\/ul>\n  );\n}<\/pre>\n\n\n\n
                    <\/pre>\n\n\n\n
                    \u0645\u062f\u06cc\u0631\u06cc\u062a state \u0634\u06cc\u0621<\/h3>\n\n\n\n
                    \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 \u0634\u06cc\u0621\u0647\u0627<\/strong>\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 spread operator \u0628\u0631\u0627\u06cc \u062d\u0641\u0638 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0642\u0628\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                    function UserProfile() {\n  const [user, setUser] = useState({ name: '', age: 0, email: '' });\n\n  const updateName = (newName) => {\n    setUser({ ...user, name: newName }); \/\/ \u0641\u0642\u0637 name \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\n  };\n\n  return (\n    <div>\n      <p>\u0646\u0627\u0645: {user.name}<\/p>\n      <p>\u0633\u0646: {user.age}<\/p>\n      <p>\u0627\u06cc\u0645\u06cc\u0644: {user.email}<\/p>\n      <button onClick={() => updateName('\u0639\u0644\u06cc')}>\u062a\u063a\u06cc\u06cc\u0631 \u0646\u0627\u0645<\/button>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
                      <\/p>\n\n\n\n
                    \u0642\u0627\u0646\u0648\u0646 \u0637\u0644\u0627\u06cc\u06cc \u062f\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06ccstate<\/h2>\n\n\n\n
                    \u0647\u0631\u06af\u0632 state \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062a\u063a\u06cc\u06cc\u0631 \u0646\u062f\u0647\u06cc\u062f:<\/strong><\/p>\n\n\n\n
                    \/\/ \u274c \u0627\u0634\u062a\u0628\u0627\u0647 \u2013 \u0628\u0627\u0639\u062b \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\ncount = count + 1;\n\n\/\/ \u2705 \u062f\u0631\u0633\u062a\nsetCount(count + 1);<\/pre>\n\n\n\n
                    \u0628\u0631\u0627\u06cc \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0627\u0634\u06cc\u0627\u0621 \u0646\u06cc\u0632 \u0647\u0645\u06cc\u0646 \u0642\u0627\u0646\u0648\u0646 \u0635\u062f\u0642 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/strong><\/p>\n\n\n\n
                    \/\/ \u274c \u0627\u0634\u062a\u0628\u0627\u0647\ntodos.push('\u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f');\nsetTodos(todos);\n\n\/\/ \u2705 \u062f\u0631\u0633\u062a\nsetTodos([...todos, '\u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f']);<\/pre>\n\n\n\n
                    \n
                    \u0646\u06a9\u062a\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646:<\/strong> \u062f\u0631 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u062a\u0633\u0644\u0637 \u0628\u0631 \u0645\u0641\u0627\u0647\u06cc\u0645 state \u0648 props \u0628\u0633\u06cc\u0627\u0631 \u062d\u06cc\u0627\u062a\u06cc \u0627\u0633\u062a. \u062a\u0642\u0631\u06cc\u0628\u0627\u064b<\/strong> \u0647\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u06cc \u0627\u06a9\u062a\u06cc \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a state \u062f\u0627\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646<\/strong> \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u062e\u0648\u0628 \u062a\u0645\u0631\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/blockquote>\n\n\n\n
                    \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc (SPA) \u0628\u0627 React Router<\/h2>\n\n\n\n
                    \u06cc\u06a9\u06cc \u0627\u0632 \u0646\u0642\u0627\u0637 \u0642\u0648\u062a \u0627\u0635\u0644\u06cc \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc (SPA)<\/strong> \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634<\/strong>\u060c \u0628\u0627 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React Router<\/strong> \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
                    \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc (SPA) \u0686\u06cc\u0633\u062a\u061f<\/h3>\n\n\n\n
                    \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc<\/strong>\u060c \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f. \u067e\u0633 \u0627\u0632 \u0622\u0646<\/strong>\u060c \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u060c \u0645\u062d\u062a\u0648\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u062f\u0648\u0646 \u0631\u0641\u0631\u0634 \u06a9\u0627\u0645\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u0634<\/strong> \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0631\u0648\u0627\u0646\u200c\u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n
                    \u0645\u0632\u0627\u06cc\u0627\u06cc SPA:<\/strong><\/p>\n\n\n\n
                      \n
                    • \u0646\u062e\u0633\u062a<\/strong>\u060c \u0633\u0631\u0639\u062a \u0628\u0627\u0644\u0627 (\u0628\u062f\u0648\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u0635\u0641\u062d\u0647)<\/li>\n\n\n\n
                    • \u062f\u0648\u0645<\/strong>\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0634\u0628\u06cc\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u0648\u0628\u0627\u06cc\u0644<\/li>\n\n\n\n
                    • \u0633\u0648\u0645<\/strong>\u060c \u06a9\u0627\u0647\u0634 \u0628\u0627\u0631 \u0633\u0631\u0648\u0631<\/li>\n\n\n\n
                    • \u0686\u0647\u0627\u0631\u0645<\/strong>\u060c \u0627\u0645\u06a9\u0627\u0646 \u06a9\u0627\u0631 \u0622\u0641\u0644\u0627\u06cc\u0646 (\u0628\u0627 PWA)<\/li>\n<\/ul>\n\n\n\n
                      \u0646\u0635\u0628 React Router<\/h3>\n\n\n\n
                      \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639<\/strong>\u060c \u0628\u0627\u06cc\u062f React Router \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:
                      npm install react-router-dom<\/p>\n\n\n\n
                      \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0627\u06cc\u0647 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0627 React Router<\/h3>\n\n\n\n
                      \u0627\u0628\u062a\u062f\u0627<\/strong>\u060c \u0641\u0627\u06cc\u0644 main.jsx<\/code> \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Router \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from '.\/App';\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <BrowserRouter>\n    <App \/>\n  <\/BrowserRouter>\n);<\/pre>\n\n\n\n
                      \u0633\u067e\u0633<\/strong>\u060c \u062f\u0631 \u0641\u0627\u06cc\u0644 App.jsx<\/code> \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      import { Routes, Route, Link } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\nimport Contact from '.\/pages\/Contact';\n\nfunction App() {\n  return (\n    <div>\n      {\/* \u0645\u0646\u0648\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc *\/}\n      <nav>\n        <Link to=\"\/\">\u062e\u0627\u0646\u0647<\/Link>\n        <Link to=\"\/about\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/Link>\n        <Link to=\"\/contact\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/Link>\n      <\/nav>\n\n      {\/* \u062a\u0639\u0631\u06cc\u0641 \u0645\u0633\u06cc\u0631\u0647\u0627 *\/}\n      <Routes>\n        <Route path=\"\/\" element={<Home \/>} \/>\n        <Route path=\"\/about\" element={<About \/>} \/>\n        <Route path=\"\/contact\" element={<Contact \/>} \/>\n      <\/Routes>\n    <\/div>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
                      \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a (\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0647)<\/h3>\n\n\n\n
                      \u062d\u0627\u0644\u0627<\/strong>\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 pages<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      src\/pages\/Home.jsx:<\/strong><\/p>\n\n\n\n
                      function Home() {\n  return <h1>\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/h1>;\n}\nexport default Home;<\/pre>\n\n\n\n
                      src\/pages\/About.jsx:<\/strong><\/p>\n\n\n\n
                      function About() {\n  return <h1>\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/h1>;\n}\nexport default About;<\/pre>\n\n\n\n
                      src\/pages\/Contact.jsx:<\/strong><\/p>\n\n\n\n
                      function Contact() {\n  return <h1>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h1>;\n}\nexport default Contact;<\/pre>\n\n\n\n
                      \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0645\u0633\u06cc\u0631\u0647\u0627<\/h3>\n\n\n\n
                      \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0627\u062a \u067e\u0648\u06cc\u0627<\/strong> (\u0645\u062b\u0644 \u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644 \u0628\u0627 ID \u0645\u062e\u062a\u0644\u0641)\u060c \u0627\u0632 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0645\u0633\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      \/\/ \u062f\u0631 App.jsx\n<Route path=\"\/product\/:id\" element={<ProductDetail \/>} \/>\n\n\/\/ \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a ProductDetail\nimport { useParams } from 'react-router-dom';\n\nfunction ProductDetail() {\n  const { id } = useParams(); \/\/ \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0632 \u0645\u0633\u06cc\u0631\n  return <h1>\u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062d\u0635\u0648\u0644 {id}<\/h1>;\n}<\/pre>\n\n\n\n
                      \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0641\u0639\u0627\u0644 (Active Links)<\/h3>\n\n\n\n
                      \u0628\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u0644\u06cc\u0646\u06a9 \u0641\u0639\u0627\u0644<\/strong>\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 NavLink<\/code> \u0628\u0647 \u062c\u0627\u06cc Link<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      import { NavLink } from 'react-router-dom';\n\n<NavLink \n  to=\"\/about\" \n  className={({ isActive }) => isActive ? 'active-link' : ''}\n>\n  \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627\n<\/NavLink><\/pre>\n\n\n\n
                      \u0647\u062f\u0627\u06cc\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0634\u062f\u0647 (Programmatic Navigation)<\/h3>\n\n\n\n
                      \u06af\u0627\u0647\u06cc \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a<\/strong> \u0628\u062f\u0648\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631\u060c \u0628\u0647 \u0635\u0641\u062d\u0647 \u062f\u06cc\u06af\u0631\u06cc \u0647\u062f\u0627\u06cc\u062a \u0634\u0648\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631<\/strong>\u060c \u0627\u0632 \u0647\u0648\u06a9 useNavigate<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      import { useNavigate } from 'react-router-dom';\n\nfunction Login() {\n  const navigate = useNavigate();\n\n  const handleLogin = () => {\n    \/\/ \u0628\u0639\u062f \u0627\u0632 \u0648\u0631\u0648\u062f \u0645\u0648\u0641\u0642\n    navigate('\/dashboard');\n  };\n\n  return <button onClick={handleLogin}>\u0648\u0631\u0648\u062f<\/button>;\n}<\/pre>\n\n\n\n
                      \u062c\u062f\u0648\u0644 \u062e\u0644\u0627\u0635\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React Router<\/h3>\n\n\n\n
                      \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\/\u0647\u0648\u06a9<\/th>\u06a9\u0627\u0631\u0628\u0631\u062f<\/th><\/tr><\/thead>
                      BrowserRouter<\/code><\/td>\u0642\u0631\u0627\u0631\u062f\u0627\u062f\u0646 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/td><\/tr>
                      Routes<\/code><\/td>\u0645\u062d\u0641\u0638\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0645\u0633\u06cc\u0631\u0647\u0627<\/td><\/tr>
                      Route<\/code><\/td>\u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u062e\u0627\u0635<\/td><\/tr>
                      Link<\/code><\/td>\u0644\u06cc\u0646\u06a9 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u062f\u06cc\u06af\u0631 (\u0628\u062f\u0648\u0646 \u0631\u0641\u0631\u0634)<\/td><\/tr>
                      NavLink<\/code><\/td>\u0646\u0633\u062e\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 Link \u0628\u0627 \u062a\u0634\u062e\u06cc\u0635 \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644<\/td><\/tr>
                      useParams<\/code><\/td>\u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0632 \u0645\u0633\u06cc\u0631<\/td><\/tr>
                      useNavigate<\/code><\/td>\u0647\u062f\u0627\u06cc\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0645\u0633\u06cc\u0631 \u062f\u06cc\u06af\u0631<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                      \n
                      \u0646\u06a9\u062a\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646:<\/strong> React Router \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0646\u0628\u06cc \u062f\u0631 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong> \u0627\u0633\u062a. \u0627\u06af\u0631 \u0642\u0635\u062f \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0686\u0646\u062f \u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f<\/strong>\u060c \u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<\/blockquote>\n\n\n\n
                      \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u0645\u0647\u0645 \u0631\u06cc \u0627\u06a9\u062a\u061b useEffect\u060c useContext \u0648 useRef<\/h2>\n\n\n\n
                      \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u0628\u0627 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0631\u06cc \u0627\u06a9\u062a \u0622\u0634\u0646\u0627 \u0645\u06cc\u200c\u0634\u0648\u06cc\u062f \u06a9\u0647 \u0632\u0646\u062f\u06af\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n\n\n\n
                      \u0647\u0648\u06a9 useEffect \u2013 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc<\/h3>\n\n\n\n
                      \u0647\u0648\u06a9 useEffect<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u00ab\u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc\u00bb (Side Effects) \u062f\u0627\u0631\u0646\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644<\/strong>\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc API\u060c \u062a\u0646\u0638\u06cc\u0645 \u062a\u0627\u06cc\u0645\u0631\u060c \u06cc\u0627 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 DOM.<\/p>\n\n\n\n
                      \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect:<\/strong><\/p>\n\n\n\n
                      \nimport { useState, useEffect } from 'react';\n\nfunction UserList() {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    \/\/ \u0627\u06cc\u0646 \u06a9\u062f \u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0648\u0644 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\n    fetch('https:\/\/jsonplaceholder.typicode.com\/users')\n      .then(response => response.json())\n      .then(data => {\n        setUsers(data);\n        setLoading(false);\n      });\n  }, []); \/\/ \u0622\u0631\u0627\u06cc\u0647 \u062e\u0627\u0644\u06cc = \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\n\n  if (loading) return <p>\u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc...<\/p>;\n\n  return (\n    <ul>\n      {users.map(user => (\n        <li key={user.id}>{user.name}<\/li>\n      ))}\n    <\/ul>\n  );\n}<\/pre>\n\n\n\n
                      \u0633\u0647 \u062d\u0627\u0644\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useEffect:<\/strong><\/p>\n\n\n\n
                      \u062d\u0627\u0644\u062a<\/th>\u06a9\u062f<\/th>\u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627<\/th><\/tr><\/thead>
                      \u0628\u062f\u0648\u0646 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc<\/td>useEffect(() => { ... })<\/code><\/td>\u0628\u0639\u062f \u0627\u0632 \u0647\u0631 \u0631\u0646\u062f\u0631<\/td><\/tr>
                      \u0622\u0631\u0627\u06cc\u0647 \u062e\u0627\u0644\u06cc<\/td>useEffect(() => { ... }, [])<\/code><\/td>\u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 (\u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0648\u0644)<\/td><\/tr>
                      \u0628\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc<\/td>useEffect(() => { ... }, [count])<\/code><\/td>\u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 count<\/code> \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                      \u0647\u0648\u06a9 useContext \u2013 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0633\u0631\u0627\u0633\u0631\u06cc \u062f\u0627\u062f\u0647<\/h3>\n\n\n\n
                      \u0628\u0631\u062e\u0644\u0627\u0641 props<\/strong> \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0648\u0627\u0644\u062f \u0628\u0647 \u0641\u0631\u0632\u0646\u062f \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c useContext<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062f\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u06a9\u0644 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0631\u0633\u0627\u0644 \u0627\u0632 \u0637\u0631\u06cc\u0642 props \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f.<\/p>\n\n\n\n
                      \u0645\u0631\u0627\u062d\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Context:<\/strong><\/p>\n\n\n\n
                      \u06af\u0627\u0645 \u0627\u0648\u0644 \u2013 \u0627\u06cc\u062c\u0627\u062f Context:<\/strong><\/p>\n\n\n\n
                      \/\/ src\/context\/ThemeContext.jsx\nimport { createContext, useState } from 'react';\n\nexport const ThemeContext = createContext();\n\nexport function ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    <\/ThemeContext.Provider>\n  );\n}<\/pre>\n\n\n\n
                      \u06af\u0627\u0645 \u062f\u0648\u0645 \u2013 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u06a9\u0644 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 (main.jsx):<\/strong><\/p>\n\n\n\n
                      import { ThemeProvider } from '.\/context\/ThemeContext';\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <ThemeProvider>\n    <App \/>\n  <\/ThemeProvider>\n);<\/pre>\n\n\n\n
                      \u06af\u0627\u0645 \u0633\u0648\u0645 \u2013 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Context \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a:<\/strong><\/p>\n\n\n\n
                      import { useContext } from 'react';\nimport { ThemeContext } from '.\/context\/ThemeContext';\n\nfunction ThemedButton() {\n  const { theme, setTheme } = useContext(ThemeContext);\n\n  return (\n    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n      \u062d\u0627\u0644\u062a \u0641\u0639\u0644\u06cc: {theme}\n    <\/button>\n  );\n}<\/pre>\n\n\n\n
                      \u0647\u0648\u06a9 useRef \u2013 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 DOM<\/h3>\n\n\n\n
                      useRef<\/strong> \u062f\u0648 \u06a9\u0627\u0631\u0628\u0631\u062f \u0627\u0635\u0644\u06cc \u062f\u0627\u0631\u062f:<\/p>\n\n\n\n
                      \u06f1. \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 DOM (\u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 document.querySelector):<\/strong><\/p>\n\n\n\n
                      import { useRef } from 'react';\n\nfunction InputFocus() {\n  const inputRef = useRef(null);\n\n  const focusInput = () => {\n    inputRef.current.focus(); \/\/ \u0641\u0648\u06a9\u0648\u0633 \u0631\u0648\u06cc input\n  };\n\n  return (\n    <div>\n      <input ref={inputRef} type=\"text\" placeholder=\"\u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" \/>\n      <button onClick={focusInput}>\u0641\u0648\u06a9\u0648\u0633 \u0631\u0648\u06cc \u0648\u0631\u0648\u062f\u06cc<\/button>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
                      \u06f2. \u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631\u06cc \u06a9\u0647 \u0628\u0627\u0639\u062b \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u0646\u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/strong><\/p>\n\n\n\n
                      function Timer() {\n  const [count, setCount] = useState(0);\n  const intervalRef = useRef(null);\n\n  const startTimer = () => {\n    intervalRef.current = setInterval(() => {\n      setCount(c => c + 1);\n    }, 1000);\n  };\n\n  const stopTimer = () => {\n    clearInterval(intervalRef.current);\n  };\n\n  return (\n    <div>\n      <p>\u0632\u0645\u0627\u0646: {count} \u062b\u0627\u0646\u06cc\u0647<\/p>\n      <button onClick={startTimer}>\u0634\u0631\u0648\u0639<\/button>\n      <button onClick={stopTimer}>\u062a\u0648\u0642\u0641<\/button>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
                      \u062c\u062f\u0648\u0644 \u062e\u0644\u0627\u0635\u0647 \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f \u0631\u06cc \u0627\u06a9\u062a<\/h3>\n\n\n\n
                      \u0647\u0648\u06a9<\/th>\u06a9\u0627\u0631\u0628\u0631\u062f<\/th>\u0632\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/th><\/tr><\/thead>
                      useState<\/code><\/td>\u0645\u062f\u06cc\u0631\u06cc\u062a state \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/td>\u0647\u0645\u06cc\u0634\u0647<\/td><\/tr>
                      useEffect<\/code><\/td>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc (API\u060c \u062a\u0627\u06cc\u0645\u0631\u060c DOM)<\/td>\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u06a9\u062f \u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631<\/td><\/tr>
                      useContext<\/code><\/td>\u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0627\u062f\u0647 \u0633\u0631\u0627\u0633\u0631\u06cc<\/td>\u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 prop drilling<\/td><\/tr>
                      useRef<\/code><\/td>\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 DOM \u06cc\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u062f\u0627\u0631 \u0628\u062f\u0648\u0646 \u0631\u0646\u062f\u0631<\/td>\u0641\u0648\u06a9\u0648\u0633\u060c \u062a\u0627\u06cc\u0645\u0631\u060c \u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u062f\u0627\u0631 \u0645\u0648\u0642\u062a<\/td><\/tr>
                      useCallback<\/code><\/td>\u0630\u062e\u06cc\u0631\u0647 \u062a\u0648\u0627\u0628\u0639 (\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc)<\/td>\u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc<\/td><\/tr>
                      useMemo<\/code><\/td>\u0630\u062e\u06cc\u0631\u0647 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062d\u0627\u0633\u0628\u0627\u062a\u06cc \u0633\u0646\u06af\u06cc\u0646<\/td>\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
                      \u0646\u06a9\u062a\u0647 \u0627\u0632 \u0622\u06a9\u0627\u062f\u0645\u06cc \u0641\u06af\u0627\u0628\u06cc\u0646:<\/strong>\u00a0\u062a\u0633\u0644\u0637 \u0628\u0631 \u0647\u0648\u06a9\u200c\u0647\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627 \u062f\u0631\u00a0\u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u00a0\u0627\u0633\u062a.\u00a0\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0645<\/strong>\u00a0\u0647\u0631 \u0647\u0648\u06a9 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0648\u0686\u06a9 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u0645\u0631\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
                      \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0639\u0645\u0644\u06cc\u061b \u067e\u0631\u0648\u0698\u0647 Todo List \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a<\/h2>\n\n\n\n
                      \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0631\u06cc \u0627\u06a9\u062a<\/strong>\u060c \u062a\u0645\u0627\u0645 \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u06a9\u0647 \u062a\u0627\u06a9\u0646\u0648\u0646 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647\u200c\u0627\u06cc\u062f \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0639\u0645\u0644\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u067e\u0631\u0648\u0698\u0647 Todo List<\/strong> \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0638\u0627\u06cc\u0641 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0627\u0641\u0632\u0648\u062f\u0646\u060c \u062d\u0630\u0641 \u0648 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u062a\u0633\u06a9\u200c\u0647\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n
                      \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647<\/h3>\n\n\n\n
                      \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639\u060c \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      my-todo-app\/\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 components\/\n\u2502 \u2502 \u251c\u2500\u2500 TodoForm.jsx\n\u2502 \u2502 \u251c\u2500\u2500 TodoList.jsx\n\u2502 \u2502 \u2514\u2500\u2500 TodoItem.jsx\n\u2502 \u251c\u2500\u2500 App.jsx\n\u2502 \u2514\u2500\u2500 main.jsx\n\u251c\u2500\u2500 index.html\n\u2514\u2500\u2500 package.json<\/pre>\n\n\n\n
                      \u0645\u0631\u062d\u0644\u0647 \u06f1: \u0627\u06cc\u062c\u0627\u062f state \u0627\u0635\u0644\u06cc \u062f\u0631 App.jsx<\/p>\n\n\n\n
                      \/\/ src\/App.jsx\nimport { useState } from 'react';\nimport TodoForm from '.\/components\/TodoForm';\nimport TodoList from '.\/components\/TodoList';\nimport '.\/App.css';\n\nfunction App() {\n  const [todos, setTodos] = useState([\n    { id: 1, text: '\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0631\u06cc \u0627\u06a9\u062a', completed: false },\n    { id: 2, text: '\u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647 Todo', completed: false },\n    { id: 3, text: '\u062a\u0645\u0631\u06cc\u0646 \u0647\u0648\u06a9\u200c\u0647\u0627', completed: true },\n  ]);\n\n  \/\/ \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0633\u06a9 \u062c\u062f\u06cc\u062f\n  const addTodo = (text) => {\n    const newTodo = {\n      id: Date.now(),\n      text: text,\n      completed: false,\n    };\n    setTodos([...todos, newTodo]);\n  };\n\n  \/\/ \u062d\u0630\u0641 \u062a\u0633\u06a9\n  const deleteTodo = (id) => {\n    setTodos(todos.filter(todo => todo.id !== id));\n  };\n\n  \/\/ \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a (\u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647\/\u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u062f\u0647)\n  const toggleTodo = (id) => {\n    setTodos(\n      todos.map(todo =>\n        todo.id === id ? { ...todo, completed: !todo.completed } : todo\n      )\n    );\n  };\n\n  \/\/ \u0648\u06cc\u0631\u0627\u06cc\u0634 \u062a\u0633\u06a9\n  const editTodo = (id, newText) => {\n    setTodos(\n      todos.map(todo =>\n        todo.id === id ? { ...todo, text: newText } : todo\n      )\n    );\n  };\n\n  return (\n    <div className=\"app\">\n      <h1>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0638\u0627\u06cc\u0641<\/h1>\n      <p>\u062a\u0639\u062f\u0627\u062f \u0648\u0638\u0627\u06cc\u0641 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647: {todos.filter(t => t.completed).length}<\/p>\n      <TodoForm addTodo={addTodo} \/>\n      <TodoList \n        todos={todos}\n        deleteTodo={deleteTodo}\n        toggleTodo={toggleTodo}\n        editTodo={editTodo}\n      \/>\n    <\/div>\n  );\n}\n\nexport default App;<\/pre>\n\n\n\n
                      <\/pre>\n\n\n\n
                      \u0645\u0631\u062d\u0644\u0647 \u06f2: \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0645 \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0633\u06a9 (TodoForm.jsx)<\/h3>\n\n\n\n
                      \/\/ src\/components\/TodoForm.jsx\nimport { useState } from 'react';\n\nfunction TodoForm({ addTodo }) {\n  const [inputValue, setInputValue] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    if (inputValue.trim()) {\n      addTodo(inputValue);\n      setInputValue('');\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"todo-form\">\n      <input\n        type=\"text\"\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        placeholder=\"\u06cc\u06a9 \u0648\u0638\u06cc\u0641\u0647 \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f...\"\n        className=\"todo-input\"\n      \/>\n      <button type=\"submit\" className=\"todo-button\">\u0627\u0641\u0632\u0648\u062f\u0646<\/button>\n    <\/form>\n  );\n}\n\nexport default TodoForm;<\/pre>\n\n\n\n
                      \u0645\u0631\u062d\u0644\u0647 \u06f3: \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0644\u06cc\u0633\u062a \u062a\u0633\u06a9\u200c\u0647\u0627 (TodoList.jsx)<\/h3>\n\n\n\n
                      \/\/ src\/components\/TodoList.jsx\nimport TodoItem from '.\/TodoItem';\n\nfunction TodoList({ todos, deleteTodo, toggleTodo, editTodo }) {\n  if (todos.length === 0) {\n    return <p className=\"empty-message\">\u0647\u06cc\u0686 \u0648\u0638\u06cc\u0641\u0647\u200c\u0627\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f!<\/p>;\n  }\n\n  return (\n    <ul className=\"todo-list\">\n      {todos.map(todo => (\n        <TodoItem\n          key={todo.id}\n          todo={todo}\n          deleteTodo={deleteTodo}\n          toggleTodo={toggleTodo}\n          editTodo={editTodo}\n        \/>\n      ))}\n    <\/ul>\n  );\n}\n\nexport default TodoList;<\/pre>\n\n\n\n
                      \u0645\u0631\u062d\u0644\u0647 \u06f4: \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0622\u06cc\u062a\u0645 \u062a\u0633\u06a9 (TodoItem.jsx)<\/h3>\n\n\n\n
                      \/\/ src\/components\/TodoItem.jsx\nimport { useState } from 'react';\n\nfunction TodoItem({ todo, deleteTodo, toggleTodo, editTodo }) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editText, setEditText] = useState(todo.text);\n\n  const handleEdit = () => {\n    if (editText.trim()) {\n      editTodo(todo.id, editText);\n      setIsEditing(false);\n    }\n  };\n\n  return (\n    <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>\n      <input\n        type=\"checkbox\"\n        checked={todo.completed}\n        onChange={() => toggleTodo(todo.id)}\n        className=\"todo-checkbox\"\n      \/>\n      \n      {isEditing ? (\n        <input\n          type=\"text\"\n          value={editText}\n          onChange={(e) => setEditText(e.target.value)}\n          onBlur={handleEdit}\n          onKeyPress={(e) => e.key === 'Enter' && handleEdit()}\n          className=\"todo-edit-input\"\n          autoFocus\n        \/>\n      ) : (\n        <span className=\"todo-text\" onDoubleClick={() => setIsEditing(true)}>\n          {todo.text}\n        <\/span>\n      )}\n      \n      <div className=\"todo-actions\">\n        <button onClick={() => setIsEditing(true)} className=\"edit-btn\">\n          \u270f\ufe0f\n        <\/button>\n        <button onClick={() => deleteTodo(todo.id)} className=\"delete-btn\">\n          \ud83d\uddd1\ufe0f\n        <\/button>\n      <\/div>\n    <\/li>\n  );\n}\n\nexport default TodoItem;<\/pre>\n\n\n\n
                      \u0645\u0631\u062d\u0644\u0647 \u06f5: \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0627 CSS (App.css)<\/h3>\n\n\n\n
                      \/* src\/App.css *\/\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: system-ui, -apple-system, sans-serif;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.app {\n  background: white;\n  max-width: 600px;\n  width: 90%;\n  margin: 2rem auto;\n  padding: 2rem;\n  border-radius: 1rem;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n  margin-bottom: 0.5rem;\n}\n\n.todo-form {\n  display: flex;\n  gap: 0.5rem;\n  margin: 1.5rem 0;\n}\n\n.todo-input {\n  flex: 1;\n  padding: 0.75rem;\n  border: 2px solid #ddd;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n\n.todo-button {\n  padding: 0.75rem 1.5rem;\n  background: #667eea;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  font-size: 1rem;\n}\n\n.todo-list {\n  list-style: none;\n  margin-top: 1rem;\n}\n\n.todo-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem;\n  background: #f8f9fa;\n  border-radius: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.todo-item.completed .todo-text {\n  text-decoration: line-through;\n  color: #888;\n}\n\n.todo-text {\n  flex: 1;\n  cursor: pointer;\n}\n\n.todo-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.edit-btn, .delete-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1.2rem;\n  padding: 0.25rem;\n}\n\n.empty-message {\n  text-align: center;\n  color: #888;\n  padding: 2rem;\n}<\/pre>\n\n\n\n
                      \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647<\/h3>\n\n\n\n
                      \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
                      npm run dev<\/pre>\n\n\n\n
                      \u0633\u067e\u0633 \u0622\u062f\u0631\u0633 http:\/\/localhost:5173<\/code> \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n
                      \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647:<\/strong><\/p>\n\n\n\n