ابدأ مع React


الدرس: توفير الوقت والكفاءة مع القوائم والشروط


الصفحة السابقة

التكرار على المحتوى الخاص بك


React
في الكود ، غالبًا ما تواجه قوائم بيانات لها نفس البنية. خبر سار ! ✨ لا حاجة للتشنج باستعمال النسخ واللصق: يمكنك التكرار مباشرة على المحتوى الخاص بك وإنشاء مكونات React عليه .

لكن بشكل ملموس ، ماذا يعطي ذلك؟

اكتشف حليفك:  map() 


على طريقة جافا سكريبت   map()   يمر فوق كل عنصر من صفيف. يقوم بتطبيق دالة عليه ، ويعيد مصفوفة جديدة تحتوي على نتائج هذه الوظيفة المطبقة على كل عنصر.

على سبيل المثال ، بالنسبة للدالة التي من شأنها مضاعفة قيمة العنصر ، فإن هذا يعطي:


const numbers = [1, 2, 3, 4]
const doubles = numbers.map(x => x * 2) // [2, 4, 6, 8]
 
في حالتنا ، سيسمح لنا بأخذ قائمة بالبيانات ، وتحويلها إلى قائمة من المكونات .

  تجعل  الطريقة  map() من السهل تكرار البيانات وإرجاع مجموعة من العناصر. مثلها ، فإن الطرق   forEach()،   filter()،    reduce() وما إلى ذلك  لمعالجة المصفوفات ، هي أيضًا حلفاءك في React .

لذلك سنقوم بإنشاء مكون   ShoppingList.js   لمتجر المصنع الخاص بنا.

في هذا الملف ، نعلن عن قائمة نباتات متغيرة تحتوي على قائمة نباتاتنا  :


const plantList = [
    'monstera',
    'ficus lyrata',
    'pothos argenté',
    'yucca',
    'palmier'
]
 
و نضيف أدناه المكون نفسه:

function ShoppingList() {
    return (
        <ul>
            {plantList.map((plant) => (
                <li>{plant}</li>
            ))}
        </ul>
    )
}

export default ShoppingList
 
ترى: لكل إدخال في المصفوفة ، نعيد عنصرًا   
  •   .

  • نقوم باستيراد ShoppingList.js إلى      : عظيم! لدينا قائمة المكونات! 🎉

    ولكن ما هو هذا الخطأ الأحمر في وحدة التحكم الخاصة بي؟

    أوه أوه ! key   يبدو أنني نسيت الدعامة   🙈.

    حدد الخاص بك key 

    يُطرح سؤال بالفعل: ما هي الدعامة  key  ، ولماذا تزعجنا هنا؟

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

    فهل يمكنني إعطاء الدعامة الخاصة بي أي قيمة   key ؟

    لا على الإطلاق !

    إذا كنت ترغب في تجنب الأخطاء ،    يجب استعمال key  أن يحترم مبدأين:

    1. يجب أن يكون فريدًا داخل الجدول. 
    2. و مستقرا مع مرور الوقت (لنفس البيانات المصدر، سيكون لدينا دائما نفس قيمة   key= ) .
    3. تذكر ، لقد أخبرتك عن DOM الافتراضي في الجزء السابق. حسنًا ،   key   يسمح بربط البيانات بالمكون المقابل في DOM الافتراضي مما يجعل من الممكن إنشاء المكونات. 

      إذا لم يكن مفتاحك فريدًا أو يتغير بمرور الوقت ، فقد يربك DOM الافتراضي البيانات مع بعضها البعض - خاصةً إذا تم إدراج عنصر في القائمة ، أو حذفه من القائمة! 

      لدينا عدة طرق لتوليد   key   فريد:

      • الطريقة الأسهل والأكثر موثوقية هي استخدام المعرف المرتبط ببياناتك في قاعدة البيانات الخاصة بك.
      • يمكنك أيضًا العثور على طريقة لتسخير قيمة البيانات ، إذا كنت واثقًا من أنها ستكون دائمًا فريدة ومستقرة بمرور الوقت.
      • كحل أخير ، يمكنك تحديد سلسلة ودمجها مع فهرس البيانات في صفيفك.
      في حالتنا ، نظرًا لعدم وجود معرف مرتبط ، يمكننا الجمع بين الفهرس واسم النبات وهو سلسلة:
      
      function ShoppingList() {
          return (
              <ul>
                  {plantList.map((plant, index) => (
                      <li key={`${plant}-${index}`}>{ plant }</li>
                  ))}
              </ul>
          )
      }
      
      export default ShoppingList
       
      هذه المرة ، لا يوجد خطأ في وحدة التحكم!

    الممارسة



    React
    في فرع P2C3-Begin-1  ، ستجد قاعدة الكود المطلوبة لبدء التمرين. سترى في   ShoppingList.js   قائمة النباتات المستوردة من   /datas   الذي يسمى   plantList، والتي تحتوي على فئات لكل نبات.

    من قائمة النباتات هذه ، سوف تحتاج إلى:

    • قم ببناء قائمة جديدة بشكل ديناميكي تستخلص الفئات الفريدة للنباتات (والتي سنستخدمها لاحقًا أيضًا) . 
    • هناك عدة حلول لإنشاء قائمة بالعناصر الفريدة ، لكني أنصحك بالبحث في الطريقة  reduce()  وإلا forEach() .
    • اعرض قائمة فئات النباتات أعلى قائمة النباتات المعروضة للبيع.
    الانتباه إلى   key   !

    بنفس المنطق ، يمكن إيجاد الحل في فرع P2C3-Solution-1  . 

    حدد سياق محتوى مكوناتك



    يتيح لنا React عمل قوائم بالمكونات: مما يوفر الكثير من الوقت في حياتك كمطور. لكن هذا ليس كل شيء ! يسمح لنا JSX أيضًا بعرض العناصر في مكوناتنا بشكل مشروط .

    تذكر ، في الجزء الأول ، أخبرتك أن React يسمح لك بالتقييم المباشر لتعبير JavaScript في JSX؟ ما إذا كانت الأقواس تسمح لك بكتابة ثلاثية مباشرة لعرض عنصر أو آخر؟ 

    حسنًا ، سنأخذ هذا المنطق خطوة إلى الأمام لتغيير بعض أجزاء المكون اعتمادًا على السياق.

    قم بتهيئة الشروط في JSX


    هكذا… لقد رأينا بالفعل العامل الشرطي (الثلاثي) . الآن بعد أن أصبح لدينا تطبيق كامل لمساعدتنا على البدء ، يجعلني أرغب في تنفيذه في الموقع الخاص بنا. 

    في قائمة النباتات الخاصة بنا    plantList.js، سأضيف فئة isBestSale   مقابلة   لفئة  boolean   (منطقي) تخبرنا ما إذا كانت النبتة تنتمي الى أحد أفضل النباتات مبيعًا. مما يعطينا العنصر الأول:

    
    {
        name: 'monstera',
        category: 'classique',
        id: '1ed',
        isBestSale: true
    },
     
    الآن بعد أن أصبح لدينا منطقيًا ، سنستخدم رمزًا ثلاثيًا لعرض رمز تعبيري بناءً عليه . في ShoppingList.js ، عند عرض الاسم ، أضفت:
    
    {plantList.map((plant) => (
        <li key={ plant.id }>
            {plant.isBestSale ? <span>🔥</span> : <span>👎</span>}
        </li>
    ))}
     
    مما يعطينا:
    React
    حالتنا تميز أفضل مبيعات من الآخرين

    عظيم ! إنه يعمل جيدا !

    لكن إذا فكرت في الأمر ، لست متأكدًا من أنها نقطة بيع أعلى ... 🤔 بدلاً من ذلك ، دعنا نعرض فقط 🔥 لأفضل المبيعات ، ولا شيء للآخرين.

    لذلك ، يمكننا اعادة   null   إلى الحالة حيث لا نريد عرض أي شيء  :

    
    {plant.isBestSale ? <span>🔥</span> : null}
     
    وها أنت ذا! لقد حصلنا على ما أردناه! 🙌

    لكن هل تعلم ماذا؟ هناك طريقة أسهل لكتابة هذا: يمكنك استخدامها    && .

    يشار إليه بأقواس ،  يسبق عنصر JSX ويحدد أن العنصر لن يتم إنشاؤه إلا إذا تم استيفاء الشرط . لذلك يمكننا أن نكتب: &&  

    
    {plant.isBestSale && <span>🔥</span>}
     
    نعم! يعمل كما هو متوقع!

    يمكنك أيضًا ربط الشروط.
    على سبيل المثال ، إذا أردت عرض 🔥 للنباتات   isBestSale   الموجودة ضمن الفئة الكلاسيكية:
    {plant.isBestSale && plant.category === "classique" && <span>🔥</span>}
    وبالمثل ، إذا أردت ظهور حرف 🔥 بجوار النباتات التي تنتمي   isBestSale   إلى فئة "أو" في الفئة الكلاسيكية:
    {plant.isBestSale || plant.category === "classique" && <span>🔥</span>}
    لكن احذر من نظافة الكود. إذا كان لديك الكثير من الشروط ، أنصحك بإخراجها مما ستعيده وظيفتك. 😉

    الانفتاح على طرق أخرى

    React مرن بشكل خاص: هناك طرق أخرى لوضع المحتوى الخاص بك في سياقه. سأعرض لك القليل في التسجيل أدناه:

    ممارسة


    React
    بالنسبة للتمرين الأول ، ستجد قاعدة الكود في فرع P2C3-Begin-2  . انتهزت الفرصة لإضافة القليل من CSS فيه   ShoppingList.css، حتى نتمكن من رؤيته بشكل أكثر وضوحًا. ✨

    أود أيضا أن أضيف متغير   isSpecialOffer   ل   true   للنباتات التي هي على الترقية. تتمثل مهمتك في عرض عنصر div  يحتوي على كلمة "بيع" إذا كان المصنع معروضًا   للبيع. يمكنك تمرير الفصل   lmj-sales  إليه لإضافة بعض الأسلوب إليه.

    أنت حر في اختيار إحدى الطرق الموضحة في الفصل لإنشاء العرض الشرطي الخاص بك.

    والحل موجود في فرع P2C3-Solution-2 .

    باختصار


    • من قائمة البيانات ،   map()   أنشئ قائمة بمكونات React .
    • الدعامة   key   ضرورية في قوائم المكونات.
    • إذا كنت تريد تجنب الأخطاء ،   key   يجب أن: 
      • يكون فريدًا في القائمة ؛
      • يدوم بمرور الوقت.
    • أفضل ممارسة لإنشاء   key   هي استخدام  id   الفريد المرتبط بالبيانات ، وليس فقط استخدام فهرس العنصر في القائمة.
    • يتم استخدام الشرط الثلاثي لعرض عنصر أو آخر في JSX ، استجابة لشرط "if ... else ..." .
    • توجد طرق أخرى لإنشاء الشروط في React ، بما في ذلك إخراج الشروط من JSX .
    في هذا الفصل ، تعلمت إتقان مبدأين مفيدين للغاية لتوفير الوقت والسرعة في React ، مع الشروط والقوائم! تهانينا ! 🎉

    في الفصل التالي ، سنغطي عنصرًا أساسيًا لإعادة استخدام المكون في React: props !

    لذا ، لا تستطيع الانتظار حتى نبدأ العمل   props   ؟ نراكم في الفصل التالي! 🔥