كتابة واجهة برمجة تطبيقات لمكونات React ، الجزء 1: لا تقم بإنشاء الدعائم المتعارضة
كتابة واجهة برمجة تطبيقات لمكونات التفاعل ، الجزء 2: إعطاء أسماء للسلوك ، وليس التفاعل
كتابة واجهة برمجة تطبيقات لمكونات React ، الجزء 3: ترتيب الدعائم هو المهم
كتابة واجهة برمجة تطبيقات لمكونات التفاعل ، الجزء 4: احذر من Apropacalypse!
كتابة واجهة برمجة تطبيقات لمكونات التفاعل ، الجزء 5: مجرد استخدام التكوين
نكتب واجهة برمجة التطبيقات لمكونات React ، الجزء 6: نخلق التواصل بين المكونات
هذا المنشور هو ترجمة للمقال الأول في سلسلة من المقالات من خلال واجهة برمجة تطبيقات الكتابة الجيدة المكونة ، التي كتبها تأليف Sid . عند الترجمة ، في أي موقف غير مفهوم ، سأسترشد بالترجمة الرسمية لوثائق React JS إلى الروسية
عندما يتعلق الأمر بمكونات React ، فإن الدعائم هي واجهة برمجة التطبيقات.
يجب أن تكون واجهة برمجة التطبيقات الجيدة مفهومة حتى يتمكن المطور نفسه من معرفة كيفية التعامل معها. هذا لا ينطبق فقط على تطوير مكتبات المكونات ، ولكن أيضًا على تطوير التطبيقات. من المهم أن تكون أنت وفريقك مرتاحين لاستخدام المكونات وواجهة برمجة التطبيقات الخاصة بهم.
هذه السلسلة من المقالات مستوحاة من مقالات ومحاضرات من سيباستيان ماركباج وبرنت جاكسون وجين كريتون وأ. جيسي جريو ديفيز .
بعد قراءة العديد من المقالات + المحاضرات ، وبعد أكثر من عام من تصميم تصميم نظام الكون ، توصلت إلى مبادئ التطوير هذه.
لنبدأ مع واحد بسيط.
لدينا زر:
<Button>Click me</Button>
قد تحتاج أيضًا إلى الزر الرئيسي ، وهو أمر ضروري للإجراء الرئيسي على الصفحة. كنت أرغب في إنشاء واجهة برمجة التطبيقات ، كما لو كنت أستطيع أن أقول - "أعطني الزر الرئيسي":
<Button>Click me</Button> <Button primary>Click me</Button>
الآن ، كما هو الحال عادة مع الأزرار ، ستحتاج إلى عدد قليل من الخيارات الأخرى. فيما يلي جدول للعديد من الدعائم للأزرار:
هناك العديد من الدعائم التي يمكنك استخدامها لتغيير مظهر زر. ماذا يحدث إذا كان شخص ما يستخدمهم معا؟
<Button primary destructive> Click me </Button>
هل سيفوز أي منهم؟ ما الذي يعتمد عليه؟ من النظام؟
لماذا أي شخص يكتب هذا؟ هل هناك حالة حقيقية عندما تحتاج إلى قول "أعطني زرًا destructive primary "؟
في معظم الحالات ، هذا خطأ. ولكن إذا كان على المطورين على الإطلاق طرح مثل هذه الأسئلة (مثل تلك المذكورة أعلاه) ، فربما لا يكون هذا واجهة برمجة تطبيقات جيدة جدًا.
بالنسبة لأولئك الذين يقررون شكل واجهة برمجة التطبيقات ، من المهم:
- تقليل الأخطاء
- تقليل الارتباك حول API
هنا هو نصيحة رقم 1: لا تخلق الدعائم المتضاربة.
يمكننا بسهولة إصلاح الكود أعلاه باستخدام prop والذي يتيح لك الحصول على قائمة بالخيارات. نسميها appearance
<Button appearance="default">Click me</Button> <Button appearance="primary">Click me</Button> <Button appearance="destructive">Click me</Button>
يمكننا إضافة قائمة بالخيارات المدعومة appearance باستخدام أنواع الدعم .
Button.PropTypes = { appearance: PropTypes.oneOf(['default', 'primary', 'secondary', 'link', 'destructive']) }
الآن ، حتى إذا أخطأ المطور ، فسيتلقى تحذيرًا بشأن ذلك في أداة التطوير الخاصة به.
<Button appearance="danger">Click me</Button>
: : `prop` `appearance` `danger` `Button`, : `["default", "primary", "secondary", "link", "destructive"]`
هذه النصيحة سهلة التنفيذ ، ولكنها ستجعل من استخدام API الخاص بك (والدعم) أسهل بكثير.
من أحد المترجمين - سأقوم بتحديث قائمة المقالات في هذه السلسلة (في البداية) حيث يتم ترجمة المزيد من المقالات وإتاحة مقالات جديدة.