{"id":6743,"date":"2026-07-29T11:00:44","date_gmt":"2026-07-29T07:30:44","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6743"},"modified":"2026-07-29T16:15:08","modified_gmt":"2026-07-29T12:45:08","slug":"%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84%d8%af%d9%87%db%8c-%d8%a8%d9%87-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-react","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%d8%b3%d8%aa%d8%a7%db%8c%d9%84%d8%af%d9%87%db%8c-%d8%a8%d9%87-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%db%8c-react\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React"},"content":{"rendered":"

\u0645\u0642\u062f\u0645\u0647<\/strong><\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0633\u0647 \u0631\u0648\u0634 \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0631\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0633\u0627\u062f\u0647 (Cascading Style Sheets)\u060c \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646\u200c\u062e\u0637\u06cc (Inline Styles) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc\u060c \u0648 JSS (\u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a CSS \u0628\u0627 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a). \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0645\u0632\u0627\u06cc\u0627 \u0648 \u0645\u0639\u0627\u06cc\u0628 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u062f\u061b \u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0645\u062d\u0627\u0641\u0638\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u062a\u062f\u0627\u062e\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06cc\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 Props \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 (Dynamic) \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0645\u0627 \u062a\u0645\u0627\u0645 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062a\u0631\u06a9 \u062f\u0627\u0631\u0646\u062f: \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645\u0627\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f\u060c \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06cc\u0627 \u062d\u062a\u06cc \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0645\u0631\u062a\u0628\u0637 \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

<\/div>\n

\u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc (Properties) CSS \u0627\u0633\u062a\u0648\u0627\u0631 \u0647\u0633\u062a\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u0633\u0627\u062f\u0647 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 (Runtime Data)\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u0627 Import \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627\u0634\u0646\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0631\u0648\u0646\u200c\u062e\u0637\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646\u200c\u0647\u0627 \u0627\u0632 \u0646\u0627\u0645 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc CSS \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0644\u06cc\u062f (Key) \u0648 \u0627\u0632 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0642\u062f\u0627\u0631 (Value) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u06af\u0631 \u0628\u0647 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0648 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0634\u062e\u0635 \u062b\u0627\u0644\u062b (Third-party) \u0645\u0627\u0646\u0646\u062f JSS \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 CSS \u0628\u0627 \u0633\u06cc\u0646\u062a\u06a9\u0633 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0641\u0647\u0648\u0645 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc CSS-in-JS \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

<\/div>\n

\u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u060c \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert (\u0647\u0634\u062f\u0627\u0631) \u0646\u0645\u0648\u0646\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0633\u062a\u0647 \u0628\u0647 Prop \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc\u060c \u043b\u0438\u0431\u043e \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0648\u0641\u0642\u06cc\u062a (Success) \u06cc\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062e\u0637\u0627 (Error) \u0631\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0647\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f (Children) \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u062f\u0627\u062e\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u0645\u062d\u062a\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0633\u062a\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0646\u062f\u0627\u0631\u06cc\u062f. \u067e\u0633 \u0627\u0632 \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc (Refactor) \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u062a\u0627 \u0634\u0628\u0627\u0647\u062a\u200c\u0647\u0627 \u0648 \u062a\u0641\u0627\u0648\u062a\u200c\u0647\u0627\u06cc \u0628\u06cc\u0646 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u0647\u0627 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

<\/div>\n

\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/strong><\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u06a9\u0647 Node.js \u0631\u0648\u06cc \u0622\u0646 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f. \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627 Node.js \u0646\u0633\u062e\u0647 20.x.x \u0648 npm \u062a\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u0622\u0646 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645\u200c\u0639\u0627\u0645\u0644 \u0627\u0648\u0628\u0648\u0646\u062a\u0648 24.04\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0631\u0633\u0645\u06cc \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Node.js \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

<\/div>\n

\u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 Create React App \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0633\u0627\u0632\u06cc\u062f. \u0634\u0645\u0627 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u0648 \u0628\u0647 \u062f\u0627\u0646\u0634 \u067e\u0627\u06cc\u0647\u200c\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c HTML \u0648 CSS \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n

<\/div>\n

\u0645\u0631\u062d\u0644\u0647 \u06f1 \u2014 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062e\u0627\u0644\u06cc<\/h3>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Create React App \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u067e\u0631\u0648\u0698\u0647 \u0646\u0645\u0648\u0646\u0647 \u0648 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0622\u0646 \u0631\u0627 \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n

<\/div>\n

\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
npx create-react-app styling-tutorial<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0646\u0635\u0628 \u067e\u0631\u0648\u0698\u0647\u060c \u0648\u0627\u0631\u062f \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0622\u0646 \u0634\u0648\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
cd styling-tutorial<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

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

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
npm start<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0645\u062d\u0644\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a. \u0627\u06af\u0631 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u0646\u0634\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0622\u062f\u0631\u0633 http:\/\/localhost:3000\/<\/code> \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0627\u06cc\u0646 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u0631\u06cc\u0645\u0648\u062a (\u0645\u0627\u0646\u0646\u062f \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f) \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0622\u062f\u0631\u0633 \u0628\u0647 \u0635\u0648\u0631\u062a http:\/\/your_domain:3000<\/code> \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n

<\/div>\n

\u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0628\u0627 \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0633\u0627\u062f\u0647 React \u06a9\u0647 \u0628\u062e\u0634\u06cc \u0627\u0632 Create React App \u0627\u0633\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

<\/div>\n

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

<\/div>\n

\u0627\u0628\u062a\u062f\u0627 \u0641\u0627\u06cc\u0644 src\/App.js<\/code> \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0645\u062a\u0646 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u06cc\u0634\u0647 (Root) \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u062a\u0632\u0631\u06cc\u0642 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/App.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0641\u0627\u06cc\u0644\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import logo from ‘.\/logo.svg’;<\/div>\n
import ‘.\/App.css’;<\/div>\n
<\/div>\n
function App() {<\/div>\n
return (<\/div>\n
<div className=”App”><\/div>\n
<header className=”App-header”><\/div>\n
<img src={logo} className=”App-logo” alt=”logo” \/><\/div>\n
<p><\/div>\n
Edit <code>src\/App.js<\/code> and save to reload.<\/div>\n
<\/p><\/div>\n
<a<\/div>\n
className=”App-link”<\/div>\n
href=”https:\/\/reactjs.org”<\/div>\n
target=”_blank”<\/div>\n
rel=”noopener noreferrer”<\/div>\n
><\/div>\n
Learn React<\/div>\n
<\/a><\/div>\n
<\/header><\/div>\n
<\/div><\/div>\n
);<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u062e\u0637 import logo from '.\/logo.svg';<\/code> \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u0633\u067e\u0633 \u062a\u0645\u0627\u0645 \u0645\u0648\u0627\u0631\u062f \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u062f\u0633\u062a\u0648\u0631 return<\/code> \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06cc\u06a9 \u0645\u062c\u0645\u0648\u0639\u0647 \u062a\u06af \u062e\u0627\u0644\u06cc <><\/><\/code> \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0645\u0639\u062a\u0628\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0686\u06cc\u0632\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0646\u0645\u06cc\u200c\u062f\u0647\u062f. \u06a9\u062f \u0646\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import ‘.\/App.css’;<\/div>\n
<\/div>\n
function App() {<\/div>\n
return <><\/>;<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0632 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0645\u062a\u0646 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f.<\/p>\n

<\/div>\n

\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0644\u0648\u06af\u0648\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u0634\u0645\u0627 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u0648 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0634\u062f\u0647 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
rm src\/logo.svg<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n

\u0627\u06af\u0631 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u062f\u060c \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062e\u0627\u0644\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n

<\/div>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0646\u0645\u0648\u0646\u0647 \u0631\u0627 \u067e\u0627\u06a9 \u06a9\u0631\u062f\u06cc\u062f\u060c \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0627\u06cc\u0644 \u0633\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0632\u0648\u0644\u0647 \u0648 \u0645\u0633\u062a\u0642\u0644 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f. \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 components<\/code> \u062f\u0631 \u0645\u0633\u06cc\u0631 src<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
mkdir src\/components<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc App<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
mkdir src\/components\/App<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u062a\u0645\u0627\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc App<\/code> \u0631\u0627 \u0628\u0647 \u0622\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
mv src\/App.* src\/components\/App<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0633\u067e\u0633\u060c \u0645\u0633\u06cc\u0631 Import \u0646\u0633\u0628\u06cc \u062f\u0631 \u0641\u0627\u06cc\u0644 index.js<\/code> \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/index.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u062f\u0633\u062a\u0648\u0631 Import \u0628\u0627\u06cc\u062f \u0628\u0647 \u0641\u0627\u06cc\u0644 App.js<\/code> \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc App<\/code> \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/index.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import ReactDOM from ‘react-dom’;<\/div>\n
import ‘.\/index.css’;<\/div>\n
import App from ‘.\/components\/App\/App’;<\/div>\n
import * as serviceWorker from ‘.\/serviceWorker’;<\/div>\n
<\/div>\n
ReactDOM.render(<\/div>\n
<React.StrictMode><\/div>\n
<App \/><\/div>\n
<\/React.StrictMode>,<\/div>\n
document.getElementById(‘root’)<\/div>\n
);<\/div>\n
<\/div>\n
\/\/ If you want your app to work offline and load faster, you can change<\/div>\n
\/\/ unregister() to register() below. Note this comes with some pitfalls.<\/div>\n
\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA<\/div>\n
serviceWorker.unregister();<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f. \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0634\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

<\/div>\n
\n

\u0645\u0631\u062d\u0644\u0647 \u06f2 \u2014 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0627 CSS \u0633\u0627\u062f\u0647<\/h3>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0646\u0645\u0648\u0646\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u0647\u0634\u062f\u0627\u0631 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0634\u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u0633\u0627\u062f\u0647\u060c \u0622\u0646 \u0631\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Import \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n

<\/div>\n

\u0627\u0628\u062a\u062f\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u062c\u062f\u06cc\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
mkdir src\/components\/Alert<\/div>\n
nano src\/components\/Alert\/Alert.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u0627\u06cc\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0639\u0628\u0627\u0631\u062a Alert<\/code> \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
<\/div>\n
export default function Alert() {<\/div>\n
return <div>Alert<\/div><\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 App.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/App\/App.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0631\u0627 Import \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0627\u062e\u0644 \u06cc\u06a9 <div><\/code> \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import ‘.\/App.css’;<\/div>\n
<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
<\/div>\n
function App() {<\/div>\n
return (<\/div>\n
<div className=”wrapper”><\/div>\n
<Alert \/><\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0628\u0646\u062f\u06cc\u062f. \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0641\u0631\u0634 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0634\u0645\u0627 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n

<\/div>\n

\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 App.css<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0622\u0646 \u06a9\u0645\u06cc Padding \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/App\/App.css<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06a9\u062f \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0631\u0627 \u0628\u0627 \u0642\u0627\u0646\u0648\u0646 \u0632\u06cc\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/App\/App.css<\/strong><\/p>\n

\n
css<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
.wrapper<\/span> {<\/div>\n
padding<\/span>: 20<\/span>px<\/span>;<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0648\u0642\u062a\u06cc \u0627\u0632 Create React App \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c webpack \u0641\u0627\u06cc\u0644 CSS \u0627\u06cc \u06a9\u0647 Import \u0634\u062f\u0647 \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062a\u06af <style><\/code> \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f CSS \u0631\u0627 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f. \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u062f\u0627\u0631\u0627\u06cc \u062f\u0627\u0645\u0646\u0647 \u0633\u0631\u0627\u0633\u0631\u06cc (Global Scope) \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u062f\u0627\u062e\u0644 \u0646\u0627\u0645 (Name Conflicts) \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n

<\/div>\n

\u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 Alert.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/Alert\/Alert.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06a9\u062f\u0647\u0627\u06cc\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 children<\/code>\u060c type<\/code> \u0648 title<\/code> \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Props \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import PropTypes from ‘prop-types’;<\/div>\n
<\/div>\n
export default function Alert({ children, title, type }) {<\/div>\n
return (<\/div>\n
<div><\/div>\n
<h2>{title}<\/h2><\/div>\n
{children}<\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n
<\/div>\n
Alert.propTypes = {<\/div>\n
children: PropTypes.oneOfType([<\/div>\n
PropTypes.arrayOf(PropTypes.element),<\/div>\n
PropTypes.element.isRequired<\/div>\n
]),<\/div>\n
title: PropTypes.string.isRequired,<\/div>\n
type: PropTypes.string.isRequired,<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 App.js<\/code> \u0631\u0627 \u0622\u067e\u062f\u06cc\u062a \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/App\/App.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06cc\u06a9 \u0647\u0634\u062f\u0627\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0637\u0644\u0627\u0639 \u062f\u0647\u062f \u062a\u0644\u0627\u0634 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0627\u0631\u062f \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0646\u0627\u0645\u0648\u0641\u0642 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import ‘.\/App.css’;<\/div>\n
<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
<\/div>\n
function App() {<\/div>\n
return (<\/div>\n
<div className=”wrapper”><\/div>\n
<Alert title=”Items Not Added” type=”error”><\/div>\n
<div>Your items are out of stock.<\/div><\/div>\n
<\/Alert><\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u0641\u0632\u0648\u062f\u0646 CSS \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/strong> \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u06cc\u06a9 \u062e\u0637\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u06cc\u06a9 Border \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u0648 \u0631\u0646\u06af \u0622\u0646 \u0631\u0627 \u0642\u0631\u0645\u0632 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0627\u0645\u0627 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u0634\u06a9\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f: \u0634\u0645\u0627 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633 wrapper<\/code> \u0628\u0631\u0627\u06cc <div><\/code> \u0628\u06cc\u0631\u0648\u0646\u06cc \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0646\u0627\u0645 \u0642\u0628\u0644\u0627\u064b \u062a\u0648\u0633\u0637 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a App<\/code> \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

<\/div>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u067e\u06cc\u0634\u0648\u0646\u062f \u0646\u0627\u0645 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0647 \u06a9\u0644\u0627\u0633 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633 \u062c\u062f\u06cc\u062f \u0634\u0645\u0627 alert-wrapper<\/code> \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0641\u0627\u06cc\u0644 Alert.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/Alert\/Alert.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06a9\u062f\u0647\u0627\u06cc \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import PropTypes from ‘prop-types’;<\/div>\n
import ‘.\/Alert.css’;<\/div>\n
<\/div>\n
export default function Alert({ children, type, title }) {<\/div>\n
return(<\/div>\n
<div className={`alert-wrapper ${type}`}><\/div>\n
<h2>{title}<\/h2><\/div>\n
{children}<\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0633\u067e\u0633 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 CSS \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/Alert\/Alert.css<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.css<\/strong><\/p>\n

\n
css<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
.alert-wrapper {<\/div>\n
padding: 15px;<\/div>\n
margin-bottom: 15px;<\/div>\n
}<\/div>\n
<\/div>\n
.alert-wrapper h2 {<\/div>\n
margin: 0 0 10px 0;<\/div>\n
}<\/div>\n
<\/div>\n
.alert-wrapper.success {<\/div>\n
border: #6DA06F solid 1px;<\/div>\n
}<\/div>\n
<\/div>\n
.success h2 {<\/div>\n
color: #6DA06F;<\/div>\n
}<\/div>\n
<\/div>\n
.alert-wrapper.error {<\/div>\n
border: #F56260 solid 1px;<\/div>\n
}<\/div>\n
<\/div>\n
.error h2 {<\/div>\n
color: #F56260;<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u06cc\u0627\u0645 \u0645\u0648\u0641\u0642\u06cc\u062a<\/strong> \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u062f\u0631\u0648\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
mkdir src\/components\/CartSuccess<\/div>\n
nano src\/components\/CartSuccess\/CartSuccess.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c Alert<\/code> \u0631\u0627 Import \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/CartSuccess\/CartSuccess.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
import ‘.\/CartSuccess.css’;<\/div>\n
<\/div>\n
export default function CartSuccess() {<\/div>\n
return(<\/div>\n
<Alert title=”Added to Cart” type=”success”><\/div>\n
<div className=”cart-success-wrapper”><\/div>\n
<h2><\/div>\n
You have added 3 items:<\/div>\n
<\/h2><\/div>\n
<div className=”item”><\/div>\n
<div>Bananas<\/div><\/div>\n
<div>Quantity: 2<\/div><\/div>\n
<\/div><\/div>\n
<div className=”item”><\/div>\n
<div>Lettuce<\/div><\/div>\n
<div>Quantity: 1<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/Alert><\/div>\n
)<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 CartSuccess.css<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/CartSuccess\/CartSuccess.css<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

styling-tutorial\/src\/components\/CartSuccess\/CartSuccess.css<\/strong><\/p>\n

\n
css<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
.cart-success-wrapper {<\/div>\n
border-top: black solid 1px;<\/div>\n
display: flex;<\/div>\n
flex-wrap: wrap;<\/div>\n
}<\/div>\n
<\/div>\n
.cart-success-wrapper h2 {<\/div>\n
width: 100%;<\/div>\n
}<\/div>\n
<\/div>\n
.item {<\/div>\n
margin-right: 20px;<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u06a9\u0646\u0648\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 App.js<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/App\/App.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

styling-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import ‘.\/App.css’;<\/div>\n
<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
import CartSuccess from ‘..\/CartSuccess\/CartSuccess’;<\/div>\n
<\/div>\n
function App() {<\/div>\n
return(<\/div>\n
<div className=”wrapper”><\/div>\n
<Alert title=”Items Not Added” type=”error”><\/div>\n
<div>Your items are out of stock.<\/div><\/div>\n
<\/Alert><\/div>\n
<CartSuccess \/><\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0646\u06af \u0648 \u067e\u06cc\u0627\u0645 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647\u200c\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a. \u0642\u0627\u0646\u0648\u0646 <h2><\/code> \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Alert<\/code> \u0631\u0648\u06cc \u062a\u06af <h2><\/code> \u062f\u0631 children<\/code> \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0628\u0627 CSS \u062e\u0627\u0644\u0635\u060c \u0642\u0627\u0646\u0648\u0646 <h2><\/code> \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 Alert.css<\/code> \u06a9\u0645\u06cc \u062e\u0627\u0635\u200c\u062a\u0631 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/Alert\/Alert.css<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u0632 \u062a\u0631\u06a9\u06cc\u0628\u200c\u06a9\u0646\u0646\u062f\u0647 \u0641\u0631\u0632\u0646\u062f (><\/code>) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.css<\/strong><\/p>\n

\n
css<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
.alert-wrapper {<\/div>\n
padding: 15px;<\/div>\n
margin-bottom: 15px;<\/div>\n
}<\/div>\n
<\/div>\n
.alert-wrapper > h2 {<\/div>\n
margin: 0 0 10px 0;<\/div>\n
}<\/div>\n
<\/div>\n
.alert-wrapper.success {<\/div>\n
border: #6da06f solid 1px;<\/div>\n
}<\/div>\n
<\/div>\n
.success > h2 {<\/div>\n
color: #6da06f;<\/div>\n
}<\/div>\n
<\/div>\n
.alert-wrapper.error {<\/div>\n
border: #f56260 solid 1px;<\/div>\n
}<\/div>\n
<\/div>\n
.error > h2 {<\/div>\n
color: #f56260;<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n
\n

\u0645\u0631\u062d\u0644\u0647 \u06f3 \u2014 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0627 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 (Style Objects)<\/h3>\n

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

<\/div>\n

\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u060c \u0627\u0628\u062a\u062f\u0627 \u0641\u0627\u06cc\u0644 App.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/App\/App.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0641\u0627\u06cc\u0644 CSS Import \u0634\u062f\u0647 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u0622\u0628\u062c\u06a9\u062a \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
import CartSuccess from ‘..\/CartSuccess\/CartSuccess’;<\/div>\n
<\/div>\n
function App() {<\/div>\n
const wrapper = {<\/div>\n
padding: 20<\/div>\n
};<\/div>\n
<\/div>\n
return(<\/div>\n
<div style={wrapper}><\/div>\n
<Alert title=”Items Not Added” type=”error”><\/div>\n
<div>Your items are out of stock.<\/div><\/div>\n
<\/Alert><\/div>\n
<CartSuccess \/><\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0633\u067e\u0633 CartSuccess<\/code> \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u06a9\u0646\u06cc\u062f. \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/CartSuccess\/CartSuccess.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

CSS Import \u0634\u062f\u0647 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0628\u062c\u06a9\u062a \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/CartSuccess\/CartSuccess.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
<\/div>\n
export default function CartSuccess() {<\/div>\n
const styles = {<\/div>\n
header: {<\/div>\n
width: ‘100%’<\/div>\n
},<\/div>\n
item: {<\/div>\n
marginRight: 20<\/div>\n
},<\/div>\n
wrapper: {<\/div>\n
borderTop: ‘black solid 1px’,<\/div>\n
display: ‘flex’,<\/div>\n
flexWrap: ‘wrap’<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
return(<\/div>\n
<Alert title=”Added to Cart” type=”success”><\/div>\n
<div style={styles.wrapper}><\/div>\n
<h2 style={styles.header}><\/div>\n
You have added 3 items:<\/div>\n
<\/h2><\/div>\n
<div style={styles.item}><\/div>\n
<div>Bananas<\/div><\/div>\n
<div>Quantity: 2<\/div><\/div>\n
<\/div><\/div>\n
<div style={styles.item}><\/div>\n
<div>Lettuce<\/div><\/div>\n
<div>Quantity: 1<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/Alert><\/div>\n
)<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0641\u0631\u0645\u062a camelCase (\u0645\u062b\u0644 marginRight<\/code> \u0628\u0647 \u062c\u0627\u06cc margin-right<\/code>) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

<\/div>\n

\u0633\u067e\u0633 \u0641\u0627\u06cc\u0644 Alert.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/Alert\/Alert.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

import '.\/Alert.css';<\/code> \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632 Prop \u0646\u0648\u0639 (type) \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u067e\u0648\u06cc\u0627\u06cc \u0631\u0646\u06af \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import PropTypes from ‘prop-types’;<\/div>\n
<\/div>\n
export default function Alert({ children, type, title }) {<\/div>\n
const colors = {<\/div>\n
success: ‘#6da06f’,<\/div>\n
error: ‘#f56260’,<\/div>\n
}<\/div>\n
<\/div>\n
const style = {<\/div>\n
heading: {<\/div>\n
color: colors[type],<\/div>\n
margin: ‘0 0 10px 0’,<\/div>\n
},<\/div>\n
wrapper: {<\/div>\n
border: `${colors[type]} solid 1px`,<\/div>\n
marginBottom: 15,<\/div>\n
padding: 15,<\/div>\n
position: ‘relative’,<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
return(<\/div>\n
<div style={style.wrapper}><\/div>\n
<h2 style={style.heading}>{title}<\/h2><\/div>\n
{children}<\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n
\n

\u0645\u0631\u062d\u0644\u0647 \u06f4 \u2014 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0627 JSS<\/h3>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062d\u0628\u0648\u0628 JSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f. JSS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f CSS-in-JS \u0627\u0633\u062a. \u0645\u0632\u06cc\u062a \u0627\u0635\u0644\u06cc \u0622\u0646 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 (Dynamic) \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u0632 \u062a\u062f\u0627\u062e\u0644 \u0646\u0627\u0645\u200c\u0647\u0627 \u0628\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

<\/div>\n

\u0627\u0628\u062a\u062f\u0627 \u0646\u0633\u062e\u0647 \u0645\u062e\u0635\u0648\u0635 React \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 JSS \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u06cc\u0631\u0648\u0631 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
npm install react-jss –registry=https:\/\/npm.parmincloud.ir<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u067e\u0633 \u0627\u0632 \u0646\u0635\u0628\u060c \u0641\u0627\u06cc\u0644 App.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/App\/App.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JSS\u060c \u0628\u0627\u06cc\u062f \u062a\u0627\u0628\u0639 createUseStyles<\/code> \u0631\u0627 Import \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 Hook \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/App\/App.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import { createUseStyles } from ‘react-jss’;<\/div>\n
<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
import CartSuccess from ‘..\/CartSuccess\/CartSuccess’;<\/div>\n
<\/div>\n
const useStyles = createUseStyles({<\/div>\n
wrapper: {<\/div>\n
padding: 20,<\/div>\n
}<\/div>\n
});<\/div>\n
<\/div>\n
function App() {<\/div>\n
const classes = useStyles()<\/div>\n
return(<\/div>\n
<div className={classes.wrapper}><\/div>\n
<Alert title=”Items Not Added” type=”error”><\/div>\n
<div>Your items are out of stock.<\/div><\/div>\n
<\/Alert><\/div>\n
<CartSuccess \/><\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n
<\/div>\n
export default App;<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u06a9\u0646\u0648\u0646 CartSuccess.js<\/code> \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/CartSuccess\/CartSuccess.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u06cc\u06a9 Hook \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 createUseStyles<\/code> \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u0639\u0645\u0627\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u0648\u06cc \u062a\u06af\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f (\u0645\u062b\u0644 <h2><\/code> \u062f\u0627\u062e\u0644 wrapper)\u060c \u0627\u0632 \u0639\u0644\u0627\u0645\u062a &<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/CartSuccess\/CartSuccess.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import { createUseStyles } from ‘react-jss’;<\/div>\n
import Alert from ‘..\/Alert\/Alert’;<\/div>\n
<\/div>\n
const useStyles = createUseStyles({<\/div>\n
item: {<\/div>\n
marginRight: 20<\/div>\n
},<\/div>\n
wrapper: {<\/div>\n
borderTop: ‘black solid 1px’,<\/div>\n
display: ‘flex’,<\/div>\n
flexWrap: ‘wrap’,<\/div>\n
‘& h2’: {<\/div>\n
width: ‘100%’<\/div>\n
}<\/div>\n
}<\/div>\n
})<\/div>\n
<\/div>\n
export default function CartSuccess() {<\/div>\n
const classes = useStyles();<\/div>\n
return(<\/div>\n
<Alert title=”Added to Cart” type=”success”><\/div>\n
<div className={classes.wrapper}><\/div>\n
<h2><\/div>\n
You have added 3 items:<\/div>\n
<\/h2><\/div>\n
<div className={classes.item}><\/div>\n
<div>Bananas<\/div><\/div>\n
<div>Quantity: 2<\/div><\/div>\n
<\/div><\/div>\n
<div className={classes.item}><\/div>\n
<div>Lettuce<\/div><\/div>\n
<div>Quantity: 1<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/Alert><\/div>\n
)<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0627\u06af\u0631 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0648\u062c\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 wrapper<\/code> \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a App<\/code>\u060c \u062a\u062f\u0627\u062e\u0644\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f. JSS \u0646\u0627\u0645\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633 \u06cc\u06a9\u062a\u0627\u06cc\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

<\/div>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0627 \u067e\u0627\u0633 \u062f\u0627\u062f\u0646 Props \u062f\u0631 JSS\u060c \u0641\u0627\u06cc\u0644 Alert.js<\/code> \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n

<\/div>\n
\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
nano src\/components\/Alert\/Alert.js<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0622\u0628\u062c\u06a9\u062a \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u06a9\u062f \u0642\u0628\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062a\u0627\u0628\u0639 createUseStyles<\/code> \u067e\u0627\u0633 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645. \u0628\u0631\u0627\u06cc \u067e\u0627\u0633 \u062f\u0627\u062f\u0646 Props\u060c \u0642\u0627\u0646\u0648\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n

<\/div>\n

styling-tutorial\/src\/components\/Alert\/Alert.js<\/strong><\/p>\n

\n
javascript<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
\n
\n
import React from ‘react’;<\/div>\n
import PropTypes from ‘prop-types’;<\/div>\n
import { createUseStyles } from ‘react-jss’;<\/div>\n
<\/div>\n
const colors = {<\/div>\n
success: ‘#6da06f’,<\/div>\n
error: ‘#f56260’,<\/div>\n
};<\/div>\n
<\/div>\n
const useStyles = createUseStyles({<\/div>\n
wrapper: {<\/div>\n
border: ({ type }) => `${colors[type]} solid 1px`,<\/div>\n
marginBottom: 15,<\/div>\n
padding: 15,<\/div>\n
position: ‘relative’,<\/div>\n
‘& > h2’: {<\/div>\n
color: ({ type }) => colors[type],<\/div>\n
margin: [0, 0, 10, 0],<\/div>\n
}<\/div>\n
}<\/div>\n
});<\/div>\n
<\/div>\n
export default function Alert({ children, type, title }) {<\/div>\n
const classes = useStyles({ type })<\/div>\n
return(<\/div>\n
<div className={classes.wrapper}><\/div>\n
<h2>{title}<\/h2><\/div>\n
{children}<\/div>\n
<\/div><\/div>\n
)<\/div>\n
}<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n

\u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062a\u06af <h2><\/code> \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f (\u0645\u0627\u0646\u0646\u062f \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u06f2 \u062f\u0627\u0634\u062a\u06cc\u0645)\u060c \u0639\u0644\u0627\u0645\u062a ><\/code> \u0631\u0627 \u0628\u0647 & > h2<\/code> \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n

<\/div>\n

\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/strong><\/p>\n

\u062f\u0631 \u0637\u0648\u0644 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0634\u0645\u0627 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0648 JSS \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f CSS \u0647\u0633\u062a\u0646\u062f\u060c \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u0646\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc (Props)\u060c \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u067e\u0648\u06cc\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u0646\u062f.<\/p>\n

<\/div>\n

\u0647\u0645\u0627\u0646\u0646\u062f \u0628\u06cc\u0634\u062a\u0631 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc React\u060c \u0647\u06cc\u0686 \u0631\u0627\u0647\u200c\u062d\u0644 \u0648\u0627\u062d\u062f \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f. \u062f\u0631 \u0639\u0648\u0636\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06af\u0632\u06cc\u0646\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u062a\u0637\u0628\u06cc\u0642 (Best Fit) \u0631\u0627 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0686\u06cc\u0632\u06cc \u0633\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627 \u0631\u0634\u062f \u067e\u0631\u0648\u0698\u0647 \u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u0632\u0627\u0645\u0627\u062a\u060c \u06a9\u062f\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0637\u0645\u0626\u0646 \u0647\u0633\u062a\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u0627\u0646 \u0628\u0647 \u0627\u0647\u062f\u0627\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0634\u0645\u0627 \u067e\u0627\u0633\u062e \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n

\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 \u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n","protected":false},"excerpt":{"rendered":"

\u0645\u0642\u062f\u0645\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0633\u0647 \u0631\u0648\u0634 \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0631\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a: \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0633\u0627\u062f\u0647 (Cascading Style Sheets)\u060c \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646\u200c\u062e\u0637\u06cc (Inline Styles) \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0628\u062c\u06a9\u062a\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc\u060c \u0648 JSS (\u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a CSS \u0628\u0627 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a). \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0645\u0632\u0627\u06cc\u0627 \u0648 \u0645\u0639\u0627\u06cc\u0628 \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u062f\u061b \u0628\u0631\u062e\u06cc \u0627\u0632 …<\/p>\n","protected":false},"author":9,"featured_media":6744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[190],"tags":[],"class_list":["post-6743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=6743"}],"version-history":[{"count":0,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6743\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6744"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}