From a0fb64ea3ba23695dd7def65778d6534bda136d3 Mon Sep 17 00:00:00 2001 From: lucifertrj Date: Mon, 10 Jan 2022 12:01:18 +0530 Subject: [PATCH 1/9] Hindi translation to this page is complete, pushing for review --- .../javascript-in-jsx-with-curly-braces.md | 113 +++++++++--------- 1 file changed, 56 insertions(+), 57 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 6572c23fa..319d12e53 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,24 @@ --- -title: JavaScript in JSX with Curly Braces +title: घुंघराले ब्रेसिज़ के साथ JSX में JavaScript --- -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript. - +JSX आपको तर्क और सामग्री को एक ही स्थान पर प्रस्तुत करते हुए, JavaScript फ़ाइल के अंदर HTML जैसा मार्कअप लिखने देता है। कभी-कभी आप थोड़ा JavaScript तर्क जोड़ना चाहेंगे या उस मार्कअप के अंदर एक गतिशील संपत्ति का संदर्भ देना चाहेंगे। इस स्थिति में, आप JavaScript के लिए एक विंडो खोलने के लिए अपने JSX में घुंघराले ब्रेसिज़ का उपयोग कर सकते हैं। -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces +* उद्धरणों के साथ strings कैसे पास करें +* घुंघराले ब्रेसिज़ के साथ JSX के अंदर एक JavaScript चर का संदर्भ कैसे लें +* घुंघराले ब्रेसिज़ के साथ JSX के अंदर JavaScript फ़ंक्शन को कैसे कॉल करें +* घुंघराले ब्रेसिज़ के साथ JSX के अंदर JavaScript ऑब्जेक्ट का उपयोग कैसे करें -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## उद्धरणों के साथ strings पास करना {/*उद्धरणों-के-साथ-strings-पास-करना*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +जब आप JSX को एक string विशेषता पास करना चाहते हैं, तो आप इसे सिंगल या डबल कोट्स में डालते हैं: @@ -41,9 +40,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +यहां, `"https://i.imgur.com/7vQD0fPs.jpg"` और `"Gregorio Y. Zara"` को strings के रूप में पास किया जा रहा है। -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +लेकिन क्या होगा यदि आप गतिशील रूप से `src` या `alt` टेक्स्ट निर्दिष्ट करना चाहते हैं? आप **`"` और `"` साथ `{` और `}` से बदलकर JavaScript से एक मान का उपयोग** कर सकते हैं: @@ -67,11 +66,11 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +क्लासनाम = "अवतार" के बीच अंतर पर ध्यान दें, जो एक "अवतार" CSS वर्ग का नाम निर्दिष्ट करता है जो छवि को गोल बनाता है, और src={अवतार} जो अवतार नामक JavaScript चर के मूल्य को पढ़ता है। ऐसा इसलिए है क्योंकि घुंघराले ब्रेसिज़ आपको अपने मार्कअप में वहीं JavaScript के साथ काम करने देते हैं! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## घुंघराले ब्रेसिज़ का उपयोग: JavaScript दुनिया में एक खिड़की {/*उपयोग-घुंघराले-ब्रेसिज़-ए-विंडो-में-javascript-दुनिया*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

`: +JSX JavaScript लिखने का एक विशेष तरीका है। इसका मतलब है कि इसके अंदर JavaScript का उपयोग करना संभव है - घुंघराले ब्रेसिज़ के साथ `{ }`। नीचे दिया गया उदाहरण पहले वैज्ञानिक के नाम की घोषणा करता है, `name`, फिर उसे `

` के अंदर घुंघराले ब्रेसिज़ के साथ एम्बेड करता है: @@ -86,9 +85,9 @@ export default function TodoList() { -Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes? +'नाम' के मान को `'Gregorio Y. Zara'` से बदलकर `'Hedy Lamarr'` करने का प्रयास करें। देखें कि टू डू लिस्ट का शीर्षक कैसे बदलता है? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +कोई भी JavaScript अभिव्यक्ति घुंघराले ब्रेसिज़ के बीच काम करेगी, जिसमें फ़ंक्शन कॉल जैसे `formatDate ()` शामिल हैं: @@ -111,18 +110,18 @@ export default function TodoList() { -### Where to use curly braces {/*where-to-use-curly-braces*/} +### घुंघराले ब्रेसिज़ का उपयोग कहाँ करें {/*घुंघराले-ब्रेसिज़-का-उपयोग-कहाँ-करें*/} -You can only use curly braces in two ways inside JSX: +आप JSX के अंदर केवल दो तरीकों से घुंघराले ब्रेसिज़ का उपयोग कर सकते हैं: -1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`. +1. **टेक्स्ट के रूप में** सीधे JSX टैग के अंदर: `

{name}'s टू डू लिस्ट

` काम करता है, लेकिन `<{tag}>Gregorio Y. Zara की टू डू लिस्ट` नहीं होगा। +2. **विशेषताओं के रूप में** तुरंत `=` चिह्न के बाद: `src={avatar}` `अवतार` चर को पढ़ेगा, लेकिन `src="{avatar}"` स्ट्रिंग `{अवतार}` को पास करेगा . -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## "डबल कर्ली" का उपयोग करना: JSX में CSS और अन्य ऑब्जेक्ट {/*उपयोग-डबल-कर्ली-CSS-और-अन्य-वस्तुओं-इन-JSX*/} -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +strings, नंबर्स और अन्य JavaScript एक्सप्रेशंस के अलावा, आप JSX में ऑब्जेक्ट्स को पास भी कर सकते हैं। वस्तुओं को घुंघराले ब्रेसिज़ से भी दर्शाया जाता है, जैसे `{name: "Hedy Lamarr", आविष्कार: 5 }`। इसलिए, JSX में JS ऑब्जेक्ट को पास करने के लिए, आपको ऑब्जेक्ट को घुंघराले ब्रेसिज़ की एक और जोड़ी में लपेटना होगा: `व्यक्ति = {{नाम: "Hedy Lamarr", आविष्कार: 5}}`। -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: +आप इसे JSX में इनलाइन CSS शैलियों के साथ देख सकते हैं। प्रतिक्रिया के लिए आपको इनलाइन शैलियों का उपयोग करने की आवश्यकता नहीं है (CSS कक्षाएं ज्यादातर मामलों के लिए बहुत अच्छा काम करती हैं)। लेकिन जब आपको इनलाइन शैली की आवश्यकता होती है, तो आप ऑब्जेक्ट को `style` विशेषता में पास करते हैं: @@ -148,9 +147,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } -Try changing the values of `backgroundColor` and `color`. +`backgroundColor` और `color` के मानों को बदलने का प्रयास करें। -You can really see the JavaScript object inside the curly braces when you write it like this: +जब आप इसे इस तरह लिखते हैं तो आप वास्तव में JavaScript ऑब्जेक्ट को घुंघराले ब्रेसिज़ के अंदर देख सकते हैं: ```js {2-5}