प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 1: परस्पर विरोधी सहारा न बनाएं

प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 1: परस्पर विरोधी सहारा न बनाएं

प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 2: व्यवहार को नाम दें, सहभागिता नहीं

प्रतिक्रिया घटकों के लिए एपीआई लिखना, भाग 3: सहारा का क्रम महत्वपूर्ण है

रिएक्ट कंपोनेंट्स के लिए एपीआई लिखना, भाग 4: एप्रोपैकलिप्स से सावधान रहें!

प्रतिक्रिया घटकों के लिए एक एपीआई लिखना, भाग 5: बस उपयोग संरचना

हम प्रतिक्रियाशील घटकों के लिए एपीआई लिखते हैं, भाग 6: हम घटकों के बीच संचार बनाते हैं

यह पोस्ट @Sid द्वारा लिखित राइटिंग गुड कंपोनेंट एपीआई श्रृंखला के पहले लेख का अनुवाद है। अनुवाद करते समय, किसी भी असंगत स्थिति में, मुझे रूसी में रिएक्ट जेएस प्रलेखन के आधिकारिक अनुवाद द्वारा निर्देशित किया जाएगा।

जब रिएक्ट घटकों की बात आती है, तो आपके प्रॉपर आपके एपीआई होते हैं।

एक अच्छा एपीआई को समझना चाहिए ताकि डेवलपर खुद यह पता लगा सके कि इसके साथ कैसे काम किया जाए। यह न केवल घटक पुस्तकालयों के विकास पर लागू होता है, बल्कि अनुप्रयोग विकास के लिए भी लागू होता है। यह महत्वपूर्ण है कि आप और आपकी टीम घटकों और उनके एपीआई का उपयोग करके सहज हों।

लेखों की यह श्रृंखला सेबस्टियन मार्कबेज , ब्रेंट जैक्सन , जेन क्रेइटन और ए जेसी जिरयू डेविस के लेखों और व्याख्यानों से प्रेरित है।

कई लेख + व्याख्यान पढ़ने के बाद, और कॉस्मॉस प्रणाली के डिजाइन के एक वर्ष से अधिक समय के बाद, मैं इन विकास सिद्धांतों पर आया।

चलो एक साधारण से शुरू करते हैं।

हमारे पास एक बटन है:

<Button>Click me</Button> 

आपको मुख्य बटन की भी आवश्यकता हो सकती है, जो पृष्ठ पर मुख्य कार्रवाई के लिए आवश्यक है। मैं एपीआई का निर्माण करना पसंद करता था, जैसे कि मैं कह सकता था - "मुझे मुख्य बटन दें":

 <Button>Click me</Button> <Button primary>Click me</Button> 

अब, जैसा कि आमतौर पर बटन के साथ होता है, आपको कुछ और विकल्पों की आवश्यकता होगी। यहाँ बटन के लिए कई सहारा की एक तालिका है:

कई प्रॉप्स हैं जिनका उपयोग आप बटन के स्वरूप को बदलने के लिए कर सकते हैं। यदि कोई उन्हें एक साथ उपयोग करता है तो क्या होता है?

 <Button primary destructive> Click me </Button> 

क्या उनमें से कोई जीतेगा? यह किस पर निर्भर करता है? आदेश से?

यह कोई क्यों लिखेगा? क्या कोई वास्तविक मामला है जब आपको "मुझे primary destructive बटन दें" कहने की आवश्यकता है?

ज्यादातर मामलों में यह एक गलती है। लेकिन अगर सभी डेवलपर्स को ऐसे सवाल पूछने हैं (जैसे ऊपर वाले), तो यह शायद एक बहुत अच्छा एपीआई नहीं है।

जो लोग तय करते हैं कि एपीआई क्या होगा, यह महत्वपूर्ण है:

1. त्रुटियों को कम करें
2. एपीआई के आसपास भ्रम को कम करें

तो यहाँ टिप # 1 है: परस्पर विरोधी प्रॉप्स न बनाएं।

हम प्रोप का उपयोग करके उपरोक्त कोड को आसानी से ठीक कर सकते हैं जो आपको विकल्पों की एक सूची प्राप्त करने की अनुमति देता है। इसे 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"]` 

यह टिप लागू करने के लिए बहुत आसान है, लेकिन यह आपके एपीआई का उपयोग (और समर्थन) करने में बहुत आसान बना देगा।

एक अनुवादक से - मैं इस श्रृंखला में लेखों की सूची (शुरुआत में) अपडेट करूंगा क्योंकि अधिक लेख अनुवादित हैं और नए उपलब्ध हो गए हैं।