Astro सिंटेक्स
यदि आप HTML जानते हैं, तो आप अपना पहला Astro अवयव लिखने के लिए पहले से ही पर्याप्त जानते हैं।
Astro अवयव सिंटैक्स एक सुपरसेट है HTML का। सिंटैक्स को HTML या JSX लिखने का अनुभव रखने वाले किसी भी व्यक्ति को परिचित महसूस कराने के लिए डिज़ाइन किया गया था, और अवयवों और JavaScript एक्सप्रेशन को शामिल करने के लिए समर्थन जोड़ता है।
JSX-जैसे एक्सप्रेशन
शीर्षक JSX-जैसे एक्सप्रेशनआप Astro अवयव के दो कोड बाड़ (---) के बीच फ्रंटमैटर अवयव स्क्रिप्ट के अंदर स्थानीय JavaScript चर को परिभाषित कर सकते हैं। फिर आप JSX-जैसी एक्सप्रेशन का उपयोग करके इन चरों को अवयव के HTML टेम्पलेट में इंजेक्ट कर सकते हैं!
घुंघराले ब्रेसिज़ सिंटैक्स का उपयोग करके स्थानीय चर को HTML में जोड़ा जा सकता है:
---const name = "Astro";---<div> <h1>Hello {name}!</h1> <!-- <h1>Hello Astro!</h1> मिलेगा --></div>गतिशील विशेषताएँ
शीर्षक गतिशील विशेषताएँस्थानीय चर का उपयोग HTML तत्वों और अवयवों दोनों में विशेषता मानों को पारित करने के लिए घुंघराले ब्रेसिज़ में किया जा सकता है:
---const name = "Astro";---<h1 class={name}>विशेषता एक्सप्रेशन समर्थित हैं</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />गतिशील HTML
शीर्षक गतिशील HTMLगतिशील रूप से उत्पन्न HTML तत्वों का उत्पादन करने के लिए JSX-जैसे फ़ंक्शंस में स्थानीय चर का उपयोग किया जा सकता है:
---const items = ["Dog", "Cat", "Platypus"];---<ul> {items.map((item) => ( <li>{item}</li> ))}</ul>Astro JSX तार्किक ऑपरेटरों और टर्नरी एक्सप्रेशन का उपयोग करके HTML को सशर्त रूप से प्रदर्शित कर सकता है।
---const visible = true;---{visible && <p>मुझे दिखाओ!</p>}
{visible ? <p>मुझे दिखाओ!</p> : <p>वरना मुझे दिखाओ!</p>}गतिशील टैग
शीर्षक गतिशील टैगआप HTML टैग नाम या अवयव आयात में एक चर सेट करके गतिशील टैग का भी उपयोग कर सकते हैं:
---import MyComponent from "./MyComponent.astro";const Element = 'div'const Component = MyComponent;---<Element>Hello!</Element> <!-- renders as <div>Hello!</div> --><Component /> <!-- renders as <MyComponent /> -->गतिशील टैग का उपयोग करते समय:
-
चर नामों को बड़े अक्षरों में लिखा जाना चाहिए। उदाहरण के लिए,
Elementका उपयोग करें,elementका नहीं। अन्यथा, Astro आपके वैरिएबल नाम को शाब्दिक HTML टैग के रूप में प्रस्तुत करने का प्रयास करेगा। -
हाइड्रेशन निर्देश समर्थित नहीं हैं।
client:*हाइड्रेशन निर्देशों (EN) का उपयोग करते समय, Astro को यह जानना होगा कि उत्पादन के लिए किन घटकों को बंडल करना है, और गतिशील टैग पैटर्न इसे काम करने से रोकता है। -
define:vars directive (EN) समर्थित नहीं है। यदि आप चिल्ड्रन को एक अतिरिक्त तत्व (जैसे
<div>) के साथ लपेट नहीं सकते हैं, तो आप नियमावली रूप से अपने तत्व मेंstyle={``--myVar:${value}``}जोड़ सकते हैं।
फ़्रैगमेन्ट्स
शीर्षक फ़्रैगमेन्ट्सAstro या तो <Fragment> </Fragment> या संक्षेप <> </> का उपयोग करने का समर्थन करता है।
set:* निर्देश (EN) जोड़ते समय आवरण तत्वों से बचने के लिए फ़्रैगमेन्ट्स उपयोगी हो सकते हैं, जैसा कि निम्नलिखित उदाहरण में है:
---const htmlString = '<p>कच्ची HTML सामग्री</p>';---<Fragment set:html={htmlString} />Astro और JSX के बीच अंतर
शीर्षक Astro और JSX के बीच अंतरAstro अवयव सिंटैक्स HTML का एक सुपरसेट है। इसे HTML या JSX अनुभव वाले किसी भी व्यक्ति को परिचित महसूस कराने के लिए डिज़ाइन किया गया था, लेकिन .astro फ़ाइलों और JSX के बीच कुछ महत्वपूर्ण अंतर हैं।
विशेषताएँ
शीर्षक विशेषताएँAstro में, आप JSX में प्रयुक्त camelCase के बजाय सभी HTML विशेषताओं के लिए मानक kebab-case प्रारूप का उपयोग करते हैं। यह class के लिए भी काम करता है, जो React द्वारा समर्थित नहीं है।
<div className="box" dataValue="3" /><div class="box" data-value="3" />एकाधिक तत्व
शीर्षक एकाधिक तत्वएक Astro अवयव टेम्पलेट JavaScript या JSX के विपरीत, एक <div> या <> में सब कुछ लपेटने की आवश्यकता के बिना कई तत्वों को प्रस्तुत कर सकता है।
---// एकाधिक तत्वों वाला टेम्पलेट---<p>तत्वों को एक ही तत्व में लपेटने की आवश्यकता नहीं है।</p><p>Astro एक टेम्पलेट में एकाधिक मूल तत्वों का समर्थन करता है।</p>टिप्पणियाँ
शीर्षक टिप्पणियाँAstro में, आप मानक HTML टिप्पणियों या JavaScript-शैली टिप्पणियों का उपयोग कर सकते हैं।
------<!-- HTML टिप्पणी सिंटैक्स .astro फ़ाइलों में मान्य है -->{/* JS टिप्पणी सिंटैक्स भी मान्य है */}