Sveltejs Academy · पाठ

{#snippet} और {@render}

स्निपेट के साथ पुनः उपयोग योग्य टेम्पलेट खंड परिभाषित करें और उन्हें कहीं भी रेंडर करें।

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

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

स्निपेट

स्निपेट Svelte 5 में दोबारा उपयोग किए जा सकने वाले टेम्पलेट खंड होते हैं, जो रेंडर फ़ंक्शन या नामित स्लॉट के समान होते हैं।

स्निपेट परिभाषित करें

{#snippet name(args)}...{/snippet} का उपयोग करें।

{#snippet greeting(name)}
  <p>Hello, {name}!</p>
{/snippet}

स्निपेट रेंडर करें

इसे लागू करने के लिए {@render name(args)} का उपयोग करें।

{@render greeting("Ada")}

स्निपेट पैरामीटर

स्निपेट फ़ंक्शन की तरह तर्क स्वीकार करते हैं; रेंडर उन्हें पास करता है।

दोबारा उपयोग

एक बार परिभाषित करें और अलग-अलग तर्कों के साथ कई बार रेंडर करें।

{@render greeting("Ada")}
{@render greeting("Bea")}

दोहराव का स्थान लेना

स्निपेट मार्कअप-प्रधान घटकों में दोहराव कम करते हैं।

घटकों में परिभाषित

स्निपेट किसी घटक के मार्कअप के अंदर रहते हैं, JS में नहीं।

दायरा

स्निपेट अपने चारों ओर मौजूद घटक के दायरे में चर का संदर्भ ले सकते हैं।

प्रॉप्स के रूप में पास करें

लचीले संयोजन के लिए स्निपेट को अन्य घटकों में प्रॉप्स के रूप में पास किया जा सकता है।

स्लॉट का विकल्प

स्निपेट स्लॉट को सामान्य रूप देते हैं: वे अधिक लचीले, संयोज्य और टाइपयुक्त होते हैं।

TypeScript

स्निपेट के प्रकार उनके पैरामीटर और लौटाए गए प्रकारों से स्वतः अनुमानित होते हैं।

त्वरित जाँच

आप किसी स्निपेट को कैसे रेंडर करते हैं?

पुनरावलोकन

स्निपेट पैरामीटरयुक्त टेम्पलेट खंड होते हैं। {#snippet} से परिभाषित करें और {@render} से लागू करें।

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

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

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

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

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

क्या “{#snippet} और {@render}” पाठ निःशुल्क है?

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

“{#snippet} और {@render}” में मैं क्या सीखूँगा?

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

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

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

“{#snippet} और {@render}” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

  1. टाइपयुक्त प्रॉप्स के लिए $props()
  2. {#snippet} और {@render}
  3. स्निपेट को प्रॉप्स के रूप में पास करना
  4. डिफ़ॉल्ट और नामित स्निपेट
← Sveltejs Academy पर वापस जाएँ