` to your markup, you can write `<>` and `` instead:
+यदि आप अपने मार्कअप में एक्स्ट्रा `
` ऐड नहीं करना चाहते हैं, तो आप इसके बजाय `<>` और `` लिख सकते हैं:
```js {1,11}
<>
Hedy Lamarr's Todos
-
@@ -169,62 +166,62 @@ If you don't want to add an extra `` to your markup, you can write `<>` and
```
-This empty tag is called a *[React fragment](TODO)*. React fragments let you group things without leaving any trace in the browser HTML tree.
+इस खाली टैग को *[React fragment](TODO)* कहा जाता है। React fragments आपको ब्राउज़र HTML ट्री में कोई निशान छोड़े बिना चीजों को ग्रुप करने देते हैं।
-
+
-JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a fragment.
+JSX HTML की तरह दिखता है, लेकिन असल में प्लेन जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक ऐरे में रैप किये बिना रिटर्न नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में रैप किये बिना रिटर्न क्यों नहीं कर सकते।
-### 2. Close all the tags {/*2-close-all-the-tags*/}
+### 2. सभी टैग बंद करें {/*2-close-all-the-tags*/}
-JSX requires tags to be explicitly closed: self-closing tags like `![]()
` must become `![]()
`, and wrapping tags like `- oranges` must be written as `
- oranges
`.
+JSX को टैग को स्पष्ट रूप से बंद करने की आवश्यकता है: `![]()
` जैसे सेल्फ-क्लोजिंग टैग `![]()
` बनने चाहिए, और `- संतरा` जैसे रैपिंग टैग को `
- संतरा
` के रूप में लिखा जाना चाहिए।
-This is how Hedy Lamarr's image and list items look closed:
+इस प्रकार Hedy Lamarr की इमेज और लिस्ट आइटम बंद दिखते हैं:
```js {2-6,8-10}
<>
- - Invent new traffic lights
- - Rehearse a movie scene
- - Improve the spectrum technology
+ - नई ट्रैफिक लाइट का आविष्कार करें
+ - एक फिल्म के दृश्य का पूर्वाभ्यास करें
+ - स्पेक्ट्रम तकनीक में सुधार
```
-### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase करें सब ज़्यादातर चीज़ें! {/*3-camelcase-salls-most-of-the-things*/}
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+JSX जावास्क्रिप्ट में बदल जाता है और JSX में लिखी ऐट्रिब्यूट्स जावास्क्रिप्ट ऑब्जेक्ट्स की keys बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन ऐट्रिब्यूट्स को वेरिएबल्स में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में वेरिएबल के नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या `class` जैसे रिज़र्व शब्द नहीं हो सकते हैं।
-This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+यही कारण है कि, React में, कई HTML और SVG ऐट्रिब्यूट्स camelCase में लिखी जाती हैं। उदाहरण के लिए, `stroke-width` के बजाय आप `strokeWidth` का उपयोग करते हैं। चूंकि `class` एक रिजर्व्ड शब्द है, इसलिए React में आप इसके बजाय `className` लिखते हैं, जिसका नाम [संबंधित DOM प्रॉपर्टी](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) के नाम पर रखा गया है।:
```js {4}
```
-You can [find all these attributes in the React DOM Elements](TODO). If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console](https://developer.mozilla.org/docs/Tools/Browser_Console).
+आप [इन सभी ऐट्रिब्यूट्स को React DOM एलिमेंट्स में पा सकते हैं](TODO). यदि आप एक गलत पाते हैं, तो चिंता न करें React संभावित सुधार के साथ एक संदेश [ब्राउज़र कंसोल](https://developer.mozilla.org/docs/Tools/Browser_Console) पर प्रिंट करेगी।
-For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
+ऐतिहासिक कारणों से, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) और [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) ऐट्रिब्यूट्स HTML में डैश के साथ लिखी जाती हैं।
-### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+### प्रो-टिप: JSX कन्वर्टर का उपयोग करें {/*pro-tip-use-a-jsx-converter*/}
-Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+इन सभी ऐट्रिब्यूट्स को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम रिकमेंड करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें।
-Here is your final result:
+यहाँ आपका अंतिम परिणाम है:
@@ -233,15 +230,15 @@ export default function TodoList() {
return (
<>
Hedy Lamarr's Todos
-
- - Invent new traffic lights
- - Rehearse a movie scene
- - Improve the spectrum technology
+ - नई ट्रैफिक लाइट का आविष्कार करें
+ - एक फिल्म के दृश्य का पूर्वाभ्यास करें
+ - स्पेक्ट्रम तकनीक में सुधार
);
@@ -249,28 +246,26 @@ export default function TodoList() {
```
```css
-img { height: 90px }
+img { height: 90px; }
```
-Now you know why JSX exists and how to use it in components:
+अब आप जानते हैं कि JSX क्यों मौजूद है और इसे कौम्पोनॅन्ट्स में कैसे उपयोग किया जाए:
-* React components group rendering logic together with markup because they are related.
-* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
-* Error messages will often point you in the right direction to fixing your markup.
+* React कौम्पोनॅन्ट समूह मार्कअप के साथ लॉजिक रेंडर करता है क्योंकि वे संबंधित हैं।
+* JSX कुछ अंतरों के साथ HTML के समान है। जरूरत पड़ने पर आप [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग कर सकते हैं।
+* एरर मैसेजेस अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे।
-
-
-### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+### कुछ HTML को JSX में बदलें {/*convert-some-html-to-jsx*/}
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+यह HTML एक कौम्पोनॅन्ट में पेस्ट गया था, लेकिन यह JSX वैलिड नहीं है। इसे ठीक करें:
@@ -278,12 +273,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it:
export default function Bio() {
return (
-
Welcome to my website!
+ मेरी वेबसाइट पर स्वागत है!
- You can find my thoughts here.
+ आप यहां मेरे विचार पा सकते हैं।
- And pictures of scientists!
+ और तस्वीरें वैज्ञानिकों की!
);
}
@@ -306,7 +301,7 @@ export default function Bio() {
-Whether to do it by hand or using the converter is up to you!
+इसे हाथ से करना है या कनवर्टर का उपयोग करना आप पर निर्भर है!
@@ -317,12 +312,12 @@ export default function Bio() {
return (
-
Welcome to my website!
+ मेरी वेबसाइट पर स्वागत है!
- You can find my thoughts here.
+ आप यहां मेरे विचार पा सकते हैं।
- And pictures of scientists!
+ और तस्वीरें वैज्ञानिकों की!
);