Wow, I'm impressed. The real-world applications shown were super helpful. Made abstract ideas feel tangible. Great value!
React Styled Components: تصميم قائم على المكونات باستخدام CSS-in-JS
تعلم كيفية بناء واجهات مستخدم React معيارية وقابلة للصيانة عن طريق كتابة CSS نظيف ومغلف مباشرة داخل مكونات JavaScript الخاصة بك.
-
💬
مدرب ذكاء اصطناعي
اسأل عن أي درس واحصل على إجابة واضحة فورًا، في أي وقت. -
🕐
ابدأ في أي وقت
بلا جداول أو مواعيد نهائية — تعلّم بوتيرتك، وقتما يناسبك. -
🌐
بالعربية
الدروس والمهام والشهادة — كل ذلك بلغتك بالكامل.
حول هذه الدورة
غالبًا ما تؤدي إدارة أوراق الأنماط الضخمة في تطبيقات React المعقدة إلى تضارب أسماء الفئات، وأنماط عامة فوضوية، وصعوبات في الصيانة. يتيح لك الانتقال إلى نموذج تصميم يعتمد على المكونات أولاً كتابة CSS نظيف ومحدد النطاق مباشرة داخل كود JavaScript الخاص بك.
يرشدك هذا المساق المكتوب عبر أساسيات CSS-in-JS باستخدام Styled Components. ستنتقل من أوراق الأنماط الخارجية التقليدية إلى إنشاء مكونات React مكتفية ذاتيًا وقابلة لإعادة الاستخدام بدرجة عالية وتحتوي على أنماطها ومنطقها وسلوكها الخاص. من خلال ممارسة أنماط التصميم الحديثة هذه، ستبني واجهات مستخدم سريعة الاستجابة وديناميكية وقابلة للصيانة دون ضغوط تسرب الأنماط.
ما ستتعلمه:
- فهم المفاهيم الأساسية لـ CSS-in-JS وكيف تعمل قوالب السلاسل ذات العلامات (tagged template literals) في React.
- إنشاء مكونات Styled Components قابلة لإعادة الاستخدام ومغلفة تزيل تضارب أسماء الفئات.
- تطبيق الأنماط الديناميكية عن طريق تمرير props وتكييف الأنماط بناءً على حالة المكون.
- تصميم تخطيطات متجاوبة باستخدام مبادئ التصميم الحديثة التي تعتمد على الجوال أولاً وقواعد التداخل.
- تطبيق الأنماط العامة ومفاتيح الوضع الداكن باستخدام ThemeProvider المدمج.
- تهيئة علامات HTML الدلالية والسمات التي يمكن الوصول إليها داخل مكوناتك المصممة لضمان إمكانية الوصول إلى الويب.
ستبدأ بالتعريفات الأساسية لـ CSS-in-JS قبل الانتقال خطوة بخطوة عبر وراثة الأنماط، وتوسيع المكونات، والـ props الديناميكية. تختتم المادة بمسارات عملية ومكتوبة حول بناء نظام سمات متماسك وتصميم عناصر واجهة مستخدم حديثة يمكن الوصول إليها.
تم تصميم هذه الدورة لمطوري React الذين يرغبون في تحديث سير عملهم في التصميم. يوصى بفهم أساسي لـ React و CSS القياسي، ولكن لا يلزم وجود خبرة سابقة مع Styled Components.
ابدأ القراءة اليوم لترتقي بسير عمل تطوير الواجهة الأمامية لديك باستخدام التصميم الحديث القائم على المكونات.
ما الذي ستحصل عليه
-
📜
شهادة إتمام
أضفها إلى ملفك على LinkedIn -
💬
مدرّس AI شخصي
عالق في دورة؟ اسأل مدرّسك المدمج أي شيء، في أي وقت. -
🎧
النسخة الصوتية مضمَّنة
تعلَّم أثناء تنقُّلك — دون شاشة -
♾️
وصول مدى الحياة
عُد متى شئت، بلا انتهاء -
📱
الهاتف أو الكمبيوتر
يعمل في أي مكان وعلى أي جهاز -
💸
استرداد خلال 14 يومًا
دون أسئلة -
⚡
قصير ومركَّز
2 ساعة 48 دقيقة من المحتوى التطبيقي
شهادة إتمام
كل دورة تكملها على PickAClass تُصدر شهادة كهذه — أصلية، بكودها الخاص، قابلة للتحقّق عبر الرابط، ومفصّلة عمّا أُثبت فعلًا.
P
PickAClass
ملف المهارات · قابل للتحقّق
وثيقة
شهادة إتقان
تشهد هذه الوثيقة بأن
الاسم واللقب
أثبت بنجاح إتقان
React Styled Components: تصميم قائم على المكونات باستخدام CSS-in-JS
المهارات المُثبَتة
✓
تحليل أنماط السلوك
تأسيسي
1.2 ساعة
✓
أطر معمارية لاتخاذ القرارات
متمكّن
1.4 ساعة
✓
تصميم اختبار A/B
متمكّن
1.7 ساعة
✓
كتابة نصوص سلوكية
متقدّم
1.9 ساعة
P
PickAClass — الاسم واللقب
React Styled Components: تصميم قائم على المكونات باستخدام CSS-in-JS
صفحة 2 من 2
تفاصيل الأداء
ملخّص العمل الدراسي
الدورات المكتملة
14 / 14
أسئلة التدريب
26 / 28
الواجبات المُسلَّمة
4 (متوسط 4.5 / 5)
المشروع الختامي
تمت مراجعته — 4.6 / 5
إجمالي التدريب
6.2 ساعة
معيار الأداء
ترتيب الدفعة
ضمن أفضل 12% من 1,625
وقت الإكمال
11 يومًا (الوسيط: 22)
درجة الإتقان
91 / 100
درجة أسئلة التدريب
94%
التحقّق من المهارة
مسار مهارة موثّق
المراجعات (8)
مقدمة جيدة جداً، كانت الأمثلة مفيدة، لكنني أتمنى لو كان هناك المزيد من المواد التدريبية، قيمة جيدة مقابل التكلفة.
Not sure this was the best way to learn this. The examples felt a bit dated, and the overall structure was confusing. I needed external resources to make sense of it.
Good introduction. It covers the basics effectively, but don't expect to become an expert overnight. More examples would have been nice.
Fantastic value here. The examples used were super helpful for understanding the core ideas. Definitely worth the time.
مقدمة جيدة ، لقد أقدر الخطوات الواضحة ، على الرغم من أن بعض الوحدات اللاحقة كان يمكن أن تستخدم المزيد من الأمثلة.
لقد أثار إعجابي كيف تم وضع هذا معًا. كانت الأمثلة مثالية، والبنية العامة جعلت الأفكار المعقدة سهلة الفهم. أحببت ذلك!
أنا لست متأكدا أن هذا للمبتدئين تماما فهو يفترض بعض المعرفة السابقة التي لم يتم تعليمها بشكل صريح بعض الأمثلة كانت مربكة
المتعلمون أخذوا أيضًا
🎓 بشهادة
تطوير تطبيقات الويب مع Hooks و Redux
شهادة
تطبيق عملي
$29.99
→
🎓 بشهادة
تطوير الويب باستخدام React: بناء تطبيقات واجهة أمامية تفاعلية
شهادة
تطبيق عملي
$29.99
→
🎓 بشهادة
تطوير Vue.js لتطبيقات الويب الحديثة
شهادة
تطبيق عملي
$29.99
→
🏆 الأكثر شعبية
🎓 بشهادة
مشروع التخرج لتطبيق JavaScript كامل المكدس
شهادة
تطبيق عملي
$29.99
→
الأسئلة الشائعة
ما الذي أحتاجه لأخذ هذه الدورة؟ +
يكفي هاتف أو كمبيوتر متصل بالإنترنت. بدون تثبيتات أو أجهزة خاصة.
كيف يمكنني الدفع؟ +
بالبطاقة عبر Stripe. لا نخزن بيانات البطاقة — يتولى Stripe ذلك بأمان.
هل يمكنني استرداد المال؟ +
نعم — استرداد كامل خلال 14 يومًا، دون أسئلة.
إلى متى يستمر وصولي؟ +
إلى الأبد. بمجرد الشراء، الدورة لك تعود إليها متى شئت.
هل سأحصل على شهادة؟ +
نعم. عند الإتمام ستحصل على شهادة يمكنك إضافتها إلى ملفك في LinkedIn.
مصمَّم للعاملين في
التقنية
التصميم
المالية
التسويق
الرعاية الصحية
التعليم
الضيافة
التصنيع
10
احصل على 10 دورات شهريًا
يحصل الأعضاء كل شهر على 10 دورات من اختيارهم مقابل $0. لا رسوم على الدورات — تدفع فقط ثمن الاشتراك.
$149.99 / شهريًا
- ✓ 10 دورات كل شهر
- ✓ ألغِ في أي وقت
يتجدد شهريًا. تنتهي صلاحية الدورات غير المستخدمة في نهاية كل شهر فوترة.