Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

بناء نظام تصميم قابل لإعادة الاستخدام مع رد الفعل

by
Difficulty:IntermediateLength:MediumLanguages:

Arabic (العربية/عربي) translation by Iwan Subhan (you can also view the original English article)

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

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

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

ابدء

أنت بحاجة إلى مشروع الفعل فارغ للبدء. أسرع طريقة للقيام بذلك هي من خلال إنشاء تطبيق رد فعل ، ولكن الأمر يتطلب بعض الجهد لإعداد Sass مع هذا. لقد قمت بإنشاء تطبيق skeleton ، والذي يمكنك استنساخه من GitHub. يمكنك أيضًا العثور على المشروع النهائي في برنامجنا التعليمي GitHub repo

لتشغيل ، قم بإجراء تثبيت خيوط لسحب جميع التبعيات في ، ثم قم بتشغيل الغزل لبدء عرض التطبيق.

ستكون جميع المكونات البصرية ضمن مجلد نظام التصميم جنبًا إلى جنب مع الأنماط المقابلة. أي أنماط أو متغيرات عالمية ستكون تحت src / الأنماط.

Project folder structure

إعداد خط الأساس للتصميم

متى كانت آخر مرة حصلت فيها على نظرة من شخصيتك في التصميم ، من أجل جعل الحشو خاطئًا بمقدار نصف بكسل ، أو عدم القدرة على التمييز بين ظلال الرمادي المختلفة؟ (هناك اختلاف بين #eee و #efefef ، أخبرتني ، وأعتزم العثور عليه في أحد هذه الأيام.)

يتمثل أحد أهداف بناء مكتبة واجهة المستخدم في تحسين العلاقة بين فريق التصميم والتطوير. لقد قام مطورو الواجهة الأمامية بالتنسيق مع مصممي واجهة برمجة التطبيقات (API) منذ فترة وجيدة في إنشاء عقود API. ولكن لسبب ما ، فإنه ينفد لنا أثناء التنسيق مع فريق التصميم. إذا فكرت في الأمر ، فهناك فقط عدد محدود من الحالات التي يمكن أن يوجد بها عنصر واجهة المستخدم. إذا أردنا تصميم مكون عنوان ، على سبيل المثال ، يمكن أن يكون أي شيء بين h1 و h6 ويمكن أن يكون غامقًا أو مائلًا أو تحته خط. يجب أن يكون من السهل تدوين هذا.

نظام الشبكة

تتمثل الخطوة الأولى قبل الشروع في أي مشروع تصميم في فهم كيفية هيكلة الشبكات. بالنسبة للعديد من التطبيقات ، يكون الأمر عشوائيًا. هذا يؤدي إلى نظام تباعد مبعثر ويجعل من الصعب جدًا على المطورين إمكانية تحديد نظام المسافات الذي سيتم استخدامه. لذا اختر النظام! لقد وقعت في الحب مع نظام الشبكة 4px - 8px عندما قرأت لأول مرة عن ذلك. التمسك بذلك ساعد في تبسيط الكثير من مشاكل التصميم.

لنبدأ بإعداد نظام شبكة أساسي في الكود. سنبدأ بمكوّن التطبيق الذي يحدد التخطيط.

بعد ذلك ، نحدد عددًا من الأنماط ومكونات الغلاف.

أخيرًا ، سنحدد أنماط CSS لدينا في SCSS.

هناك الكثير لتفريغ هنا. لنبدأ من القاع. المتغيرات.scss هو المكان الذي نحدد فيه ألوان الكرة الأرضية لدينا ونقوم بإعداد الشبكة. نظرًا لأننا نستخدم شبكة 4px-8px ، ستكون قاعدتنا 4 بكسل. المكون الأصلي هو الصفحة ، ويتحكم هذا في تدفق الصفحة. ثم عنصر المستوى الأدنى هو مربع ، والذي يحدد كيفية تقديم المحتوى في صفحة. انها مجرد div الذي يعرف كيفية تقديم نفسه في سياقها.

الآن ، نحن بحاجة إلى مكون الحاوية الذي يلتصق ببعض divs معًا. لقد اخترنا صندوقًا مرنًا ، ومن هنا جاء عنصر Flex المسمى بشكل خلاق.

تحديد نظام النوع

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

أولاً ، سنقوم بتعريف ثوابت النمط وفئة ملحقة.

بعد ذلك ، سنحدد أنماط CSS التي سيتم استخدامها لعناصر النص.

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

ذرات شكل الجزيئات

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

أولاً ، نحدد فئة المكون للإطار المشروط.

بعد ذلك ، يمكننا تحديد أنماط CSS للطرز.

بالنسبة إلى غير المبتدئين ، فإن createPortal مشابه جدًا لطريقة العرض ، باستثناء أنه يجعل الأطفال في عقدة موجودة خارج التسلسل الهرمي لـ DOM للمكون الأساسي. تم تقديمه في الفعل 16.

باستخدام مكون مشروط

والآن بعد تحديد المكون ، دعنا نرى كيف يمكننا استخدامه في سياق العمل.

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

ES6 لديه وسيلة سهلة لاستخراج المعلمات المتبقية كمصفوفة. فقط تطبيق ذلك ونشرها على العنصر.

جعل المكونات قابلة للاكتشاف

كلما تتابع فريقك ، أصبح من الصعب مزامنة الجميع حول المكونات المتوفرة. القصص القصيرة هي طريقة رائعة لجعل مكوناتك قابلة للاكتشاف. لنقم بإعداد مكون أساسي في القصص القصيرة.

للبدء ، قم بتشغيل:

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

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

A simple Type storybook

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.