Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(hi): update astro-components.mdx #10929

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

i18n(hi): update astro-components.mdx #10929

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions src/content/docs/hi/basics/astro-components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
---
title: अवयव
description: .astro अवयव सिंटैक्स का परिचय।
description: Astro अवयव का परिचय।
i18nReady: true
---

**Astro अवयव** किसी भी Astro परियोजना के बुनियादी निर्माण खंड हैं। वे केवल HTML टेम्प्लेटिंग अवयव हैं जिनमें कोई क्लाइंट-साइड रनटाइम नहीं है। आप Astro अवयव को उसके फ़ाइल एक्सटेंशन `.astro` द्वारा देख सकते हैं।
import ReadMore from '~/components/ReadMore.astro';

**Astro अवयव** किसी भी Astro परियोजना के बुनियादी निर्माण खंड हैं। वे केवल HTML टेम्प्लेटिंग अवयव हैं जिनमें कोई क्लाइंट-साइड रनटाइम नहीं है और वे `.astro` फ़ाइल एक्सटेंशन `.astro` का उपयोग करते हैं।

:::note
यदि आप HTML जानते हैं, तो आप अपना पहला Astro अवयव लिखने के लिए पहले से ही पर्याप्त जानते हैं।

<ReadMore>[Astro सिंटैक्स संदर्भ](/hi/reference/astro-syntax/) में अधिक जानें</ReadMore>
:::

Astro अवयव अत्यंत लचीले हैं। अक्सर, Astro अवयव में पेज पर कुछ **पुन: प्रयोज्य UI** शामिल होगा, जैसे हेडर या प्रोफाइल कार्ड। अन्य समय में, Astro अवयव में HTML का एक छोटा सा स्निपेट हो सकता है, जैसे सामान्य `<meta>` टैग का संग्रह जो SEO के साथ काम करना आसान बनाता है। Astro अवयवों में संपूर्ण पेज लेआउट भी शामिल हो सकता है।
Astro अवयव अत्यंत लचीले होते हैं। Astro अवयव HTML के स्निपेट जितना छोटा हो सकता है, जैसे कि सामान्य `<meta>` टैग का संग्रह जो SEO को काम करने में आसान बनाता है। अवयव पुन: उपयोग करने योग्य UI तत्व हो सकते हैं, जैसे हेडर या प्रोफ़ाइल कार्ड। Astro अवयव में संपूर्ण पृष्ठ लेआउट भी हो सकता है या, जब विशेष `src/pages/` फ़ोल्डर में स्थित हो, तो वह स्वयं एक संपूर्ण पृष्ठ हो सकता है।

Astro अवयवों के बारे में जानने वाली सबसे महत्वपूर्ण बात यह है कि वे **ग्राहक पर प्रस्तुत नहीं होते हैं**। वे [सर्वर-साइड रेंडरिंग (SSR)](/hi/guides/on-demand-rendering/) का उपयोग करके बिल्ड-समय या ऑन-डिमांड पर HTML को प्रस्तुत करते हैं। आप अपने अवयव फ्रंटमैटर के अंदर JavaScript कोड शामिल कर सकते हैं, और यह सब आपके उपयोगकर्ताओं के ब्राउज़र पर भेजे गए अंतिम पेज से हटा दिया जाएगा। परिणाम एक तेज़ साइट है, जिसमें डिफ़ॉल्ट रूप से शून्य JavaScript पदचिह्न जोड़ा गया है।
Astro अवयवों के बारे में जानने के लिए सबसे महत्वपूर्ण बात यह है कि वे **ग्राहक पर रेंडर नहीं करते हैं**। वे बिल्ड-टाइम या ऑन-डिमांड पर HTML में रेंडर करते हैं। आप अपने अवयव फ्रंटमैटर के अंदर JavaScript कोड शामिल कर सकते हैं, और यह सब आपके उपयोगकर्ताओं के ब्राउज़रों को भेजे गए अंतिम पेज से हटा दिया जाएगा। परिणाम एक तेज़ साइट है, जिसमें डिफ़ॉल्ट रूप से शून्य JavaScript पदचिह्न जोड़ा गया है।

जब आपके Astro अवयव को क्लाइंट-साइड अन्तरक्रियाशीलता की आवश्यकता होती है, तो आप [मानक HTML `<script>` टैग](/hi/guides/client-side-scripts/) या [UI फ्रेमवर्क अवयव](/hi/guides/framework-components/#hydrating-interactive-components) जोड़ सकते हैं।

ऐसे अवयवों के लिए जिन्हें वैयक्तिकृत या गतिशील सामग्री प्रस्तुत करने की आवश्यकता है, आप [सर्वर निर्देश](/hi/reference/directives-reference/#server-directives) जोड़कर उनके सर्वर रेंडरिंग को स्थगित कर सकते हैं। ये "सर्वर द्वीप समूह" अपनी सामग्री को तब प्रस्तुत करेंगे जब वह उपलब्ध होगी, पूरे पृष्ठ लोड में देरी किए बिना।

## अवयव संरचना

Expand Down Expand Up @@ -54,7 +63,9 @@ const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
कोड बाड़ को यह गारंटी देने के लिए डिज़ाइन किया गया है कि आप इसमें जो JavaScript लिखते हैं वह "फेंस इन" है। यह आपके फ्रंटएंड एप्लिकेशन में नहीं बचेगा, या आपके उपयोगकर्ता के हाथों में नहीं आएगा। आप यहां सुरक्षित रूप से वह कोड लिख सकते हैं जो महंगा या संवेदनशील है (जैसे आपके निजी डेटाबेस पर कॉल) बिना इसके आपके उपयोगकर्ता के ब्राउज़र में समाप्त होने की चिंता किए।

:::tip
आप अपनी अवयव स्क्रिप्ट में TypeScript भी लिख सकते हैं!
Astro अवयव स्क्रिप्ट TypeScript है, जो आपको संपादक टूलिंग और त्रुटि जाँच के लिए JavaScript में अतिरिक्त सिंटैक्स जोड़ने की अनुमति देता है।

<ReadMore>Astro के [बिल्ट-इन TypeScript समर्थन](/hi/guides/typescript/) के बारे में और पढ़ें।</ReadMore>
:::

### अवयव टेम्पलेट
Expand All @@ -69,6 +80,7 @@ const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
// आपकी अवयव स्क्रिप्ट यहाँ!
import Banner from '../components/Banner.astro';
import Avatar from '../components/Avatar.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
Expand All @@ -82,6 +94,11 @@ const { title } = Astro.props;
<!-- अवयव स्क्रिप्ट से प्रॉप्स और अन्य चर का उपयोग करें: -->
<p>{title}</p>

<!-- Delay component rendering and provide fallback loading content: -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@at-the-vr you missed this comment to translate!

<Avatar server:defer>
<svg slot="fallback" class="generic-avatar" transition:name="avatar">...</svg>
</Avatar>

<!-- हाइड्रेट करने के लिए `client:` निर्देश के साथ अन्य UI फ्रेमवर्क अवयवों को शामिल करें: -->
<ReactPokemonComponent client:visible />

Expand Down Expand Up @@ -371,7 +388,6 @@ import HomeLayout from '../layouts/HomeLayout.astro';
</HomeLayout>
```


## HTML अवयव

Astro `.html` फ़ाइलों को अवयवों के रूप में आयात करने और उपयोग करने या इन फ़ाइलों को `src/pages/` उपनिर्देशिका में पेजों के रूप में रखने का समर्थन करता है। यदि आप किसी फ्रेमवर्क के बिना निर्मित मौजूदा साइट से कोड का पुन: उपयोग कर रहे हैं, या यदि आप यह सुनिश्चित करना चाहते हैं कि आपके अवयव में कोई गतिशील विशेषताएं नहीं हैं, तो आप HTML अवयवों का उपयोग करना चाह सकते हैं।
Expand All @@ -387,6 +403,4 @@ HTML अवयव के अंदर एक [`<slot />` तत्व](/hi/basic

## अगले कदम

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>अपने Astro परियोजना में [UI फ्रेमवर्क अवयवों](/hi/guides/framework-components/) का उपयोग करने के बारे में और पढ़ें।</ReadMore>