ابدأ مع React


الدرس: اكتب كود معياري مع مكونات في JSX


الصفحة السابقة
في الفصل السابق ، تعلمت كيفية إنشاء مكونك الأول ، واستخدامه في ملف HTML الذي حولته إلى تطبيق React . بالفعل ، أحسنت! حان الوقت الآن لإلقاء نظرة فاحصة على المكونات.

فكر في المكونات



React
حسنًا ، لقد رأينا فصلين فقط ، وقد سمعت بالفعل كلمة "مكون" 20 مرة (نعم ، لقد عددت). سوف تفهم: المكونات أساسية في React  .

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

React
موقع Jungle House مقسم إلى مكونات

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

تسمح لنا المكونات باستخدام نفس بنية البيانات ، وملء تلك الهياكل بمجموعات بيانات مختلفة. بغض النظر عن عدد النباتات التي يجب عليك وضعها في The Jungle House ، ستتمكن من تعدينها لعرض بياناتك دون عناء. وإذا احتجت في المستقبل إلى إنشاء صفحة جديدة بنفس التصميم ، فيمكنك إعادة استخدام نفس المكون: هل تدرك قوة المكونات؟ 💥

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

افهم مما يتكون المكون



رائعة ! المكونات قوية حقًا! اكتب فقط بالصيغة الصحيحة وسترى السحر ….  ! هل لدينا واجهة مستخدم؟ 

لذا ... لا ، لن تراني أقول ذلك. وراء كل تقنية منطق.

أنت تعلم أن HTML عبارة عن سلسلة من الإرشادات التي يجب على المتصفح اتباعها لبناء DOM . حسنًا ، ستعمل React على تعديل DOM مباشرة نيابةً عنك : عليك  فقط أن تعطيه التعليمات الخاصة بما تريد القيام به.

لوضعها ببساطة: باستخدامها  React.createElement  ، تُنشئ React عناصرها أولاً في DOM الظاهري ، ثم تأتي وتحذر DOM عند إنشائها ، "مرحبًا ، أضف لي علامة h1 مع النص  La maison jungle   بداخلها" .

لقد قمت بترجمة المكون من الفصل السابق في CodePen هنا من أجلك . من خلال عمل console.log للمكون الخاص بك ، هذا ما تحصل عليه:

React
console.log للمكون الأول لدينا

Header    هنا عنصر React تم إنشاؤه بواسطة React . بشكل ملموس ، إنه كائن كبير. يولد كل مكون أشجارًا من عناصر React ومكونات أخرى ، والتي ستُترجم بعد ذلك إلى عناصر في DOM .

لقد اكتشفت أن العناصر تُعيد كائنات بمجموعة كاملة من الخصائص المحددة ، وأن React تنشئها باستخدام createElement . لكن يمكنك أن تتخيل أن مطوري React لا يتعاملون مع هذه الكائنات بشكل مباشر. لا ، بدلاً من ذلك يستخدمون JSX  .

هذا هو امتداد JavaScript الذي تم إنشاؤه بواسطة React ، والذي يسمح لنا باستخدام بناء الجملة الخاص بنا كعلامات مباشرة في كود JavaScript  .

عندما يكون لدينا هذا:


function Header() {
    return (<div>
        <h1>La maison jungle</h1>
    </div>;)
}
 
... وإعادة استخدامه معها  
  ، قد تعتقد أنه HTML . يبدو متشابهًا بعض الشيء ، لكنه يتعلق بـ JSX! نعم ، JSX هي الطريقة الأكثر فهمًا لكتابة مكونات React في تطبيق ما ، وبالتالي الطريقة التي تُستخدم دائمًا تقريبًا. هذه هي خصوصية React  : على عكس الأطر الأخرى التي نكتب فيها HTML غنيًا ، فقد أنشأت فرق React JSX ، بناء الجملة الخاص بهم استنادًا إلى JavaScript ، والذي يسمح لك بخلط HTML و JS  .

مثل HTML ، JSX هي لغة ترميزية . المفاتيح   < ،  >   و  /  سيتم استخدامها في لوحات المفاتيح الخاصة بك في كثير من الأحيان.

لقد انشأنا على  عنصر Header وليسheader . من الضروري وضع الحرف الأول باحرف كبيرة لمكونات JSX الخاصة بنا ، وإلا فلن تعرف React أنه مكون ، وستعتقد أنه مجرد علامة HTML .

قم بتكوين المكونات الخاصة بك


دعنا نعود إلى المكون الخاص بنا    <Header /> . إنه وحيد نوعًا ما ، ألا تعتقد ذلك؟

سنضيف إليه مكونًا   <Description />  :


function Description() {
    return (<p> اشتري هنا جميع النباتات التي طالما حلمت بها  🎍</p>;)
}
 
ونضيفه في العرض:

ReactDOM.render(<Header /><Description />, document.getElementById("root"))
 
ماذا ؟  لا شيء معروض باستثناء علامة تعجب صغيرة محاطة بدائرة حمراء: هناك خطأ !  لا

داعي للذعر ، هذا أمر طبيعي: يجب دائمًا تغليف مكونين في مكون رئيسي واحد .

لذلك يمكننا القيام بما يلي:


ReactDOM.render(<div><Header /><Description /></div>, 
document.getElementById("root"))
 
وتم حل المشكلة.

تزودنا React أيضًا بأداة ، Fragments ، إذا أردنا التفاف مكونين في أصل واحد دون ظهور الأصل في DOM . لهذا يمكنك القيام بما يلي:


ReactDOM.render(<React.Fragment><Header /><Description /></React.Fragment>, 
document.getElementById("root"))
 
يتم تغليف عناصرنا جيدًا ، وإذا قمت بفحص صفحتك ، فلن يظهر هذا الأصل في DOM .

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

دعنا نجمع العنوان والوصف في لافتة:


function Banner() {
    return (<div>
        <Header />
        <Description />
    </div>;)
}
 
هل ترى ؟ كل شيء يسير على ما يرام كما هو مخطط له.

ويمكننا أيضًا تغليفها واستخدامها عدة مرات كما نريد كما يلي:


<Parent>
    <Enfant />
    <Enfant />
    <Enfant />
</Parent>
 
ستلاحظ أن جميع مكوناتنا مغلقة جيدًا. في JSX ، يجب إغلاق جميع العلامات ، بما في ذلك عناصر HTML ذاتية الإغلاق مثل الإدخال. سنكتبها بهذه الطريقة (نضيف السمات المرغوبة):


<input />
 

معالجة البيانات في مكونات JSX الخاصة بك



في React، الأقواس  {   و  }   هي أيضا مفيدة بشكل خاص. عندما تكون تعبيرات JavaScript ، تتم كتابتها بأقواس.

هذا يسمح لنا بتطبيق تعبيرات JavaScript مباشرة في JSX: 

  • قم ببعض الحساب :
    
    <div> الجواب الكبير عن الحياة والكون والبقية هو { 6 * 7 } </div>
     
  • تعديل سلاسل الأحرف:
    
    <div>{ alexia.toUpperCase() }</div>
     
  • استخدام الثلاثية :
    
    <div>{ 2 > 0 ? 'اثنان أكبر من صفر ' : ' لن يظهر هذا أبدًا' }</div>} 
     
أو حتى لعرض متغير JS :

بالنسبة لسلسة


<div> { myTitle }</div>
 
بالنسبة لعدد:


لعدد:  <div>{ 42 }</div>
 
على سبيل المثال ، إذا قررنا وضع نص الوصف في متغير:

function Description() {
    const text = " اشتري هنا جميع النباتات التي طالما حلمت بها "
    return (<p>{ text }</p>)
}
 
يعرض بشكل جيد كما هو متوقع.

سنكون قادرين على تطبيق وظيفة JavaScript عليها وعن طريق وضع بعض الاكواد التعبيرية التالية:


function Description() {
    const text = " اشتري هنا جميع النباتات التي طالما حلمت بها "
    const emojis = " 🤑🤑🤑 "
    return (<p>{ text.slice(0, 11) + emojis }</p>)
}
 
حسنًا ، لست متأكدًا من أن هذه نقطة بيع رائعة ، لكن هل فهمت الفكرة؟

الممارسة


python
لقد تعلمت الكثير في هذا الفصل ، أحسنت! الآن هي الفرصة لتطبيقها. 

سوف تجد هنا الرابط CodePen  لبدء العملية. هذا ما هو متوقع منك:

  • أعد استخدام مكون Banner  في هذا الفصل الذي يعرض اسم متجرنا. يجب إخراج العنوان في متغير جافا سكريبت: يجب أن يكون العنوان بأحرف صغيرة مبدئيًا وأن يتم تحويله إلى أحرف كبيرة باستخدام JavaScript.
  • قم بإنشاء مكون <Cart /> الذي سيأتي تحت عنواننا.
  • تحتوي السلة على 3 نباتات:  Monstera و Lierre و Fleurs .
  • قم بإنشاء 3 متغيرات لأسعار النباتات: تكلفة Monstera هي 8 وتكلفة Lierre هي 10 وتكلفة Fleurs هي 15.
  • تحتوي العربة على قائمة (<ul> 😉) ، ويعرض كل عنصر اسم العنصر والسعر.
  • مجموع السلة يجمع الأسعار الثلاثة.
و في المقابل الحل يمكن الاطلاع هنا .

باختصار


لقد أكملت هذا الفصل الخاص بالمكونات في JSX! تهانينا لكم. 😎 الآن تعلم أن:
  • تتكون واجهة المستخدم (أو UI ) من عدة مكونات React :
    • هي قابلة لإعادة الاستخدام . على سبيل المثال ، زر ، عنصر في قائمة ، عنوان ،
    • تجميع هيكل وأنماط وسلوك عنصر معًا ،
    • و تُترجم من قبل React في الأجسام الكبيرة، والتي يتم بعد ذلك اظافتها في DOM  .
  • JSX هو بناء جملة تم إنشاؤه بواسطة React لكتابة JavaScript . هناك بعض القواعد التي يجب اتباعها:
    • يجب دائمًا تغليف مكونين في مكون رئيسي واحد ،
    • تبدأ أسماء المكونات بحرف كبير ،
    • يجب إغلاق علامات المكون .
أنت الآن جاهز لاختبار الجزء الأول! أنا أعتمد عليك لتقديم كل شيء. 💪