घटक बनाना
आवश्यकतानुसार बटन, कार्ड और फ़ॉर्म बनाएँ।
घटक बनाना, CoddyKit पर वाइब कोडिंग का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह वाइब कोडिंग सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सब कुछ एक साथ नहीं, हिस्सों में बनाएँ
पूरे पेज के लिए प्रॉम्प्ट लिखना भारी लग सकता है। पेशेवर तरीका है एक बार में एक घटक बनाना: बटन, कार्ड, फ़ॉर्म या नेविगेशन पट्टी। हर घटक छोटा और दोबारा इस्तेमाल करने योग्य निर्माण-खंड होता है।
इस पाठ में आप v0, लवेबल और बोल्ट से माँग पर साफ़-सुथरे घटक बनवाएँगे और उन्हें वास्तविक इंटरफ़ेस में जोड़ना सीखेंगे।
घटक क्या होता है
घटक UI का ऐसा स्वतंत्र हिस्सा है जिसे आप दोबारा इस्तेमाल कर सकते हैं: जैसे एक बटन की परिभाषा, जिसका उपयोग आपके ऐप में 50 बार हो। उसे एक बार बदलने पर वह हर जगह बदल जाता है।
घटकों के रूप में सोचना आपके प्रॉम्प्ट को केंद्रित और आपके ऐप को एकसमान रखता है। अधिकांश AI UI टूल घटक रिएक्ट में बनाते हैं, जो आधुनिक इंटरफ़ेस बनाने का सबसे लोकप्रिय तरीका है।
Common components you'll prompt for:
- Button (primary, secondary, ghost)
- Card (image + title + text + action)
- Form input (label + field + validation)
- Navbar / Footer
- Modal / Dialog
- Avatar, Badge, Tabsबटन के लिए प्रॉम्प्ट लिखना
छोटे से शुरू करें। एक बटन माँगें और उसकी हर स्थिति बताएँ: डिफ़ॉल्ट, हॉवर, निष्क्रिय। स्थितियों के नाम बताने से AI समझता है कि आप बारीक गुणवत्ता पर ध्यान देते हैं।
आप शुरुआत में जितने अधिक रूप माँगेंगे, परिणाम उतना ही अधिक दोबारा इस्तेमाल करने योग्य होगा।
"Create a reusable primary Button component in React.
Rounded corners, a bold accent-blue background, white text.
Include hover (slightly darker) and disabled (greyed out) states.
Accept the label as a prop so I can reuse it."कार्ड के लिए प्रॉम्प्ट लिखना
कार्ड हर जगह होते हैं — उत्पादों, ब्लॉग पोस्ट और प्रोफ़ाइलों में। स्थान बताएँ: कार्ड में क्या आएगा और किस क्रम में आएगा।
AI को बताएँ कि कौन-से हिस्से चित्र, शीर्षक और क्रियाएँ हैं, ताकि लेआउट सही बने।
"Create a product Card component: a square image on top,
then a bold product title, a short description, a price in the
bottom-left, and an 'Add to cart' button in the bottom-right.
Subtle shadow, rounded corners, lifts slightly on hover."फ़ॉर्म के लिए प्रॉम्प्ट लिखना
फ़ॉर्म में विवरण सबसे अधिक महत्वपूर्ण होते हैं: लेबल, स्थानधारक, आवश्यक फ़ील्ड और त्रुटि संदेश। इन्हें स्पष्ट रूप से लिखें।
अच्छे फ़ॉर्म में सत्यापन भी होता है — यानी उपयोगकर्ता को बताना कि कुछ गलत है। इसके लिए स्पष्ट रूप से कहें।
"Create a contact form with three fields: Name, Email, and Message.
Each has a label above it. Email shows a red error if it's not valid.
A 'Send' button at the bottom, disabled until all fields are filled.
Clean, modern styling with generous spacing."आउटपुट को हल्के तौर पर पढ़ना
आपको रिएक्ट लिखना ज़रूरी नहीं है, लेकिन उसकी बनावट पहचानने से आत्मविश्वास बढ़ता है। घटक एक ऐसा फ़ंक्शन होता है जो मार्कअप लौटाता है। नीचे बटन का उस तरह का सरल, फ़्रेमवर्क-रहित संस्करण है जिसे AI आपको समझा सकता है।
आप इस छोटे अंश को चला सकते हैं — यह केवल लेबल का log करता है और यह दिखाता है कि क्लिक किए जाने पर बटन क्या करता है।
function Button(label) {
return {
label: label,
click: function () {
console.log(label + ' was clicked!');
}
};
}
const saveBtn = Button('Save');
saveBtn.click();प्रॉप्स से इसे दोबारा इस्तेमाल करने योग्य बनाएँ
एक बार के डिज़ाइन को दोबारा इस्तेमाल करने योग्य घटक में बदलने वाला शब्द प्रॉप है ('प्रॉपर्टी' का संक्षिप्त रूप) — यानी ऐसा मान जिसे आप उसे अनुकूलित करने के लिए पास करते हैं।
AI से चीज़ों को विन्यास योग्य बनाने को कहें: लेबल, रंग, आकार और आइकन। फिर एक बटन घटक आपके ऐप के हर बटन को संभाल सकता है।
"Refactor my Button so it accepts props: label, variant
('primary' | 'secondary' | 'ghost'), size ('sm' | 'md' | 'lg'),
and an optional left icon. Give each variant distinct styling."एक ही बार में अलग-अलग रूप बनाएँ
पूरा समूह चाहिए? सभी रूप एक साथ माँगें और पूर्वावलोकन गैलरी भी माँगें, ताकि आप उन्हें अगल-बगल देख सकें। v0 जैसे टूल हर विकल्प प्रस्तुत कर देंगे, जिससे आप तुलना कर सकेंगे।
"Generate a Badge component with 4 color variants:
success (green), warning (yellow), error (red), and info (blue).
Then show all four side by side in a small preview gallery
so I can compare them."घटकों को एक पेज में जोड़ना
जब आपके पास बटन, कार्ड और फ़ॉर्म हों, तो उन्हें जोड़ें। पहले बनाए गए घटकों का नाम लेकर संदर्भ दें, ताकि AI नए घटक गढ़ने के बजाय उन्हीं का दोबारा इस्तेमाल करे।
इससे आपका डिज़ाइन एकसमान रहता है — हर जगह वही बटन और अलग-अलग खंडों में वही कार्ड शैली।
"Build a product listing page that uses my existing Card component
in a 3-column responsive grid, with my primary Button as the
'Load more' action at the bottom. Reuse the components — don't
create new styles."आधार के रूप में घटक पुस्तकालय इस्तेमाल करें
कई टूल shadcn/ui जैसी बेहतर पुस्तकालयों पर आधारित होते हैं। इनके सहारे आपको तुरंत सुलभ और पेशेवर घटक मिल जाते हैं, जिन्हें बाद में प्रॉम्प्ट से नए रूप में ढाला जा सकता है।
v0 या लवेबल में आपको कुछ भी हाथ से स्थापित नहीं करना पड़ता — बस इसके लिए कहें।
"Use shadcn/ui components as the foundation. Build a settings panel
with a Card containing toggle switches, a Select dropdown for language,
and a Save button. Match the rest of my app's spacing and colors."घटक बनाने की प्रक्रिया का अभ्यास करें
v0 या लवेबल में यह चक्र आज़माएँ: एक कार्ड बनाएँ, उसे तब तक सुधारें जब तक आप उससे संतुष्ट न हों, फिर ऐसे कार्डों का ग्रिड माँगें। नीचे से ऊपर की ओर बनाना — पहले छोटे हिस्से तैयार करना — पूरे पेज के लिए आँख मूँदकर प्रॉम्प्ट लिखने की तुलना में आपको कहीं अधिक नियंत्रण देता है।
जो प्रॉम्प्ट अच्छे काम करें उन्हें save करें; वे आपका निजी घटक-औज़ार संग्रह बन जाएँगे।
"Create a testimonial Card: a round avatar, the person's name and
role, a star rating, and a quote. Then generate a 3-column grid of
three of these cards with placeholder testimonials."त्वरित जाँच
AI से किसी घटक को प्रॉप्स स्वीकार करने योग्य बनाने को कहना इतना उपयोगी क्यों है?
पुनरावलोकन: माँग पर घटक
आपने दोबारा इस्तेमाल करने योग्य हिस्सों से इंटरफ़ेस बनाना सीखा। एक बार में एक घटक — बटन, कार्ड या फ़ॉर्म — के लिए प्रॉम्प्ट लिखें और उसके स्थानों व स्थितियों का वर्णन करें। प्रॉप्स से घटकों को लचीला बनाएँ, एक ही बार में अलग-अलग रूप बनाएँ और आधार के रूप में shadcn/ui जैसी पुस्तकालयों का सहारा लें।
फिर नाम लेकर घटकों को पेज में जोड़ें, ताकि AI उन्हें दोबारा इस्तेमाल करे, नए न बनाए। आगे आप रंगों, अंतराल और डार्क मोड से हर चीज़ को सुंदर बनाना सीखेंगे — वह भी केवल प्रॉम्प्ट से।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 25
- पाठ
- 100
अक्सर पूछे जाने वाले प्रश्न
क्या “घटक बनाना” पाठ निःशुल्क है?
हाँ — वाइब कोडिंग अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “घटक बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। वाइब कोडिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“घटक बनाना” में मैं क्या सीखूँगा?
आवश्यकतानुसार बटन, कार्ड और फ़ॉर्म बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वाइब कोडिंग का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या वाइब कोडिंग शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वाइब कोडिंग शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“घटक बनाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस वाइब कोडिंग पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर वाइब कोडिंग पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।