React JS الجزء الثالث – تعديل المظهر باستخدام CSS

في الجزء السابق تعلمنا كتابة تطبيق بسيط باستخدام ReactJS . والآن سنكمل الحديث عن كتابة مكوّنات React .
حيث نقصد بالمكوّنات مايسمى Components أي العناصر المرئية على الشاشة والمكتوبة بلغة جافاسكريبت.
والمكوّن الواحد Component يمكن كتابته بطريقتين .
الطريقة الأولى على شكل تابع Functional Component . كما هو الحال في المثال السابق . حيث كان المكوّن App عبارة عن تابع عادي بلغة جافاسكريبت كما في الشكل التالي :

//App.js
import React from "react";

function App() {
  return (
    <div>
      <h2>هذا العنوان</h2>
      <p>هذه  عبارة عن فقرة </p>
    </div>
  );
}
export default App;
//

هذه هو الشكل البسيط لكتابة المكوّنات ضمن بيئة ReactJS . والتي سوف نعتمدها في هذه الدورة .

أما الشكل الثاني فهو Class Components وهذا النوع يجب كتابته على شكل Class مشتقة من العنصر الأساسي React.Component . ولو أردنا إعادة كتابة المكوّن App السابق بهذه الطريقة سيكون كالتالي:

//App.js
import React from "react";

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>هذا العنوان</h2>
        <p>هذه  عبارة عن فقرة </p>
      </div>
    );
  }
}

حتى الآن نلاحظ أن الفرق بسيط ولكن مع التعمق أكثر نجد أن الاختالف واضح بين الطريقتين .
لن نتوسع كثيرا في هذا الموضوع لأن الهدف من دورتنا هذه هو التعرف على تقنية React بدون تعقيد .
وسنكمل الدورة على أساس أن جميع المكوّنات مكتوبة على شكل توابع Functional Components .

تعديل المظهر :

سنقوم الآن بإضافة تحسينات المظهر وأكواد CSS للمكوّن App بحيث نجعل العنوان ,والفقرة في المنتصف.
وذلك يتم بأن نكتب كود CSS ضمن عنصر JSON مع مراعات بعض التغييرات في قواعد الكتابة .
والمثال التالي يوضح ذلك:

//App.js
import React from "react";

function App() {
  const cssStyle = {
    width: "100%",
    padding: "25px",
    margin: 0,
    textAlign: "center",
  };

  return (
    <div style={cssStyle}>
      <h2>هذا العنوان</h2>
      <p>هذه عبارة عن فقرة </p>
    </div>
  );
}

export default App;
//

حيث نلاحظ في بداية التابع App قمنا بتعريف متحول واخترنا له الإسم cssStyle لسهولة القراءة فقط . و قمنا بتعريف هذا المتحول على أنه ثابت const وذلك فقط لأننا لا نريد تغيير قيمته لاحقاً.
أما قيمة هذا المتحول فكما نرى هي عبارة عن عنصر JSON . ومحتوى هذا العنصر عبارة عن خصائص CSS المعروفة .
ثم في قيمة الخرج للتابع App وضعنا هذا المتحول ليكون هو قيمة الخاصية style للوسم div .والذي يمثل إطار حاوي لباقي عناصر الصفحة.
وهكذا تقوم ReactJS بتعديل خصائص المظهر CSS للوسم div حسب قيمة الخاصية style التابعة لهذا الوسم .
وهنا لدينا المعومات الجديدة التالية :

• أولا : يتم تطبيق معلومات المظهر للوسم عن طريق الخاصية style لهذا الوسم . بحيث نمرر لها قيمة من نوع JSON . تحتوي كود CSS الذي نريده لتعديل مظهر الوسم .
• ثانيا : بالنسبة لأوامر CSS التي وضعناها ضمن متحول JSON . نلاحظ أننا نكتب بعض الخصائص بطريقة مختلفة مثل :
  بدلا من text-align كتبنا textAlign . وهذا أحد التغييرات وذلك لأنه لا يسمح بكتابة إشارة – ضمن أسماء عناصر JSON .
  لذلك نحذف هذه الإشارة ونجعل الحرف الأول من الكلمة التالية حرف كبير باللغة الانكليزية.
  وتطبق هذه القاعدة دائما في عالم ReactJS . خاصة بالنسبة لأسماء عناصر JSON .
  وكذلك نستخدم علامات التنصيص لكتابة قيم خصائص CSS ماعدا لو كانت القيمة عبارة عن رقم فقط .
  حيث كتبنا قيمة margin بدون علمات تنصيص لأن قيمتها رقم فقط . بينما padding عبارة عن نص .
• ثالثا : نلاحظ أننا قمنا بعملية حسابية أو برمجية وهي إسناد قيمة متحول لأحد خصائص الوسم div ضمن كود HTML . وهذا غير مألوف بالنسبة للغة HTML .
  ذكرنا سابقا أن هذه هي لغة JSX وهي لغة خاصة لبيئة ReactJS التي تسمح لنا بالمزج بين لغة HTML مع JavaScript .
  وتتولى مكتبة ReactJS عملية ترجمة هذه اللغة للصيغة التي يفهمها مستعرض الانترنت.
  ولكن عملية دمج كود جافاسكريبت لا يتم بشكل عشوائي وإنما ضمن قواعد محددة . وأهم قاعدة أنه عند كتابة أي كود بلغة جافاسكريبت ضمن كود HTML يجب أن تتم بين أقواس منحنية { } . حتى لو كانت مجرد قيمة متحول كما في حالتنا هذه.

لنقوم بتشغيل هذا الكود . وذلك من موجه الأوامر نكتب npm start ونرى النتيجة التالية في مستعرض الانترنت .

والآن لنطبق ما تعلمناه سابقا لتغيير لون العنوان بتغيير قيمة الخاصية style للوسم h2 كما يلي :

 <h2 style={{ color: "#FF0000" }}>هذا العنوان</h2>

وكذلك نقوم بتغيير لون النص في الفقرة p إلى اللون الأزرق :

<p style={{ color: "#0000FF" }}>هذه عبارة عن فقرة </p>

ونقوم بحفظ التغييرات على الملف App.js لتظهر النتيجة تلقائيا في المستعرض بدون الحاجة لإعادة كتابة الأمر npm start مرة ثانية .
والنتيجة هي :

هكذا نكون قد تعلمنا أساسيات تعديل المظهر لمكوّنات React . وكيفية دمج معلومات CSS ضمن كود JSX .
ومع العلم أن هذه ليست الطريقة الوحيدة لتعديل المظهر لكن هذه المعلومات تكفينا في هذه الدورة لأن الهدف هو تعلم مفاهيم ReactJS والتركيز على أساسيات هذه التقنية .

في الجزء القادم سنتعلم مفهوم جديد وهو React Hooks , وسنتعرف على كيفية استخدام المتغيرات وكتابة التوابع والعمليات الحسابية .