رد فعل البرنامج التعليمي الجزء 7: أنماط مضمنة

اليوم ، في الجزء التالي من دورة React ، سنتحدث عن الأنماط المضمّنة.



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر

الدرس 15. الأنماط المدمجة

→ الأصل

في نهاية الدرس الأخير ، أنشأنا مكونًا يحلل وقت اليوم ويعرض تحية مقابلة. فيما يلي index.js الملف index.js الكامل الذي يقوم بتنفيذ هذه الوظيفة:

 import React from "react" import ReactDOM from "react-dom" function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

نحتاج الآن إلى تصميم ما يعرضه هذا الرمز على الصفحة. في الوقت نفسه ، سنستخدم نهجًا هنا يختلف عن تبسيط العناصر التي تم بحثها مسبقًا باستخدام فئات CSS. وهي نتحدث عن استخدام style سمة HTML. دعونا نرى ما يحدث إذا كنت تستخدم هذا التصميم:

 <h1 style="color: #FF8C00">Good {timeOfDay}!</h1> 

لا شيء جيد حقا. لن يصل النص إلى الصفحة ؛ بدلاً من ذلك ، سيتم عرض رسالة خطأ. يتلخص جوهرها في أنه ، عند إعداد الأنماط ، لا يُتوقع أن تكون قيمة سلسلة ، بل كائن يحتوي على أزواج من : النموذج : ، حيث تكون المفاتيح هي أسماء خصائص CSS ، والقيم هي قيمها.

عند محاولة استخدام سمات HTML في كود JSX ، يجب ألا ننسى أن ما نعمل معه ، على الرغم من أنه يبدو ك HTML رمز عادي ، ليس كذلك. نتيجة لذلك ، قد يختلف الشكل أو هذا التصميم هنا عما هو مقبول في HTML. في هذه الحالة ، نحتاج إلى كائن JavaScript عادي يحتوي على وصف للأنماط. مسلحين بهذه الفكرة ، نعيد كتابة جزء الشفرة أعلاه كما يلي:

 <h1 style={color: "#FF8C00"}>Good {timeOfDay}!</h1> 

لذلك ، لسوء الحظ ، لن يعمل رمزنا أيضًا. نتيجة لتنفيذه ، سيتم عرض رسالة خطأ مرة أخرى ، على الرغم من أنها ليست مماثلة لآخر مرة. تشير الآن إلى أنه عندما يتوقع النظام شريحة مجعدة ، فإنه يجد شيئًا آخر. لحل هذه المشكلة ، عليك أن تتذكر ما تحدثنا عنه في الدرس السابق. وهي أن شفرة JavaScript المضمنة في JSX يجب أن تكون مرفقة بأقواس مجعد. يتم استخدام الأقواس المتعرجة الموجودة بالفعل في الكود الخاص بنا لوصف الكائن الحرفي ، وليس لتمييز كود JS. دعونا إصلاح هذا:

 <h1 style={{color: "#FF8C00"}}>Good {timeOfDay}!</h1> 

الآن المكون يشكل بالضبط ما هو مطلوب على الصفحة.


نص منمق معروض على الصفحة بواسطة المكون

ماذا لو قررنا متابعة تصميم هذا النص؟ للقيام بذلك ، نحتاج أن نتذكر أننا نصف الأنماط في كائن JS ، مما يعني أننا بحاجة إلى إضافة أزواج : إضافية إلى هذا الكائن. على سبيل المثال ، سنحاول تصميم خلفية النص بهذه الطريقة باستخدام background-color خاصية CSS واستكمال الكود مثل هذا:

 <h1 style={{color: "#FF8C00", background-color: "#FF2D00"}}>Good {timeOfDay}!</h1> 

سينتج عن هذا التصميم رسالة خطأ. النقطة هنا هي أننا نصف الأنماط باستخدام كائن JS عادي ، وفي JavaScript ، لا يمكن أن تحتوي المتغيرات وأسماء خصائص الكائنات ( المعرفات ) على الرمز "-" ، الشرطات. في الواقع ، يمكن التحايل على هذا التقييد ، على سبيل المثال ، من خلال تضمين اسم خاصية الكائن في علامات اقتباس ، ولكن في حالتنا هذه ليست هي الحالة. في مثل هذه الحالات ، عندما تحتوي أسماء خصائص CSS على شرطة ، نقوم بإزالة هذا الحرف ونجعل الحرف الأول من الكلمة يتبعه حرفًا كبيرًا. من السهل أن نرى أنه مع هذا النهج ، سيتم كتابة أسماء خصائص CSS بأسلوب الإبل - تمامًا كما هو الحال في JavaScript ، من المعتاد كتابة أسماء متغيرة تتكون من عدة كلمات. أعد كتابة الكود:

 <h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1> 

دعونا نلقي نظرة على نتائج عمله.


نص منمق معروض على الصفحة بواسطة المكون

في عملية تصميم النص ، يصبح رمز الكائن ذي الأنماط أطول. من غير المناسب العمل معه. إذا حاولت تقسيم هذا الرمز إلى عدة أسطر ، فلن يأتي شيء جيد منه. لذلك ، سنشتق وصف الكائن مع الأنماط من كود JSX عن طريق إنشاء ثابت مع styles الاسم ، وكتابة الكائن إليه واستخدام اسمه في JSX. نتيجة لذلك ، حصلنا على ما يلي:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) 

يعمل هذا الرمز تمامًا كما هو موضح أعلاه ، ولكن هذا الأسلوب مناسب جدًا عندما يصبح من الضروري إضافة أنماط جديدة إلى الكائن. هذا لا يؤدي إلى زيادة حجم التعليمات البرمجية التي تم إرجاعها بواسطة المكون.

كما ترون ، يتم الآن تعيين قيم خصائص CSS في كائن styles كسلسلة. عند العمل مع هذا الكائن ، يجدر النظر في بعض الميزات ، والتي تتعلق ، على وجه الخصوص ، بالخصائص التي يتم تعيين قيمها في شكل أرقام. على سبيل المثال ، هذه خاصية font-size (تشبه font-size في CSS). لذلك ، يمكن تعيين هذه الخاصية في شكل رقم عادي ، وليس سلسلة محاطة بعلامات اقتباس. على سبيل المثال ، البناء التالي صالح تمامًا:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: 24 } 

هنا ، سيتم تفسير الرقم 24 على أنه حجم الخط المشار إليه بالبكسل. إذا كانت هناك حاجة إلى تحديد وحدة القياس بشكل صريح ، فسوف نحتاج مرة أخرى إلى استخدام قيم سلسلة الخصائص. على سبيل المثال ، يشبه جزء الشفرة التالي ، من حيث التأثير على حجم الخط ، الجزء السابق ، لكن وحدة القياس للحجم موضحة هنا بوضوح:

 const styles = {   color: "#FF8C00",   backgroundColor: "#FF2D00",   fontSize: "24px" } 

أشرنا هنا إلى الحجم بالبكسل ، ولكن إذا لزم الأمر ، يمكن استخدام وحدات أخرى في تصميمات مماثلة.

عند الحديث عن الأنماط المدمجة ، لا يمكن للمرء أن يفشل في ذكر القيود المفروضة على هذا النهج. لذلك ، إذا كنت بحاجة إلى إضافة بادئات المتصفح إلى الأنماط ، فقد يكون ذلك أصعب قليلاً من إضافة أنماط أخرى. ولكن شيء ما مثل الطبقات الزائفة ، مثل :hover ، غير معتمد. إذا كنت بحاجة إليها في هذه المرحلة من إتقان React ، فمن الأفضل الاستفادة من عناصر التصميم باستخدام فئات CSS. وفي المستقبل ، سيكون من الأنسب لك استخدام مكتبات متخصصة مثل المكونات المصممة خصيصًا لهذه الأغراض. ولكن في الوقت الحالي ، سنقصر أنفسنا على الأنماط المضمنة وعناصر التصميم باستخدام فئات CSS.

ربما بعد أن تتعرف على هذا القيد للأنماط المضمّنة ، قد تتساءل عن سبب وجوب استخدامها إذا كانت فئات CSS يمكنها تحقيق التأثير نفسه ولديها ميزات أكثر شمولاً. أحد أسباب استخدام الأنماط المضمنة في React هو أنه يمكن إنشاء هذه الأنماط ديناميكيًا. علاوة على ذلك ، فإن ما سيتم تحديد هذا النمط أو ذاك من خلال كود JavaScript. نعيد كتابة مثالنا بحيث يتغير لون النص اعتمادًا على الوقت من اليوم الذي يتم فيه عرض الرسالة.

هنا هو رمز المكون الكامل الذي يستخدم تشكيل النمط الديناميكي.

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay const styles = {   fontSize: 30 } if (hours < 12) {   timeOfDay = "morning"   styles.color = "#04756F" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon"   styles.color = "#2E0927" } else {   timeOfDay = "night"   styles.color = "#D90000" } return (   <h1 style={styles}>Good {timeOfDay}!</h1> ) } 

لاحظ أن styles إعلان ثابت هو الآن قبل كتلة if . في الكائن الذي يحدد النمط ، يتم تعيين حجم الخط فقط للنقش - 30 بكسل. بعد ذلك ، تتم إضافة خاصية color إلى الكائن ، حيث تعتمد قيمتها على وقت اليوم. تذكر أننا نتحدث عن كائن JavaScript عادي تمامًا ، وأن هذه الكائنات تدعم إضافة وتغيير الخصائص بعد إنشائها. بعد تشكيل النمط ، يتم تطبيقه عند عرض النص. من أجل اختبار جميع فروع البيان الشرطي بسرعة ، يمكنك ، عند تهيئة ثابت date ، تمرير التاريخ والوقت المطلوبين إلى مُنشئ نوع Date . على سبيل المثال ، قد يبدو كالتالي:

 const date = new Date(2018, 6, 31, 15) 

بالمعنى الدقيق للكلمة ، فإن معنى كل هذا هو أن البيانات الديناميكية يمكن أن تؤثر على كيفية ظهور العناصر التي تشكلها المكونات. هذا يفتح فرصا كبيرة للمطور.

ملخص

تحدثنا اليوم عن الأنماط المضمنة ، وعن قدراتها وقيودها. في الدرس التالي ، سوف نستمر في العمل على تطبيق TODO ، وكذلك البدء في التعرف على خصائص المكونات ، مع أهم مفهوم React. لذلك ، يوصى جميع المشاركين في هذه الدورة ، قبل متابعة دراساتهم ، وكيفية تكرار كل شيء وتجربة كل شيء قمنا بتحليله حتى الآن.

أعزائي القراء! إذا كنت على دراية جيدة بتطوير React ، فيرجى إخبارنا بالمكتبات التي تستخدمها لمكونات النمط.