ابدأ مع React


الدرس: دمج الأسلوب والأصول في مشروعك


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

صمم تطبيقك



React

استخدم classNames


كما هو الحال في HTML ، يمكننا ربط السمات بعناصرنا . سمات HTML مثل   id ،  href   للرابط , ،   src   للعلامة ، العمل بشكل طبيعي في JSX .

في المقابل ، هناك كلمات محجوزة في JavaScript ، مثل    class .

في هذه الحالة ، كيف يمكن تعيين النمط مع فئة CSS؟

كل ما عليك فعله هو استخدام السمة   className  وتحديد سلسلة لها. علاوة على ذلك ، يمكنك استخدام عدة فئات على عنصر عن طريق وضعها في صف ، مفصولة بمسافة.

لنقم بإنشاء   مجلد / styles  في المجلد /src   لتجميع ملفات CSS الخاصة بنا. يمكنك وضع index.css هناك    بدون نسيان تعديل المسار نسبي لاستيراد   index.css   في    index.js .

لذلك أقوم بإنشاء ملفي   Banner.css   الذي سيسمح لي بتصميم المكون الخاص بي . مما يعطينا تنظيما كما في لقطة الشاشة أدناه: 👇

React
هيكل الشجرة لتطبيقنا

في   Banner.js  ، أقوم بلف      (wrap) h1في div الذي أحدد له  lmj-title    className ( “lmj” لمنزل الغابة ، بالطبع! ) :


<div className='lmj-banner'>
    <h1>La maison jungle</h1>
</div>
 
ونعود إلى ملفنا Banner.css ، حيث نقوم بإنشاء الفئة المقابلة :

.lmj-banner {
    color: black;
    text-align: right;
    padding: 32px;
    border-bottom: solid 3px black;
}
 
دعنا نلقي نظرة على صفحتنا في المتصفح.

؟!

كيف هذا ؟ لا شيء يحدث ؟

لا داعي للذعر ، نحن فقط لم نستورد الملف .

فقط أضف في ملفنا   Banner.js   :


import '../styles/Banner.css'
 
وهذا كل شيء ! يتم تطبيق أسلوبنا!

جميل ، أليس كذلك؟

علاوة على ذلك ، نظرًا لأنه يمكننا تصميم مكوناتنا بسهولة تامة باستخدام className بسيط ، فما الذي يمنعنا من استخدام <div> للرأس ، بدلاً من <h1> ، ووضع نمط مطابق لـ font-weight و font-size ؟

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

اكتشف سمة style



أخبار سارة: تقبل عناصر React أيضًا السمة   style  لتصميم مكون. على عكس عناصر HTML ، التي لكي يتم قبول هذه السمة لها ، يجب أن تمررها ككائن كمعامل. هذه الطريقة تسمى النمط المضمن (inline style) . دعني أوضح لك كيف يبدو في الفيديو أدناه: 👇

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

لقد أوضحت لك هنا طريقة classNames ، جنبًا إلى جنب مع ملفات CSS البسيطة ، وسمة النمط. تظل هذه الأساليب بسيطة وفعالة. لكن كن على علم بأن هناك العديد من الطرق الأخرى لتصميم تطبيقك ، على سبيل المثال باستخدام وحدات CSS المدمجة مباشرةً بواسطة Create React App (باللغة الإنجليزية) ، أو عن طريق إضافة مكتبات تابعة لجهات خارجية. يمكنك على سبيل المثال استخدام Sass ، أو حتى (هذه هي تقنيتي المفضلة) CSS في JS . وحتى بالنسبة لذلك ، هناك أيضًا عدة طرق للقيام بذلك.

استخدم الصور



ربما شاهدت شعار   logo.svg وهو   React في      مجلد /src ؟

هنا سنفعل الشيء نفسه. لكن لنبدأ بتنظيم كل شيء.

ما زلنا في    /src، نقوم بإنشاء مجلد   /assets   نضع فيه ملفنا    logo.png ، والذي يمكنك تنزيله من هنا .

React
(بالمناسبة ، أغتنم هذه الفرصة لأشكر المصمم Pixel Perfect هنا ).

يجب عليك إعادة تسميته أولاً حتى تحصل عليه بشكل صحيح    logo.png .

لاستيراده إلى التعليمات البرمجية الخاصة بك ، يمكنك الآن القيام بما يلي . في   Banner.js  :


import logo from '../assets/logo.png'
 
ترى هنا ، نعلن في الواقع عن متغير شعار نخصص له محتوى صورتنا.

ثم يمكنك استخدامه في عنصر img ، والذي يعطينا   Banner.js  :


import logo from '../assets/logo.png'
import '../styles/Banner.css'

function Banner() {
    const title = 'La maison jungle'
    return (
        <div className='lmj-banner'>
            <img src={logo} alt='La maison jungle' className='lmj-logo' />
            <h1 className='lmj-title'>{title}</h1>
        </div>
    )
}

export default Banner
 
alt    تتيح لنا    هنا احترام معايير إمكانية الوصول التي ذكرتها في الفصل الأخير من الجزء الأول. من الممارسات الجيدة توفير نص بديل للمستخدمين ضعاف البصر للوصول إلى المحتوى. 

من خلال إضافة بعض CSS ( التي يمكنك الحصول عليها هنا) ، ها أنا مع Banner كما أردته ، مع Cart أدناه:

لديك الآن قاعدة تعليمات برمجية جيدة جدًا لبناء تطبيقك ، باستخدام التصميم والأصول في مكونات React الخاصة بك. تهانينا ! 🎉

ممارسة


React
كما هو الحال مع الفصول السابقة ، ستجد قاعدة الكود في فرع P2C2-Begin   .

هنا ، سيكون عليك تصميم سلتك . للقيام بذلك ، قم أولاً بإنشاء فئة(class)    lmj-cart . يجب أن تحتوي سلتك على:

  • padding 32 بكسل ؛
  • نص أبيض
  • ولون الخلفية (background-color) #31b572
ستجد الحل للتمرين في فرع P2C2-Solution .

باختصار


  • تُستخدم سمة className  لتحديد فئة لعنصر React للإشارة إلى CSS لها.
  • يمكن استيراد ملف CSS المقابل مباشرة إلى ملف   .js .
  •    تسمح لك السمة    Style بدمج النمط مباشرة ، وهذا ما يسمى النمط المضمن .
  • في الصور يتم استيرادها من قبل React مع Webpack  . فقط قم باستيراد الصورة المطلوبة.
أنت هنا الآن مع أساسيات تطبيق Jungle House الخاص بك. حان الوقت لملء هذا التطبيق قليلاً بالبيانات ، ولإضفاء الطابع السياقي قليلاً على ما نقوم به. شيء جيد ، هذا هو برنامج الفصل التالي! 💪