\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u0628\u0647\u0631\u0647 \u0631\u0627 \u0628\u0628\u0631\u06cc\u062f\u060c \u0628\u0647 \u0627\u06cc\u0646 \u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627 \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0631\u06cc\u062f:<\/p>\n
- \n
- Node.js \u0646\u0633\u062e\u0647 12.2.0 \u0631\u0627 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/li>\n
- \u067e\u06a9\u06cc\u062c \u0645\u0646\u06cc\u062c\u0631 Yarn \u0646\u0633\u062e\u0647 1.22.0 \u0631\u0627 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645\u062a\u0627\u0646 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f. \u0646\u0627\u06af\u0641\u062a\u0647 \u0646\u0645\u0627\u0646\u062f \u0628\u0627 \u0646\u062d\u0648\u0647 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 Yarn Package Manager \u0646\u06cc\u0632 \u0628\u0627\u06cc\u062f \u0622\u0634\u0646\u0627\u06cc\u06cc \u0645\u0642\u062f\u0645\u0627\u062a\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/li>\n
- \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 HTML \u0648 CSS \u0648 JS \u0627\u0632 \u062f\u06cc\u06af\u0631 \u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React.js \u0627\u0633\u062a.<\/li>\n
- \u0622\u0634\u0646\u0627\u06cc\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 \u06a9\u062f\u0647\u0627\u06cc React.js \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062d\u062f\u0627\u06a9\u062b\u0631\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0644\u0627\u0632\u0645 \u0627\u0633\u062a.<\/li>\n
- \u0628\u0647 \u062a\u0644\u0641\u0646\u200c\u0647\u0645\u0631\u0627\u0647 \u0645\u062a\u0635\u0644 \u0628\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u06a9\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0645\u06cc\u200c\u0646\u0648\u06cc\u0633\u06cc\u062f\u060c \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/li>\n<\/ul>\n
![\"\u062e\u0631\u06cc\u062f](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2012\/02\/700X90-2.gif\")
<\/figure><\/a><\/p>\n\u06af\u0627\u0645 \u0627\u0648\u0644: \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f Vite<\/b><\/span><\/h2>\n
\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0627\u0648\u0644\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 Vite \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f React.js \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0648 \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u200c\u0647\u0627\u060c \u0627\u0632 Yarn Package Manager \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n
\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f React.js\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n
yarn create vite<\/pre>\n
\u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u060c \u0641\u0627\u06cc\u0644 \u0627\u062c\u0631\u0627\u06cc\u06cc Vite \u0627\u0632 \u0631\u06cc\u067e\u0648\u0632\u06cc\u062a\u0648\u0631\u06cc npm \u0627\u062c\u0631\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 React \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648 \u0645\u0646\u0648 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u0631\u0648\u0698\u0647 \u0648 \u0646\u0648\u0639 \u0632\u0628\u0627\u0646 \u0641\u0639\u0627\u0644 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n
\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0632 \u0634\u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0646\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u062f\u0631 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
Output\r\nyarn create v1.22.10\r\n[1\/4] Resolving packages...\r\n[2\/4] Fetching packages...\r\n[3\/4] Linking dependencies...\r\n[4\/4] Building fresh packages...\r\n\r\nsuccess Installed \"create-vite@2.9.0\" with binaries:\r\n - create-vite\r\n - cva\r\n? Project name: \u00bb vite-project<\/pre>\n
\u0646\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0645\u0627 \u0646\u0627\u0645 digital-ocean-vite \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645:<\/p>\n
digital-ocean-vite\r\n<\/pre>\n
\u0628\u0639\u062f \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u0627\u0645 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u060c Vite \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f \u062a\u0627 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9 \u0645\u062f\u0646\u0638\u0631\u062a\u0627\u0646 \u0631\u0627 \u0628\u0631\u06af\u0632\u06cc\u0646\u06cc\u062f:<\/p>\n
Output\r\n? Select a framework: \u00bb - Use arrow-keys. Return to submit.\r\n vanilla\r\n vue\r\n> react\r\n preact\r\n lit\r\n svelte<\/pre>\n
\u062f\u0631\u200c\u062d\u0627\u0644\u200c\u062d\u0627\u0636\u0631\u060c Vite \u0627\u0632 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u200c\u0647\u0627\u06cc \u0645\u062a\u0646\u0648\u0639\u06cc \u0645\u0627\u0646\u0646\u062f React \u060cPreact \u060cVue \u060cLit \u0648 Svelte \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0627\u0627\u06cc\u0646\u200c\u062d\u0627\u0644 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9 React.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061b \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0641\u0644\u0634 \u0642\u0631\u0627\u0631\u200c\u06af\u0631\u0641\u062a\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0631\u0648\u06cc React \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n
![\"Vite](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite6.jpg\" "\\"\u0627\u06cc\u062c\u0627\u062f")
\u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 React \u0628\u0627 Vite \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a\u061f<\/figcaption><\/figure>\n \u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u060c Vite \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f \u062a\u0627 \u0632\u0628\u0627\u0646 \u0645\u062f\u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u0646\u06cc\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0648\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc\u060c \u0647\u0645 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 JavaScript \u0648 \u0647\u0645 \u0627\u0632 TypeScript \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u062d\u0627\u0644\u0627 \u0627\u0632 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a\u200c\u062f\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 React \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n
Output\r\n? Select a variant: \u00bb - Use arrow-keys. Return to submit.\r\n> react\r\n react-ts<\/pre>\n
\u0628\u0639\u062f \u0627\u0632 Setup \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u060c \u062e\u0631\u0648\u062c\u06cc\u200c\u0627\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u06a9\u0647 \u062d\u0627\u06a9\u06cc \u0627\u0632 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0635\u062d\u06cc\u062d \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a. \u067e\u0633\u200c\u0627\u0632\u200c\u0622\u0646\u060c Vite \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f \u062a\u0627 Dependency\u0647\u0627\u06cc \u0645\u0648\u0631\u062f\u0646\u06cc\u0627\u0632 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Yarn \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n
Output\r\nDone:\r\nScaffolding project in path\\to\\digital-ocean-vite...\r\n\r\nDone. Now run:\r\n\r\n cd digital-ocean-vite\r\n yarn\r\n yarn dev\r\n\r\nDone in 129.89s.<\/pre>\n
\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631\u060c \u0628\u0647 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f:<\/p>\n
cd digital-ocean-vite<\/pre>\n
\u0633\u067e\u0633\u060c \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0632\u200c\u0637\u0631\u06cc\u0642 Yarn\u060c \u062f\u0650\u067e\u0646\u062f\u0650\u0633\u06cc\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n
yarn<\/pre>\n
\u0628\u0639\u062f \u0627\u0632 \u0646\u0635\u0628 \u0645\u0648\u0641\u0642 Dependency\u0647\u0627\u060c \u0645\u062f\u062a\u200c\u0632\u0645\u0627\u0646 \u0635\u0631\u0641\u200c\u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u062f\u0631 \u0642\u0627\u0644\u0628 \u067e\u06cc\u063a\u0627\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f:<\/p>\n
Output\r\nsuccess Saved lockfile.\r\nDone in 43.26s.<\/pre>\n
\u0628\u062f\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u0634\u0645\u0627 \u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u062f \u06af\u0627\u0645 \u0627\u0648\u0644 \u0631\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u067e\u0634\u062a\u200c\u0633\u0631 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f Vite \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0648 \u0628\u0633\u062a\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u0631\u062f\u0646\u06cc\u0627\u0632 React \u0648 \u0646\u06cc\u0632 Vite \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f. \u062f\u0631 \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc\u060c \u062a\u0648\u0633\u0639\u0647 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0646\u062c\u0627\u0645 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u062f.<\/p>\n
\n\u0686\u0637\u0648\u0631 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646 \u06f3 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f\u061f \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0632\u06cc\u0631 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/p>\n
\u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 3<\/a><\/p>\n<\/div>\n
\u06af\u0627\u0645 \u062f\u0648\u0645: \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647<\/b><\/span><\/h2>\n
\u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u06a9\u062f\u0647\u0627\u06cc \u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647\u060c \u0628\u0647 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0646\u06cc\u0632 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0646\u062d\u0648\u0647 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u06cc\u0646 \u0633\u0631\u0648\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n
\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062f\u0631 \u067e\u0648\u0634\u0647 digital-ocean-vite \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
yarn run dev<\/pre>\n
\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u060c \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a Development Mode \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0648 \u0634\u0645\u0627 \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n
Output\r\n vite v2.9.1 dev server running at:\r\n > Local: http:\/\/localhost:3000\/\r\n > Network: use `--host` to expose\r\n ready in 910ms.<\/pre>\n
\u062d\u0627\u0644\u0627 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u0648 \u0622\u062f\u0631\u0633 http:\/\/localhost:3000\/. \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f. \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f React \u0631\u0627 \u0631\u0648\u06cc \u067e\u0648\u0631\u062a \u06f3\u06f0\u06f0\u06f0 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
![\"\u0622\u0645\u0648\u0632\u0634](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite1.jpg\" "\\"\u0646\u062d\u0648\u0647")
\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 React \u0628\u0627 Vite \u0686\u0637\u0648\u0631 \u0627\u0633\u062a\u061f<\/figcaption><\/figure>\n \u0627\u06af\u0631 \u0686\u0646\u06cc\u0646 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f\u06cc\u062f\u060c \u0628\u0647\u200c\u0645\u0639\u0646\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0627\u0646\u0633\u062a\u0647\u200c\u0627\u06cc\u062f React \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vite \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc\u060c \u0628\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0686\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634 \u06a9\u062f\u0647\u0627\u06cc \u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0644\u0641\u0646\u200c\u0647\u0645\u0631\u0627\u0647 \u062e\u0648\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u06af\u0627\u0645 \u0633\u0648\u0645: \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0644\u0641\u0646\u200c\u0647\u0645\u0631\u0627\u0647<\/b><\/span><\/h2>\n
\u062f\u0631\u0627\u062f\u0627\u0645\u0647\u060c \u0628\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0686\u0637\u0648\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0634\u0628\u06a9\u0647 Local \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0647\u0645 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u0633\u0631\u0648\u0631 Local\u060c \u0628\u0627\u06cc\u062f \u0633\u0631\u0648\u0631 <\/a>\u00a0\u0641\u0639\u0644\u06cc \u0631\u0627 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0638\u0648\u0631\u060c \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc Ctrl+C \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u062e\u0627\u062a\u0645\u0647 \u062f\u0647\u06cc\u062f. \u067e\u0633\u200c\u0627\u0632\u200c\u0622\u0646 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u062a\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
yarn run dev --host<\/pre>\n
\u0639\u0628\u0627\u0631\u062a –host \u0628\u0647 Vite \u062f\u0633\u062a\u0648\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0631\u0648\u06cc \u0634\u0628\u06a9\u0647 Local \u0642\u0631\u0627\u0631 \u062f\u0647\u062f. \u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u062f\u060c \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n
Output\r\nvite v2.9.1 dev server running at:\r\n > Network: `http:\/\/ip_address:3000`\r\n > Network: `http:\/\/ip_address:3000`\r\n > Local: http:\/\/localhost:3000\/\r\n > Network: http:\/\/network_address:3000\/\r\n ready in 477ms.<\/pre>\n
\u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631\u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0622\u062f\u0631\u0633 IP \u0644\u0648\u06a9\u0627\u0644 \u0645\u0646\u062d\u0635\u0631\u0628\u0647\u200c\u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u0634\u0628\u06a9\u0647 \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u06cc\u0627 \u0631\u0648\u062a\u0631 \u0634\u0645\u0627 \u062f\u0631 \u062e\u0631\u0648\u062c\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062d\u0627\u0644\u0627 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u062a\u0644\u0641\u0646\u200c\u0647\u0645\u0631\u0627\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f \u0648 \u0647\u0631\u200c\u06cc\u06a9 \u0627\u0632 IP\u200c\u0647\u0627\u06cc \u062f\u0631\u062c\u200c\u0634\u062f\u0647 \u062f\u0631 \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631\u062a\u0627\u0646 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u200c \u0635\u0648\u0631\u062a\u060c \u067e\u06cc\u0634\u200c\u0646\u0645\u0627\u06cc\u0634 Vite \u0631\u0627 \u0631\u0648\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 \u062a\u0644\u0641\u0646\u200c\u0647\u0645\u0631\u0627\u0647 \u062e\u0648\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n
![\"\u0631\u0627\u0647](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite2.jpg\" "\\"")
\u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 React \u0628\u0627 Vite<\/figcaption><\/figure>\n \u062f\u0631 \u0642\u062f\u0645 \u0628\u0639\u062f\u06cc\u060c \u0628\u0627\u06cc\u062f \u0628\u0648\u06cc\u0644\u0631\u067e\u0644\u06cc\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Vite \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u06af\u0627\u0645 \u0686\u0647\u0627\u0631\u0645: \u062d\u0630\u0641 \u0628\u0648\u06cc\u0644\u0631\u067e\u0644\u06cc\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Vite<\/b><\/span><\/h2>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u0648\u06cc\u0644\u0631\u067e\u0644\u06cc\u062a \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0627\u0632 \u067e\u0648\u0634\u0647 \/src \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u062f\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a \u0648 \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u06cc\u0632 \u0622\u0634\u0646\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f.<\/p>\n
\u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \/src\u060c \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
ls src\/<\/pre>\n
\u062e\u0631\u0648\u062c\u06cc \u0641\u0647\u0631\u0633\u062a \u062a\u0645\u0627\u0645\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0627\u06cc\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u0633\u062a. \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc\u0646 \u062e\u0631\u0648\u062c\u06cc \u062f\u0631 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
Output\r\nApp.css\r\nApp.jsx\r\nfavicon.svg\r\nindex.css\r\nlogo.svg\r\nmain.jsx<\/pre>\n
\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 rm\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062a\u06a9\u06cc \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n
rm src\/App.css<\/pre>\n
\u062a\u0645\u0627\u0645\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \/src \u0631\u0627 \u0628\u0647\u200c\u062c\u0632 \u0641\u0627\u06cc\u0644 main.jsx \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u062d\u0627\u0644\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u062f\u0633\u062a\u0648\u0631 ls src\/ \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u0627\u0642\u06cc\u200c\u0645\u0627\u0646\u062f\u0647 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n
ls src\/<\/pre>\n
\u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0627\u06cc\u062f \u0641\u0642\u0637 \u0641\u0627\u06cc\u0644 main.jsx \u0628\u0627\u0642\u06cc \u0645\u0627\u0646\u062f\u0647 \u0628\u0627\u0634\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u062f\u0631 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
Output\r\nmain.jsx<\/pre>\n
\u0628\u0627\u200c\u062a\u0648\u062c\u0647\u200c\u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u062a\u0645\u0627\u0645\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u062d\u0627\u0644\u0627 \u0628\u0627\u06cc\u062f \u0631\u0641\u0631\u0646\u0633 \u0641\u0627\u06cc\u0644 CSS \u062d\u0630\u0641\u200c\u0634\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u062f\u0631 main.jsx \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0638\u0648\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631\u060c \u0641\u0627\u06cc\u0644 main.jsx \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n
nano src\/main.jsx<\/pre>\n
\u062e\u0637\u0648\u0637 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a\u200c\u0634\u062f\u0647 \u062f\u0631 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u062f\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0648\u0627\u0646\u0633\u062a \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627 \u0641\u0627\u06cc\u0644 CSS \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n
import React from \"react\"\r\nimport ReactDOM from \"react-dom\"\r\nimport App from \".\/App\"\r\nimport \".\/index.css\"\r\n\r\nReactDOM.createRoot(document.getElementById(\"root\")).render(\r\n <React.StrictMode>\r\n <App \/>\r\n <\/React.StrictMode>\r\n)<\/pre>\n
\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u0639\u0645\u0627\u0644\u200c\u0634\u062f\u0647 \u062f\u0631 \u0641\u0627\u06cc\u0644 main.jsx \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u0628\u0628\u0646\u062f\u06cc\u062f.<\/p>\n
\n\u0686\u0637\u0648\u0631 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f\u061f \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0632\u06cc\u0631 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/p>\n
\u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><\/p>\n<\/div>\n
\u062f\u0631\u0627\u062f\u0627\u0645\u0647\u060c \u0641\u0627\u06cc\u0644 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0627 \u0646\u0627\u0645 App.jsx \u062f\u0631 \u067e\u0648\u0634\u0647 src\/ \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0645\u0627\u0646 \u06a9\u062f\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0648 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n
nano src\/App.jsx<\/pre>\n
\u062d\u0627\u0644\u0627 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 App.jsx \u0627\u06cc\u062c\u0627\u062f\u0634\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n
export default function App() {\r\n return (\r\n <>\r\n <div>Hello World<\/div>\r\n <\/>\r\n );\r\n}<\/pre>\n\u0627\u06cc\u0646 \u06a9\u062f\u0647\u0627 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062c\u062f\u06cc\u062f React \u0628\u0627 \u0646\u0627\u0645 App \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0628\u062f\u0646\u0647 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062d\u0627\u0648\u06cc \u06cc\u06a9 <div> \u0628\u0627 \u0645\u062a\u0646 Hello World \u0627\u0633\u062a. \u062f\u0631\u0646\u0647\u0627\u06cc\u062a\u060c \u0641\u0627\u06cc\u0644 App.jsx \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0628\u0628\u0646\u062f\u06cc\u062f.<\/p>\n
\u062f\u0631\u0627\u062f\u0627\u0645\u0647\u060c \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n
yarn run dev --host<\/pre>\n
\u062d\u0627\u0644\u0627 \u0622\u062f\u0631\u0633 http:\/\/localhost:3000 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u0642\u0627\u0639\u062f\u062a\u0627\u064b \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0644\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0639\u0628\u0627\u0631\u062a Hello World \u062f\u0631 \u0622\u0646 \u062f\u0631\u062c \u0634\u062f\u0647 \u0627\u0633\u062a\u061b \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631:<\/p>\n
![\"\u0627\u0645\u0648\u0632\u0634](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite3.jpg\" "\\"\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc")
\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0628\u0627 Vite<\/figcaption><\/figure>\n \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u062f \u062a\u0639\u062f\u0627\u062f\u06cc \u0627\u0632 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 Vite \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc\u060c \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a \u06a9\u0647 \u0686\u0637\u0648\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0628\u06cc\u0633\u06cc\u06a9 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0648 \u0641\u0627\u06cc\u0644 CSS \u0648 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u062c\u062f\u06cc\u062f \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n
\u06af\u0627\u0645 \u067e\u0646\u062c\u0645: \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f<\/b><\/span><\/h2>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06cc\u0627\u062f \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u06cc\u0633\u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0627\u06cc\u0644\u200c CSS \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0628\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0644\u06cc\u0646\u06a9 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc React App \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631\u200c\u0627\u062f\u0627\u0645\u0647\u060c \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645:<\/p>\n
\u06f1. \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/b><\/span><\/h3>\n
\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0627\u0698\u0648\u0644\u0627\u0631\u0628\u0648\u062f\u0646 \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0647\u0645\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0634\u06cc\u0648\u0647\u200c\u0627\u06cc \u0628\u0647\u062a\u0631 \u0633\u0627\u0632\u0645\u0627\u0646\u200c\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0638\u0648\u0631\u060c \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0628\u0627 \u0646\u0627\u0645 components \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
mkdir src\/components<\/pre>\n
\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f\u06cc \u0628\u0627 \u0646\u0627\u0645 welcome.jsx \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src\/components\/ \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n
nano src\/components\/Welcome.jsx<\/pre>\n
\u062d\u0627\u0644\u0627 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 welcome.jsx \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
export default function Welcome() {\r\n return (\r\n <>\r\n <div className=\"wrapper\">\r\n <h1>Welcome To My App<\/h1>\r\n <p>This is going to be the coolest app in the world!<\/p>\r\n <\/div>\r\n <\/>\r\n );\r\n}<\/pre>\n\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0628\u0627\u0644\u0627\u060c \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc React \u0628\u0627 \u0646\u0627\u0645 Welcome \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u067e\u06cc\u0634\u0648\u0646\u062f \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0647 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u06cc\u0646 \u067e\u06cc\u0627\u0645 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Export \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u062f.<\/p>\n
\u062a\u06af div \u0628\u0627 \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633 wrapper \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 CSS \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062a\u06af\u200c\u0647\u0627\u06cc h1 \u0648 p \u0646\u06cc\u0632 \u0648\u0638\u06cc\u0641\u0647 \u0646\u0634\u0627\u0646\u200c\u062f\u0627\u062f\u0646 \u067e\u06cc\u0627\u0645 \u0631\u0627 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0628\u0631\u200c\u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u0646\u062f. \u062d\u0627\u0644\u0627 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0628\u0628\u0646\u062f\u06cc\u062f.<\/p>\n
\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f \u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u062f\u0631 \u0641\u0627\u06cc\u0644 App.shx \u0631\u0641\u0631\u0646\u0633 \u062f\u0647\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631\u060c \u0641\u0627\u06cc\u0644 App.jsx \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n
nano src\/App.jsx<\/pre>\n
\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0641\u0627\u06cc\u0644 App.jsx \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0628\u0647\u200c\u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f. \u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0627\u0635\u0644\u0627\u062d \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f\u060c \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u0634\u062f\u0647\u200c\u0627\u0646\u062f:<\/p>\n
import Welcome from \".\/components\/Welcome\"\r\n\r\nexport default function App() {\r\n return (\r\n <>\r\n <Welcome \/>\r\n <\/>\r\n )\r\n}<\/pre>\n\u0627\u06cc\u0646 \u062e\u0637 \u06a9\u062f \u0641\u0627\u06cc\u0644 welcome.jsx \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0627\u0631\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f\u06cc \u0628\u0647 \u0628\u062f\u0646\u0647 \u062a\u0627\u0628\u0639 \u0644\u06cc\u0646\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645\u060c \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f.<\/p>\n
\n\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0632\u06cc\u0631 6 \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0622\u0633\u06cc\u0628\u200c\u0626\u0630\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc API \u0631\u0627 \u0622\u0648\u0631\u062f\u0647\u200c\u0627\u06cc\u0645. \u0622\u0646 \u0631\u0627 \u0627\u0632 \u062f\u0633\u062a \u0646\u062f\u0647\u06cc\u062f.<\/p>\n
\u0622\u0633\u06cc\u0628\u200c\u067e\u0630\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc \u0645\u0647\u0645 API<\/a><\/p>\n<\/div>\n
\u06f2. \u0627\u0636\u0627\u0641\u0647\u200c\u06a9\u0631\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631<\/b><\/span><\/h3>\n
\u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0631 React \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0645\u0647\u0645\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627 \u06a9\u0627\u0631\u0628\u0631\u062f \u0641\u0631\u0627\u0648\u0627\u0646\u06cc \u062f\u0627\u0631\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631\u060c \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0628\u0627 \u0646\u0627\u0645 img \u062f\u0631 \u0632\u06cc\u0631\u200c\u067e\u0648\u0634\u0647 src\/ \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n
mkdir src\/img<\/pre>\n
\u067e\u0633\u200c\u0627\u0632\u0622\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631\u060c \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc src\/img \u0628\u0631\u0648\u06cc\u062f:<\/p>\n
cd src\/img<\/pre>\n
\u062d\u0627\u0644\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0632 Sammy \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u062f\u0631 \u067e\u0648\u0634\u0647 src.img \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645:<\/p>\n
![\"Front](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite4.jpg\" "\\"\u0642\u0631\u0627\u0631")
\u062a\u0635\u0648\u06cc\u0631 \u0641\u0648\u0642 \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 src.img \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f<\/figcaption><\/figure>\n \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 wget\u060c \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0642\u062f\u0627\u0645 \u06a9\u0646\u06cc\u062f:<\/p>\n
wget https:\/\/html.sammy-codes.com\/images\/small-profile.jpeg<\/pre>\n
\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631\u060c \u0646\u0627\u0645 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n
mv small-profile.jpeg sammy.jpeg<\/pre>\n
\u062f\u0633\u062a\u0648\u0631 \u0628\u0627\u0644\u0627 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0632 small-profile.jpeg \u0628\u0647 Sammy.jpeg \u062a\u063a\u06cc\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u062f\u0627\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u062f\u0631\u200c\u0627\u062f\u0627\u0645\u0647 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0634\u0648\u062f.<\/p>\n
\u062d\u0627\u0644\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0628\u0647 \u067e\u0648\u0634\u0647 Root \u062e\u0648\u062f \u0628\u0627\u0632\u06af\u0631\u062f\u06cc\u062f:<\/p>\n
cd ..\/..\/<\/pre>\n
\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0641\u0627\u06cc\u0644 welcome.jsx \u0631\u0627 \u0628\u0631\u0627\u06cc \u0644\u06cc\u0646\u06a9 \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647\u200c\u0631\u0648\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n
nano src\/components\/Welcome.jsx<\/pre>\n
\u0641\u0627\u06cc\u0644 welcome.jsx \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f. \u062e\u0637\u0648\u0637\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0634\u0648\u0646\u062f\u060c \u0628\u0627 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647\u200c\u0627\u0646\u062f:<\/p>\n
import Sammy from \"..\/img\/sammy.jpeg\"\r\n\r\nexport default function Welcome() {\r\n return (\r\n <>\r\n <div className=\"wrapper\">\r\n <h1>Welcome To My App<\/h1>\r\n <p>This is going to be the coolest app in the world!<\/p>\r\n <img src={Sammy} alt=\"Sammy Image\" width={200} height={200} \/>\r\n <\/div>\r\n <\/>\r\n )\r\n}<\/pre>\n\u062f\u0631 \u0627\u0648\u0644\u06cc\u0646 \u062e\u0637 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a\u200c\u0634\u062f\u0647\u060c \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u0628\u0647 React \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u062e\u0637 \u062f\u0648\u0645 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a\u200c\u0634\u062f\u0647\u060c \u062f\u0631\u0648\u0646 \u0628\u062f\u0646\u0647 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u062a\u06af <img> \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0627\u062a\u0631\u06cc\u0628\u06cc\u0648\u062a src \u0631\u0627 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0639\u06a9\u0633\u06cc \u06a9\u0647 \u062a\u0627\u0632\u0647 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u06cc\u0646 \u062e\u0637\u060c \u0639\u0631\u0636 \u0648 \u0627\u0631\u062a\u0641\u0627\u0639 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0627\u062a\u0631\u06cc\u0628\u06cc\u0648\u062a\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0648\u06cc \u06f2\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
\u062d\u0627\u0644\u0627 \u0641\u0627\u06cc\u0644 welcome.jsx \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f. \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0628\u0627\u06cc\u062f \u0641\u0627\u06cc\u0644 CSS \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u062a\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u06f3. \u0627\u0636\u0627\u0641\u0647\u200c\u06a9\u0631\u062f\u0646 \u0641\u0627\u06cc\u0644 CSS<\/b><\/span><\/h3>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0641\u0627\u06cc\u0644 CSS \u0633\u0641\u0627\u0631\u0634\u06cc\u200c\u0633\u0627\u0632\u06cc\u200c\u0634\u062f\u0647 \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0645\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0631\u0646\u06af\u200c\u0648\u200c\u0644\u0639\u0627\u0628 \u0645\u062e\u062a\u0635\u0631\u06cc \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0628\u062f\u0647\u06cc\u0645.<\/p>\n
\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0628\u0627 \u0646\u0627\u0645 CSS \u062f\u0631 \u0632\u06cc\u0631\u200c\u067e\u0648\u0634\u0647 src\/ \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n
mkdir src\/css<\/pre>\n
\u062d\u0627\u0644\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631\u060c \u0641\u0627\u06cc\u0644 CSS \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0627 \u0646\u0627\u0645 main.css \u062f\u0631 \u067e\u0648\u0634\u0647 src\/css \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n
nano src\/css\/main.css<\/pre>\n
\u062f\u0631\u0627\u062f\u0627\u0645\u0647\u060c \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 CSS \u0627\u06cc\u062c\u0627\u062f\u0634\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n
body {\r\n display: grid;\r\n place-items: center;\r\n background-color: #b4a7d6;\r\n font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n.wrapper {\r\n background-color: #fff9e6;\r\n padding: 20px;\r\n border-radius: 10px;\r\n}\r\n\r\nh1 {\r\n color: #8873be;\r\n}<\/pre>\n\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc CSS \u0628\u0627\u0644\u0627\u060c \u0634\u0628\u06a9\u0647\u200c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0648 \u0633\u067e\u0633 \u0622\u06cc\u062a\u0645\u200c\u0647\u0627 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0627\u06cc\u0646 \u0634\u0628\u06a9\u0647 \u0642\u0631\u0627\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u06af\u0631\u0641\u062a \u0648 \u06cc\u06a9 \u062e\u0627\u0646\u0648\u0627\u062f\u0647 \u0641\u0648\u0646\u062a \u0648 \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0646\u06cc\u0632 \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n
\u067e\u0633 \u0627\u0632 \u0627\u0636\u0627\u0641\u0647\u200c\u06a9\u0631\u062f\u0646 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631\u060c \u0641\u0627\u06cc\u0644 main.css \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f. \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a welcome.jsx \u0628\u0647 \u0641\u0627\u06cc\u0644 CSS \u0627\u0631\u062c\u0627\u0639 \u062f\u0647\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0638\u0648\u0631\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0641\u0627\u06cc\u0644 welcome.jsx \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n
nano src\/components\/Welcome.jsx<\/pre>\n
\u062e\u0637\u0648\u0637 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a\u200c\u0634\u062f\u0647 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n
import Sammy from \"..\/img\/sammy.png\"\r\nimport \"..\/css\/main.css\"\r\n\r\nexport default function Welcome() {\r\n return (\r\n <>\r\n <div className=\"wrapper\">\r\n <h1>Welcome To My App<\/h1>\r\n <p>This is going to be the coolest app in the world!<\/p>\r\n <img src={Sammy} alt=\"Sammy Image\" width={200} height={200} \/>\r\n <\/div>\r\n <\/>\r\n )\r\n}<\/pre>\n\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062e\u0637\u060c \u0641\u0627\u06cc\u0644 CSS \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0634\u0645\u0627 \u0648\u0627\u0631\u062f \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0641\u0627\u06cc\u0644 welcome.jsx \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f. \u062f\u0631 \u0642\u062f\u0645 \u0628\u0639\u062f\u06cc\u060c \u0628\u0627\u06cc\u062f Title \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n
\n\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0632\u06cc\u0631 \u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0646\u0648\u0634\u062a\u0646 \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 Node.js \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/p>\n
\u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc Node.js<\/a><\/p>\n<\/div>\n
\u06f4. \u062a\u063a\u06cc\u06cc\u0631 Title \u0628\u0631\u0646\u0627\u0645\u0647\u00a0<\/b><\/span><\/h3>\n
\u0628\u0647\u200c\u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c Vite \u0639\u0628\u0627\u0631\u062a Vite App \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Title \u062f\u0631 \u0646\u0648\u0627\u0631 \u0639\u0646\u0648\u0627\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u0639\u0646\u0648\u0627\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0641\u0627\u06cc\u0644 index.html \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc Root \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n
nano index.html<\/pre>\n
\u062a\u06af <title> \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f:<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" \/>\r\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/src\/favicon.svg\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>My Cool App<\/title>\r\n <\/head>\r\n <body>\r\n <div id=\"root\"><\/div>\r\n <script type=\"module\" src=\"\/src\/main.jsx\"><\/script>\r\n <\/body>\r\n<\/html><\/pre>\n
\u0628\u062f\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u0639\u0628\u0627\u0631\u062a My Cool App \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Title \u062f\u0631 \u0641\u0627\u06cc\u0644 html \u0630\u062e\u06cc\u0631\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0641\u0627\u06cc\u0644 index.html \u0648\u06cc\u0631\u0627\u06cc\u0634\u200c\u0634\u062f\u0647 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f.<\/p>\n
\u062d\u0627\u0644\u0627 \u0627\u06af\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f \u062a\u0627 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0645\u062c\u062f\u062f\u0627\u064b \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f:<\/p>\n
yarn run dev --host<\/pre>\n
\u0628\u0639\u062f \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0645\u062c\u062f\u062f\u0627\u064b \u0622\u062f\u0631\u0633 http:\/\/localhost:3000 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u062a\u0627\u0646 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f. \u0628\u062f\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u0646\u0633\u062e\u0647 \u062c\u062f\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n
![\"\u0628\u0631\u0646\u0627\u0645\u0647](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite5.jpg\" "\\"\u0646\u062a\u06cc\u062c\u0647")
\u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0633\u062e\u0647 \u062c\u062f\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647<\/figcaption><\/figure>\n \u06af\u0627\u0645 \u0634\u0634\u0645: \u06af\u0631\u0641\u062a\u0646 Build \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc<\/b><\/span><\/h2>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0628\u0633\u062a\u0647 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0634\u062f\u0647 \u0648 \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u0627\u200c\u0647\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a. \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 Build\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n
yarn run build<\/pre>\n
\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u067e\u0648\u0634\u0647 dist \u062c\u062f\u06cc\u062f\u06cc \u0628\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc Source \u0628\u0647\u06cc\u0646\u0647\u200c\u0634\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u062f\u0631 \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062e\u0637 \u06a9\u062f\u060c \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n
Output\r\nvite v2.9.1 building for production...\r\n\u2713 33 modules transformed.\r\ndist\/assets\/pencil.4e765d86.png 66.46 KiB\r\ndist\/index.html 0.45 KiB\r\ndist\/assets\/index.e3291b10.css 0.18 KiB \/ gzip: 0.16 KiB\r\ndist\/assets\/index.14619c6f.js 130.65 KiB \/ gzip: 42.34 KiB\r\nDone in 2.50s.<\/pre>\n
\u062d\u0627\u0644\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u067e\u0648\u0634\u0647 dist \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0622\u0646\u0644\u0627\u06cc\u0646 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0627\u0632 \u0633\u0631\u0648\u0631 Apache \u06cc\u0627 Nginx \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0627\u0632 \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a Build \u0648 \u062a\u0648\u0644\u06cc\u062f \u062e\u0648\u062f\u06a9\u0627\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
![\"\u0686\u06af\u0648\u0646\u0647](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/10\/react-project-with-vite7.jpg\" "\\"\u0627\u06cc\u062c\u0627\u062f")
\u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645\u00a0 \u062a\u0627 \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 React \u0628\u0627 Vite<\/figcaption><\/figure>\n \u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/b><\/span><\/h2>\n
\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React\u060c \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0646\u062f. \u0627\u0628\u0632\u0627\u0631 Vite \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u200c\u062a\u0648\u062c\u0647\u200c\u0628\u0647 \u062d\u062c\u0645 \u06a9\u0645 Dependency\u0647\u0627\u06cc \u0622\u0646 \u0648 \u0646\u06cc\u0632 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0641\u0631\u0627\u0648\u0627\u0646\u0634\u060c \u0627\u0632 \u0645\u062d\u0628\u0648\u0628\u06cc\u062a \u0628\u0633\u06cc\u0627\u0631\u06cc \u0628\u0631\u062e\u0648\u0631\u062f\u0627\u0631 \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u0627\u0632 \u0628\u0644\u0627\u06af \u067e\u0627\u0631\u0633 \u067e\u06a9\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647\u200c\u0627\u06cc \u0633\u0627\u062f\u0647 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644\u0627\u064b \u062a\u0635\u0648\u06cc\u0631\u06cc \u0622\u0645\u0648\u0632\u0634 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645. \u0628\u0627 \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/a>\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0646\u062d\u0648\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647\u200c\u0637\u0648\u0631\u06a9\u0627\u0645\u0644 \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u062f.<\/p>\n
\u0633\u0624\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/b><\/span><\/h2>\n
\u06f1. React \u0686\u06cc\u0633\u062a\u061f<\/b><\/span><\/h3>\n
React \u06cc\u06a9\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u200c\u0647\u0627\u06cc \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f JavaScript \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n
\u06f2. Vite \u0686\u06cc\u0633\u062a\u061f<\/b><\/span><\/h3>\n
\u0627\u0632 \u062f\u06cc\u062f\u06af\u0627\u0647 \u0641\u0646\u06cc\u060c Vite \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u200c\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645\u06cc \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u200c\u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627\u200c\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc\u060c \u0627\u0632\u062c\u0645\u0644\u0647 React \u0627\u0633\u062a.<\/p>\n
\u06f3. Yarn \u0686\u06cc\u0633\u062a\u061f<\/b><\/span><\/h3>\n
Yarn \u0633\u06cc\u0633\u062a\u0645 \u067e\u06a9\u06cc\u062c\u06cc\u0646\u06af \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f1\u06f6\u060c \u0641\u06cc\u0633\u0628\u0648\u06a9 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062d\u06cc\u0637 Node.js \u0637\u0631\u0627\u062d\u06cc \u06a9\u0631\u062f.<\/p>\n
\u06f4. Localhost \u06cc\u0639\u0646\u06cc \u0686\u0647\u061f<\/b><\/span><\/h3>\n
\u062f\u0631 \u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\u06cc\u060c Localhost \u0628\u0647 \u0647\u0627\u0633\u062a\u06cc \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0641\u0639\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646\u060c \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u0646\u062f\u060c \u0627\u0632\u200c\u0637\u0631\u06cc\u0642 Localhost \u0622\u0646 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u067e\u0633 \u0627\u0632 \u0639\u06cc\u0628\u200c\u06cc\u0627\u0628\u06cc \u06a9\u0627\u0645\u0644\u060c \u0622\u0646 \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n