Frontend Academy · पाठ

डिज़ाइन सिस्टम का उपयोग

होस्ट ऐप में लाइब्रेरी इंस्टॉल करें, थीम प्रोवाइडर लागू करें, अप्रयुक्त कंपोनेंट हटाने के लिए ट्री-शेक करें, और वर्ज़न अपग्रेड के साथ अद्यतन रहें।

पाठ 4, कुल 4 में से14 चरण

डिज़ाइन सिस्टम का उपयोग, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इंस्टॉल और सेटअप

डिज़ाइन सिस्टम को निर्भरता के रूप में जोड़ें। कुछ लाइब्रेरी को अतिरिक्त सेटअप की आवश्यकता होती है: provider, CSS इम्पोर्ट और फ़ॉन्ट लोड करना।

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

थीम प्रोवाइडर

अधिकांश डिज़ाइन सिस्टम थीम (हल्की/गहरी), locale और साझा context के लिए शीर्ष-स्तरीय provider देते हैं। अपने ऐप को एक बार इसमें लपेटें।

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

Components इम्पोर्ट करना

केवल आवश्यक चीज़ें इम्पोर्ट करें — ट्री-शेकिंग के साथ केवल उपयोग किए गए components ही जारी किए जाते हैं।

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

सबपाथ इम्पोर्ट्स

कुछ लाइब्रेरी स्पष्टता और बंडल का आकार घटाने के लिए सबपाथ इम्पोर्ट्स का समर्थन करती हैं।

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

ट्री-शेकिंग के सुझाव

बंडलिंग के दौरान ट्री-शेकिंग अप्रयुक्त एक्सपोर्ट्स हटा देती है। इसके लिए आवश्यक है: ESM बिल्ड, लाइब्रेरी के package.json में sideEffects: false, और अपने कोड में नामित इम्पोर्ट्स। बंडल विश्लेषक से इसकी पुष्टि करें।

थीम के साथ अनुकूलन

लाइब्रेरी की अलग शाखा बनाए बिना, अपने ब्रांड के अनुरूप थीम के टोकन बदलें।

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

घटकों का विस्तार

क्या आपको थोड़ा अलग बटन चाहिए? अलग शाखा बनाने के बजाय संयोजन करें।

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

अपग्रेड करने से पहले CHANGELOG पढ़ना

MAJOR संस्करणों में अपग्रेड करने से पहले हमेशा CHANGELOG पढ़ें। ऐसे बदलाव देखें जो संगतता तोड़ते हों, माइग्रेशन के लिए कोडमॉड उपलब्ध हों और नए अनुशंसित API दिए गए हों।

बड़े अपग्रेड के लिए कोडमॉड

अच्छी लाइब्रेरी ऐसे कोडमॉड (jscodeshift स्क्रिप्ट) उपलब्ध कराती हैं, जो संगतता तोड़ने वाले बदलावों के माइग्रेशन को स्वचालित करते हैं।

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

पिन करना बनाम कैरेट

"^1.4.2" से 1.x.y अपग्रेड की अनुमति मिलती है — यदि लाइब्रेरी SemVer का पालन न करे, तो यह जोखिमपूर्ण है। "1.4.2" सटीक संस्करण पर रोकता है — यह सबसे सुरक्षित है, लेकिन आपको स्वयं अपडेट करना होगा। Renovate/Dependabot साप्ताहिक अपडेट को स्वचालित करने में सहायता करते हैं।

अपस्ट्रीम में समस्याएँ रिपोर्ट करना

क्या आपको कोई त्रुटि मिली? न्यूनतम पुनरुत्पादन के साथ समस्या दर्ज करें। कोई सुविधा चाहिए? पहले चर्चा शुरू करें। अपने सुधारों का योगदान देने से सभी के लिए डिज़ाइन सिस्टम बेहतर बनता है।

स्टाइल ओवरराइड से बचना

!important या वंशज चयनकर्ताओं के माध्यम से डिज़ाइन सिस्टम के आंतरिक हिस्सों तक न पहुँचें। सार्वजनिक थीमिंग API का उपयोग करें। अव्यवस्थित ओवरराइड अगले अपग्रेड में टूट सकते हैं।

त्वरित जाँच

यदि कोई डिज़ाइन सिस्टम ESM और नामित एक्सपोर्ट का उपयोग करता है, तो केवल आवश्यक घटकों को लेने का सबसे साफ़ तरीका क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: डिज़ाइन सिस्टम का उपयोग

इंस्टॉल करें और थीम के साथ DesignSystemProvider में रैप करें। ट्री-शेकिंग के लिए नामित ESM इम्पोर्ट का उपयोग करें। ब्रांड के लिए थीम टोकन बदलें। अलग शाखा बनाने के बजाय संयोजन करें। MAJOR अपग्रेड से पहले CHANGELOG पढ़ें; उपलब्ध होने पर कोडमॉड चलाएँ। पिन या कैरेट का सावधानी से उपयोग करें। त्रुटियों या PR का अपस्ट्रीम में योगदान करें। सार्वजनिक API के आसपास !important का सहारा न लें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “डिज़ाइन सिस्टम का उपयोग” पाठ निःशुल्क है?

हाँ—“डिज़ाइन सिस्टम का उपयोग” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“डिज़ाइन सिस्टम का उपयोग” में मैं क्या सीखूँगा?

होस्ट ऐप में लाइब्रेरी इंस्टॉल करें, थीम प्रोवाइडर लागू करें, अप्रयुक्त कंपोनेंट हटाने के लिए ट्री-शेक करें, और वर्ज़न अपग्रेड के साथ अद्यतन रहें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“डिज़ाइन सिस्टम का उपयोग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Frontend Academy पर वापस जाएँ