From 3d2aac6775fe2ef82762a6c7996437597b450eb5 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Tue, 15 Mar 2022 10:59:35 +0530 Subject: [PATCH 01/11] Update writing-markup-with-jsx.md --- .../pages/learn/writing-markup-with-jsx.md | 189 +++++++++--------- 1 file changed, 92 insertions(+), 97 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index c66348161..ced2e3131 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -1,60 +1,60 @@ --- -title: Writing Markup with JSX +title: JSX के साथ मार्कअप लिखना --- -JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it. +JSX जावास्क्रिप्ट के लिए एक सिंटैक्स एक्सटेंशन है जो आपको जावास्क्रिप्ट फ़ाइल के अंदर HTML जैसा मार्कअप लिखने देता है। यद्यपि कौम्पोनॅन्ट्स को लिखने के अन्य तरीके हैं, अधिकांश React डेवलपर्स JSX की संक्षिप्तता को पसंद करते हैं, और अधिकांश कोडबेस इसका उपयोग करते हैं। -* Why React mixes markup with rendering logic -* How JSX is different from HTML -* How to display information with JSX +- React मार्कअप को रेंडरिंग लॉजिक के साथ क्यों मिलाता है +- JSX HTML से कैसे अलग है +- JSX के साथ जानकारी कैसे प्रदर्शित करें -## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/} +## JSX: जावास्क्रिप्ट में मार्कअप डालना {/_jsx-putting-markup-into-javascript_/} -The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript: +वेब को HTML, CSS और जावास्क्रिप्ट पर बनाया गया है। कई वर्षों तक, वेब डेवलपर्स ने HTML में सामग्री, CSS में डिज़ाइन और जावास्क्रिप्ट में तर्क-अक्सर अलग-अलग फाइलों में रखा! सामग्री को HTML के अंदर चिह्नित किया गया था जबकि पेज का तर्क जावास्क्रिप्ट में अलग से रहता था: -![HTML and JavaScript living in separate files](/images/docs/illustrations/i_html_js.svg) +![HTML और जावास्क्रिप्ट अलग-अलग फाइलों में रहते हैं](/images/docs/illustrations/i_html_js.svg) -But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!** +लेकिन जैसे-जैसे वेब अधिक संवादात्मक होता गया, तर्क सामग्री को अधिकाधिक निर्धारित करता गया। जावास्क्रिप्ट HTML का प्रभारी था! यही कारण है कि **React में, रेंडरिंग लॉजिक और मार्कअप एक ही स्थान पर एक साथ रहते हैं—कौम्पोनॅन्ट!** -![JavaScript functions sprinkled with markup](/images/docs/illustrations/i_jsx.svg) +![जावास्क्रिप्ट फ़ंक्शन मार्कअप के साथ छिड़का हुआ](/images/docs/illustrations/i_jsx.svg) -Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own. +एक बटन के रेंडरिंग लॉजिक और मार्कअप को एक साथ रखने से यह सुनिश्चित होता है कि वे प्रत्येक संपादन पर एक दूसरे के साथ तालमेल बिठाते रहें। इसके विपरीत, जो विवरण असंबंधित हैं, जैसे कि बटन का मार्कअप और साइडबार का मार्कअप, एक दूसरे से अलग हो जाते हैं, जिससे उनमें से किसी एक को अपने आप बदलना सुरक्षित हो जाता है। -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup. +प्रत्येक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसमें कुछ मार्कअप हो सकते हैं जो React ब्राउज़र में रेंडर करता है। प्रतिक्रिया कौम्पोनॅन्ट उस मार्कअप का प्रतिनिधित्व करने के लिए JSX नामक एक सिंटैक्स एक्सटेंशन का उपयोग करते हैं। JSX HTML की तरह दिखता है, लेकिन यह थोड़ा सख्त है और गतिशील जानकारी प्रदर्शित कर सकता है। इसे समझने का सबसे अच्छा तरीका कुछ HTML मार्कअप को JSX मार्कअप में बदलना है। -[JSX and React are two separate things](/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) you _can_ use independently of each other. +[JSX और React दो अलग चीजें हैं](/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) आप एक दूसरे से स्वतंत्र रूप से उपयोग कर सकते हैं। -## Converting HTML to JSX {/*converting-html-to-jsx*/} +## HTML को JSX में कनवर्ट करना {/_converting-html-to-jsx_/} -Suppose that you have some (perfectly valid) HTML: +मान लीजिए कि आपके पास कुछ (पूरी तरह से मान्य) HTML है: ```html -

Hedy Lamarr's Todos

+

हेडी लैमर का टोडोस

Hedy Lamarr + alt="हेडी लैमर" + class="photo" + /> ``` -And you want to put it into your component: +और आप इसे अपने कौम्पोनॅन्ट में रखना चाहते हैं: ```js export default function TodoList() { @@ -64,58 +64,56 @@ export default function TodoList() { } ``` -If you copy and paste it as is, it will not work: - +यदि आप इसे वैसे ही कॉपी और पेस्ट करते हैं, तो यह काम नहीं करेगा: ```js export default function TodoList() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todos

- Hedy Lamarrहेडी लैमर का टोडोस + हेडी लैमर ); } ``` ```css -img { height: 90px } +img { height: 90px; } ``` -This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below. +ऐसा इसलिए है क्योंकि JSX सख्त है और इसमें HTML की तुलना में कुछ और नियम हैं! यदि आप ऊपर दिए गए त्रुटि संदेशों को पढ़ते हैं, तो वे मार्कअप को ठीक करने के लिए आपका मार्गदर्शन करेंगे, या आप नीचे दी गई मार्गदर्शिका का अनुसरण कर सकते हैं। -Most of the times, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck! - +अधिकांश समय, React के ऑन-स्क्रीन त्रुटि संदेश आपको यह पता लगाने में मदद करेंगे कि समस्या कहाँ है। अगर आप फंस गए हैं तो उन्हें पढ़ लें! -## The Rules of JSX {/*the-rules-of-jsx*/} +## JSX के नियम {/_the-rules-of-jsx_/} -### 1. Return a single root element {/*1-return-a-single-root-element*/} +### 1. एकल मूल तत्व लौटाएं {/_1-return-a-single-root-element_/} -To return multiple elements from a component, **wrap them with a single parent tag**. +एक कौम्पोनॅन्ट से कई तत्वों को वापस करने के लिए, **उन्हें सिंगल पैरेंट टैग के साथ लपेटें**। -For example, you can use a `
`: +उदाहरण के लिए, आप एक `
` का उपयोग कर सकते हैं: ```js {1,11}
-

Hedy Lamarr's Todos

- Hedy Lamarrहेडी लैमर का टोडोस + हेडी लैमर
    @@ -124,15 +122,14 @@ For example, you can use a `
    `:
    ``` - -If you don't want to add an extra `
    ` to your markup, you can write `<>` and `` instead: +यदि आप अपने मार्कअप में अतिरिक्त `
    ` नहीं जोड़ना चाहते हैं, तो आप इसके बजाय `<>` और `` लिख सकते हैं: ```js {1,11} <> -

    Hedy Lamarr's Todos

    - Hedy Lamarrहेडी लैमर का टोडोस + हेडी लैमर
      @@ -141,62 +138,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. +इस खाली टैग को _[प्रतिक्रिया टुकड़ा] कहा जाता है।](TODO)_. प्रतिक्रिया के टुकड़े आपको ब्राउज़र 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 टैग को दूसरे टैग या टुकड़े में लपेटे बिना वापस क्यों नहीं कर सकते। -### 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: +इस प्रकार हेडी लैमर की छवि और सूची आइटम बंद दिखते हैं: ```js {2-6,8-10} <> Hedy Lamarr
        -
      • 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 में लिखी विशेषताएँ जावास्क्रिप्ट ऑब्जेक्ट्स की कुंजी बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन विशेषताओं को चरों में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में चर नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या `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` एक आरक्षित शब्द है, इसलिए प्रतिक्रिया में आप इसके बजाय `className` लिखते हैं, जिसका नाम [संबंधित DOM संपत्ति](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) के नाम पर रखा गया है।: ```js {4} Hedy Lamarr ``` -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). यदि आप एक गलत पाते हैं, तो चिंता न करें—प्रतिक्रिया संभावित सुधार के साथ एक संदेश [ब्राउज़र कंसोल](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*/} +### Pro-tip: Use a JSX Converter {/_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: +यहाँ आपका अंतिम परिणाम है: @@ -204,16 +201,16 @@ Here is your final result: export default function TodoList() { return ( <> -

      Hedy Lamarr's Todos

      - Hedy Lamarrहेडी लैमर का टोडोस + हेडी लैमर
        -
      • Invent new traffic lights
        • -
      • Rehearse a movie scene
        • -
      • Improve the spectrum technology
        • +
      • नई ट्रैफिक लाइट का आविष्कार करें
        • +
      • एक फिल्म के दृश्य का पूर्वाभ्यास करें
        • +
      • स्पेक्ट्रम तकनीक में सुधार
      ); @@ -221,28 +218,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 मान्य नहीं है। इसे ठीक करें: @@ -250,12 +245,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! + और तस्वीरें वैज्ञानिकों की!

      ); } @@ -278,7 +273,7 @@ export default function Bio() {       -Whether to do it by hand or using the converter is up to you! +इसे हाथ से करना है या कनवर्टर का उपयोग करना आप पर निर्भर है! @@ -289,12 +284,12 @@ export default function Bio() { return (
      -

      Welcome to my website!

      +

      मेरी वेबसाइट पर स्वागत है!

      - You can find my thoughts here. + आप यहां मेरे विचार पा सकते हैं।

      - And pictures of scientists! + और तस्वीरें वैज्ञानिकों की!

      ); @@ -320,4 +315,4 @@ export default function Bio() {       -       \ No newline at end of file + From 0b7d00e7277980f2476c2c8549a99915aef92400 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Thu, 24 Mar 2022 19:23:53 +0530 Subject: [PATCH 02/11] Update writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index ced2e3131..d603e9222 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -12,23 +12,23 @@ JSX जावास्क्रिप्ट के लिए एक सिंट - React मार्कअप को रेंडरिंग लॉजिक के साथ क्यों मिलाता है - JSX HTML से कैसे अलग है -- JSX के साथ जानकारी कैसे प्रदर्शित करें +- JSX के साथ जानकारी कैसे डिस्प्ले करें -## JSX: जावास्क्रिप्ट में मार्कअप डालना {/_jsx-putting-markup-into-javascript_/} +## JSX: जावास्क्रिप्ट में मार्कअप डालना {/*jsx-putting-markup-into-javascript*/} -वेब को HTML, CSS और जावास्क्रिप्ट पर बनाया गया है। कई वर्षों तक, वेब डेवलपर्स ने HTML में सामग्री, CSS में डिज़ाइन और जावास्क्रिप्ट में तर्क-अक्सर अलग-अलग फाइलों में रखा! सामग्री को HTML के अंदर चिह्नित किया गया था जबकि पेज का तर्क जावास्क्रिप्ट में अलग से रहता था: +वेब को HTML, CSS और जावास्क्रिप्ट पर बनाया गया है। कई वर्षों तक, वेब डेवलपर्स ने HTML में कंटेंट, CSS में डिज़ाइन और जावास्क्रिप्ट में लॉजिक अक्सर अलग-अलग फाइलों में रखा! कंटेंट को HTML के अंदर चिह्नित किया गया था जबकि पेज का लॉजिक जावास्क्रिप्ट में अलग से रहता था: ![HTML और जावास्क्रिप्ट अलग-अलग फाइलों में रहते हैं](/images/docs/illustrations/i_html_js.svg) -लेकिन जैसे-जैसे वेब अधिक संवादात्मक होता गया, तर्क सामग्री को अधिकाधिक निर्धारित करता गया। जावास्क्रिप्ट HTML का प्रभारी था! यही कारण है कि **React में, रेंडरिंग लॉजिक और मार्कअप एक ही स्थान पर एक साथ रहते हैं—कौम्पोनॅन्ट!** +लेकिन जैसे-जैसे वेब अधिक संवादात्मक होता गया, लॉजिक कंटेंट को अधिकाधिक निर्धारित करता गया। जावास्क्रिप्ट HTML का इन्चार्ज था! यही कारण है कि **React में, रेंडरिंग लॉजिक और मार्कअप एक ही स्थान पर एक साथ रहते हैं—कौम्पोनॅन्टस!** -![जावास्क्रिप्ट फ़ंक्शन मार्कअप के साथ छिड़का हुआ](/images/docs/illustrations/i_jsx.svg) +![मार्कअप के साथ छिड़का हुआ जावास्क्रिप्ट फ़ंक्शन](/images/docs/illustrations/i_jsx.svg) -एक बटन के रेंडरिंग लॉजिक और मार्कअप को एक साथ रखने से यह सुनिश्चित होता है कि वे प्रत्येक संपादन पर एक दूसरे के साथ तालमेल बिठाते रहें। इसके विपरीत, जो विवरण असंबंधित हैं, जैसे कि बटन का मार्कअप और साइडबार का मार्कअप, एक दूसरे से अलग हो जाते हैं, जिससे उनमें से किसी एक को अपने आप बदलना सुरक्षित हो जाता है। +एक बटन के रेंडरिंग लॉजिक और मार्कअप को एक साथ रखने से यह सुनिश्चित होता है कि वे प्रत्येक संपादन पर एक दूसरे के साथ तालमेल बिठाते रहें। इसके विपरीत, जो डिटेल्स असंबंधित हैं, जैसे कि बटन का मार्कअप और साइडबार का मार्कअप, एक दूसरे से अलग हो जाते हैं, जिससे उनमें से किसी एक को अपने आप बदलना सुरक्षित हो जाता है। -प्रत्येक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसमें कुछ मार्कअप हो सकते हैं जो React ब्राउज़र में रेंडर करता है। प्रतिक्रिया कौम्पोनॅन्ट उस मार्कअप का प्रतिनिधित्व करने के लिए JSX नामक एक सिंटैक्स एक्सटेंशन का उपयोग करते हैं। JSX HTML की तरह दिखता है, लेकिन यह थोड़ा सख्त है और गतिशील जानकारी प्रदर्शित कर सकता है। इसे समझने का सबसे अच्छा तरीका कुछ HTML मार्कअप को JSX मार्कअप में बदलना है। +प्रत्येक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसमें कुछ मार्कअप हो सकते हैं जो React ब्राउज़र में रेंडर करता है। प्रतिक्रिया कौम्पोनॅन्ट उस मार्कअप का प्रतिनिधित्व करने के लिए JSX नामक एक सिंटैक्स एक्सटेंशन का उपयोग करते हैं। JSX HTML की तरह दिखता है, लेकिन यह थोड़ा सख्त है और गतिशील जानकारी डिस्प्ले कर सकता है। इसे समझने का सबसे अच्छा तरीका कुछ HTML मार्कअप को JSX मार्कअप में बदलना है। @@ -227,7 +227,7 @@ img { height: 90px; } अब आप जानते हैं कि JSX क्यों मौजूद है और इसे कौम्पोनॅन्ट्स में कैसे उपयोग किया जाए: -- React कौम्पोनॅन्ट समूह मार्कअप के साथ तर्क रेंडर करता है क्योंकि वे संबंधित हैं। +- React कौम्पोनॅन्ट समूह मार्कअप के साथ लॉजिक रेंडर करता है क्योंकि वे संबंधित हैं। - JSX कुछ अंतरों के साथ HTML के समान है। जरूरत पड़ने पर आप [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग कर सकते हैं। - त्रुटि संदेश अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे। From fa87e339fad36bf8216ab2e99b23d50a93e890d1 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Thu, 24 Mar 2022 19:29:27 +0530 Subject: [PATCH 03/11] Update writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index d603e9222..759b8368f 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -189,7 +189,7 @@ JSX जावास्क्रिप्ट में बदल जाता ह -### Pro-tip: Use a JSX Converter {/_pro-tip-use-a-jsx-converter_/} +### प्रो-टिप: JSX कन्वर्टर का उपयोग करें {/_pro-tip-use-a-jsx-converter_/} इन सभी विशेषताओं को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम अनुशंसा करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें। From a1d8f026fda0b3bc2c8ad802b4d3b02b976a3427 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Thu, 24 Mar 2022 19:32:35 +0530 Subject: [PATCH 04/11] Update writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 759b8368f..0aa995029 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -22,7 +22,7 @@ JSX जावास्क्रिप्ट के लिए एक सिंट ![HTML और जावास्क्रिप्ट अलग-अलग फाइलों में रहते हैं](/images/docs/illustrations/i_html_js.svg) -लेकिन जैसे-जैसे वेब अधिक संवादात्मक होता गया, लॉजिक कंटेंट को अधिकाधिक निर्धारित करता गया। जावास्क्रिप्ट HTML का इन्चार्ज था! यही कारण है कि **React में, रेंडरिंग लॉजिक और मार्कअप एक ही स्थान पर एक साथ रहते हैं—कौम्पोनॅन्टस!** +लेकिन जैसे-जैसे वेब अधिक इंटरैक्टिव होता गया, लॉजिक कंटेंट को अधिकाधिक निर्धारित करता गया। जावास्क्रिप्ट HTML का इन्चार्ज था! यही कारण है कि **React में, रेंडरिंग लॉजिक और मार्कअप एक ही स्थान पर एक साथ रहते हैं—कौम्पोनॅन्टस!** ![मार्कअप के साथ छिड़का हुआ जावास्क्रिप्ट फ़ंक्शन](/images/docs/illustrations/i_jsx.svg) From 89ffa18b7e65338d79222ac7c14b62d5a1b6e6b8 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Sat, 2 Apr 2022 22:38:53 +0530 Subject: [PATCH 05/11] Update writing-markup-with-jsx.md --- .../pages/learn/writing-markup-with-jsx.md | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 0aa995029..62d7370b4 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -28,7 +28,7 @@ JSX जावास्क्रिप्ट के लिए एक सिंट एक बटन के रेंडरिंग लॉजिक और मार्कअप को एक साथ रखने से यह सुनिश्चित होता है कि वे प्रत्येक संपादन पर एक दूसरे के साथ तालमेल बिठाते रहें। इसके विपरीत, जो डिटेल्स असंबंधित हैं, जैसे कि बटन का मार्कअप और साइडबार का मार्कअप, एक दूसरे से अलग हो जाते हैं, जिससे उनमें से किसी एक को अपने आप बदलना सुरक्षित हो जाता है। -प्रत्येक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसमें कुछ मार्कअप हो सकते हैं जो React ब्राउज़र में रेंडर करता है। प्रतिक्रिया कौम्पोनॅन्ट उस मार्कअप का प्रतिनिधित्व करने के लिए JSX नामक एक सिंटैक्स एक्सटेंशन का उपयोग करते हैं। JSX HTML की तरह दिखता है, लेकिन यह थोड़ा सख्त है और गतिशील जानकारी डिस्प्ले कर सकता है। इसे समझने का सबसे अच्छा तरीका कुछ HTML मार्कअप को JSX मार्कअप में बदलना है। +प्रत्येक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसमें कुछ मार्कअप हो सकते हैं जो React ब्राउज़र में रेंडर करता है। React कौम्पोनॅन्ट मार्कअप को रिप्रेजेंट करने के लिए JSX नामक एक सिंटैक्स एक्सटेंशन का उपयोग करते हैं। JSX HTML की तरह दिखता है, लेकिन यह थोड़ा सख्त है और डायनामिक जानकारी डिस्प्ले कर सकता है। इसे समझने का सबसे अच्छा तरीका कुछ HTML मार्कअप को JSX मार्कअप में बदलना है। @@ -36,15 +36,15 @@ JSX जावास्क्रिप्ट के लिए एक सिंट -## HTML को JSX में कनवर्ट करना {/_converting-html-to-jsx_/} +## HTML को JSX में बदलना {/*converting-html-to-jsx*/} मान लीजिए कि आपके पास कुछ (पूरी तरह से मान्य) HTML है: ```html -

      हेडी लैमर का टोडोस

      +

      Hedy Lamarr's Todos

      हेडी लैमर
        @@ -72,10 +72,10 @@ export default function TodoList() { export default function TodoList() { return ( // यह काम नहीं करता! -

        हेडी लैमर का टोडोस

        +

        Hedy Lamarr's Todos

        हेडी लैमर
          @@ -100,20 +100,20 @@ img { height: 90px; } अधिकांश समय, React के ऑन-स्क्रीन त्रुटि संदेश आपको यह पता लगाने में मदद करेंगे कि समस्या कहाँ है। अगर आप फंस गए हैं तो उन्हें पढ़ लें! -## JSX के नियम {/_the-rules-of-jsx_/} +## JSX के नियम {/*the-rules-of-jsx*/} -### 1. एकल मूल तत्व लौटाएं {/_1-return-a-single-root-element_/} +### 1. एकल मूल तत्व लौटाएं {/*1-return-a-single-root-element*/} -एक कौम्पोनॅन्ट से कई तत्वों को वापस करने के लिए, **उन्हें सिंगल पैरेंट टैग के साथ लपेटें**। +एक कौम्पोनॅन्ट से कई एलिमेंट्स को वापस करने के लिए, **उन्हें सिंगल पैरेंट टैग मैंने ऐड करें**। उदाहरण के लिए, आप एक `
          ` का उपयोग कर सकते हैं: ```js {1,11}
          -

          हेडी लैमर का टोडोस

          +

          Hedy Lamarr's Todos

          हेडी लैमर
            @@ -126,10 +126,10 @@ img { height: 90px; } ```js {1,11} <> -

            हेडी लैमर का टोडोस

            +

            Hedy Lamarr's Todos

            हेडी लैमर
              @@ -138,15 +138,15 @@ img { height: 90px; } ``` -इस खाली टैग को _[प्रतिक्रिया टुकड़ा] कहा जाता है।](TODO)_. प्रतिक्रिया के टुकड़े आपको ब्राउज़र HTML ट्री में कोई निशान छोड़े बिना चीजों को समूहित करने देते हैं। +इस खाली टैग को *[React fragment] कहा जाता है।](TODO)*. React के fragments आपको ब्राउज़र HTML ट्री में कोई निशान छोड़े बिना चीजों को समूहित करने देते हैं। -JSX HTML की तरह दिखता है, लेकिन हुड के तहत इसे सादे जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक सरणी में लपेटे बिना वापस नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या टुकड़े में लपेटे बिना वापस क्यों नहीं कर सकते। +JSX HTML की तरह दिखता है, लेकिन हुड के तहत इसे सादे जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक सरणी में लपेटे बिना वापस नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में लपेटे बिना वापस क्यों नहीं कर सकते। -### 2. सभी टैग बंद करें {/_2-close-all-the-tags_/} +### 2. सभी टैग बंद करें {/*2-close-all-the-tags*/} JSX को टैग को स्पष्ट रूप से बंद करने की आवश्यकता है: `` जैसे स्व-समापन टैग `` बनने चाहिए, और `
            • संतरा` जैसे रैपिंग टैग को `
            • संतरा
              • ` के रूप में लिखा जाना चाहिए। @@ -156,7 +156,7 @@ JSX को टैग को स्पष्ट रूप से बंद कर <> हेडी लैमर
                @@ -167,21 +167,21 @@ JSX को टैग को स्पष्ट रूप से बंद कर ``` -### 3. CamelCase करें सब ज़्यादातर चीज़ें! {/_3-camelcase-salls-most-of-the-things_/} +### 3. CamelCase करें सब ज़्यादातर चीज़ें! {/*3-camelcase-salls-most-of-the-things*/} JSX जावास्क्रिप्ट में बदल जाता है और JSX में लिखी विशेषताएँ जावास्क्रिप्ट ऑब्जेक्ट्स की कुंजी बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन विशेषताओं को चरों में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में चर नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या `class` जैसे आरक्षित शब्द नहीं हो सकते हैं। -यही कारण है कि, React में, कई HTML और SVG विशेषताएँ CamelCase में लिखी जाती हैं। उदाहरण के लिए, `stroke-width` के बजाय आप `strokeWidth` का उपयोग करते हैं। चूंकि `class` एक आरक्षित शब्द है, इसलिए प्रतिक्रिया में आप इसके बजाय `className` लिखते हैं, जिसका नाम [संबंधित DOM संपत्ति](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} हेडी लैमर ``` -आप [इन सभी विशेषताओं को React DOM तत्वों में पा सकते हैं](TODO). यदि आप एक गलत पाते हैं, तो चिंता न करें—प्रतिक्रिया संभावित सुधार के साथ एक संदेश [ब्राउज़र कंसोल](https://developer.mozilla.org/docs/Tools/Browser_Console) पर प्रिंट करेगी। +आप [इन सभी विशेषताओं को React DOM एलिमेंट्स में पा सकते हैं](TODO). यदि आप एक गलत पाते हैं, तो चिंता न करें React संभावित सुधार के साथ एक संदेश [ब्राउज़र कंसोल](https://developer.mozilla.org/docs/Tools/Browser_Console) पर प्रिंट करेगी। @@ -189,7 +189,7 @@ JSX जावास्क्रिप्ट में बदल जाता ह -### प्रो-टिप: JSX कन्वर्टर का उपयोग करें {/_pro-tip-use-a-jsx-converter_/} +### प्रो-टिप: JSX कन्वर्टर का उपयोग करें {/*pro-tip-use-a-jsx-converter*/} इन सभी विशेषताओं को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम अनुशंसा करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें। @@ -201,10 +201,10 @@ JSX जावास्क्रिप्ट में बदल जाता ह export default function TodoList() { return ( <> -

                हेडी लैमर का टोडोस

                +

                Hedy Lamarr's Todos

                हेडी लैमर
                  @@ -235,7 +235,7 @@ img { height: 90px; } -### कुछ HTML को JSX में बदलें {/_convert-some-html-to-jsx_/} +### कुछ HTML को JSX में बदलें {/*convert-some-html-to-jsx*/} यह HTML एक कौम्पोनॅन्ट में चिपकाया गया था, लेकिन यह JSX मान्य नहीं है। इसे ठीक करें: From 6fab3c03cb601131721d80e1df5653dff026282b Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Tue, 5 Apr 2022 14:22:27 +0530 Subject: [PATCH 06/11] Typo --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 4fd2f43cb..02898939c 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -132,7 +132,7 @@ img { height: 90px; } ### 1. एकल मूल तत्व लौटाएं {/*1-return-a-single-root-element*/} -एक कौम्पोनॅन्ट से कई एलिमेंट्स को वापस करने के लिए, **उन्हें सिंगल पैरेंट टैग मैंने ऐड करें**। +एक कौम्पोनॅन्ट से कई एलिमेंट्स को वापस करने के लिए, **उन्हें सिंगल पैरेंट टैग मैं ऐड करें**। उदाहरण के लिए, आप एक `
                  ` का उपयोग कर सकते हैं: From 219cce2ee6c55702f816e553b734bd3529bcb149 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Tue, 5 Apr 2022 21:21:10 +0530 Subject: [PATCH 07/11] Update writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 02898939c..0df25aa4b 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -132,7 +132,7 @@ img { height: 90px; } ### 1. एकल मूल तत्व लौटाएं {/*1-return-a-single-root-element*/} -एक कौम्पोनॅन्ट से कई एलिमेंट्स को वापस करने के लिए, **उन्हें सिंगल पैरेंट टैग मैं ऐड करें**। +एक कौम्पोनॅन्ट से कई एलिमेंट्स को रिटर्न करने के लिए, **उन्हें सिंगल पैरेंट टैग मैं ऐड करें**। उदाहरण के लिए, आप एक `
                  ` का उपयोग कर सकते हैं: @@ -170,7 +170,7 @@ img { height: 90px; } -JSX HTML की तरह दिखता है, लेकिन हुड के तहत इसे सादे जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक सरणी में लपेटे बिना वापस नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में लपेटे बिना वापस क्यों नहीं कर सकते। +JSX HTML की तरह दिखता है, लेकिन हुड के तहत इसे सादे जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक सरणी में लपेटे बिना रिटर्न नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में लपेटे बिना रिटर्न क्यों नहीं कर सकते। From ba590b042682ef65c896b3cd0132c97257a49efa Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Tue, 5 Apr 2022 21:27:47 +0530 Subject: [PATCH 08/11] Update writing-markup-with-jsx.md --- .../src/pages/learn/writing-markup-with-jsx.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 0df25aa4b..fcea82c08 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -66,15 +66,15 @@ Form.js ## HTML को JSX में बदलना {/*converting-html-to-jsx*/} -मान लीजिए कि आपके पास कुछ (पूरी तरह से मान्य) HTML है: +मान लीजिए कि आपके पास कुछ (पूरी तरह से वैलिड) HTML है: ```html

                  Hedy Lamarr's Todos

                  Hedy Lamarr + class="photo" + >
                  • नई ट्रैफिक लाइट का आविष्कार करें
                  • एक फिल्म के दृश्य का पूर्वाभ्यास करें @@ -116,21 +116,21 @@ export default function TodoList() { ``` ```css -img { height: 90px; } +img { height: 90px } ``` -ऐसा इसलिए है क्योंकि JSX सख्त है और इसमें HTML की तुलना में कुछ और नियम हैं! यदि आप ऊपर दिए गए त्रुटि संदेशों को पढ़ते हैं, तो वे मार्कअप को ठीक करने के लिए आपका मार्गदर्शन करेंगे, या आप नीचे दी गई मार्गदर्शिका का अनुसरण कर सकते हैं। +ऐसा इसलिए है क्योंकि JSX सख्त है और इसमें HTML की तुलना में कुछ और नियम हैं! यदि आप ऊपर दिए गए एरर मैसेजेस को पढ़ते हैं, तो वे मार्कअप को ठीक करने के लिए आपका मार्गदर्शन करेंगे, या आप नीचे दी गई गाइड का फॉलो कर सकते हैं। -अधिकांश समय, React के ऑन-स्क्रीन त्रुटि संदेश आपको यह पता लगाने में मदद करेंगे कि समस्या कहाँ है। अगर आप फंस गए हैं तो उन्हें पढ़ लें! +अधिकांश समय, React के ऑन-स्क्रीन एरर मैसेजेस आपको यह पता लगाने में मदद करेंगे कि समस्या कहाँ है। अगर आप फंस गए हैं तो उन्हें पढ़ लें! ## JSX के नियम {/*the-rules-of-jsx*/} -### 1. एकल मूल तत्व लौटाएं {/*1-return-a-single-root-element*/} +### 1. एक सिंगल रुट एलिमेंट रिटर्न करें {/*1-return-a-single-root-element*/} एक कौम्पोनॅन्ट से कई एलिमेंट्स को रिटर्न करने के लिए, **उन्हें सिंगल पैरेंट टैग मैं ऐड करें**। @@ -257,7 +257,7 @@ img { height: 90px; } - React कौम्पोनॅन्ट समूह मार्कअप के साथ लॉजिक रेंडर करता है क्योंकि वे संबंधित हैं। - JSX कुछ अंतरों के साथ HTML के समान है। जरूरत पड़ने पर आप [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग कर सकते हैं। -- त्रुटि संदेश अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे। +- एरर मैसेजेस अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे। @@ -265,7 +265,7 @@ img { height: 90px; } ### कुछ HTML को JSX में बदलें {/*convert-some-html-to-jsx*/} -यह HTML एक कौम्पोनॅन्ट में चिपकाया गया था, लेकिन यह JSX मान्य नहीं है। इसे ठीक करें: +यह HTML एक कौम्पोनॅन्ट में चिपकाया गया था, लेकिन यह JSX वैलिड नहीं है। इसे ठीक करें: From cbcd7fb72dbb163defa3c02a119fb5f2fef850e0 Mon Sep 17 00:00:00 2001 From: Ankush Kuwar <33517094+Anku5hk@users.noreply.github.com> Date: Wed, 13 Apr 2022 10:26:54 +0530 Subject: [PATCH 09/11] Update writing-markup-with-jsx.md --- .../pages/learn/writing-markup-with-jsx.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index fcea82c08..c3ac35ffa 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -150,7 +150,7 @@ img { height: 90px }
                  ``` -यदि आप अपने मार्कअप में अतिरिक्त `
                  ` नहीं जोड़ना चाहते हैं, तो आप इसके बजाय `<>` और `` लिख सकते हैं: +यदि आप अपने मार्कअप में एक्स्ट्रा `
                  ` ऐड नहीं करना चाहते हैं, तो आप इसके बजाय `<>` और `` लिख सकते हैं: ```js {1,11} <> @@ -166,19 +166,19 @@ img { height: 90px } ``` -इस खाली टैग को *[React fragment] कहा जाता है।](TODO)*. React के fragments आपको ब्राउज़र HTML ट्री में कोई निशान छोड़े बिना चीजों को समूहित करने देते हैं। +इस खाली टैग को *[React fragment](TODO)* कहा जाता है। React fragments आपको ब्राउज़र HTML ट्री में कोई निशान छोड़े बिना चीजों को ग्रुप करने देते हैं। - + -JSX HTML की तरह दिखता है, लेकिन हुड के तहत इसे सादे जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक सरणी में लपेटे बिना रिटर्न नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में लपेटे बिना रिटर्न क्यों नहीं कर सकते। +JSX HTML की तरह दिखता है, लेकिन असल में प्लेन जावास्क्रिप्ट ऑब्जेक्ट्स में बदल दिया जाता है। आप किसी फ़ंक्शन से दो ऑब्जेक्ट्स को एक ऐरे में रैप किये बिना रिटर्न नहीं कर सकते। यह बताता है कि आप दो JSX टैग को दूसरे टैग या fragment में रैप किये बिना रिटर्न क्यों नहीं कर सकते। ### 2. सभी टैग बंद करें {/*2-close-all-the-tags*/} -JSX को टैग को स्पष्ट रूप से बंद करने की आवश्यकता है: `` जैसे स्व-समापन टैग `` बनने चाहिए, और `
                • संतरा` जैसे रैपिंग टैग को `
                • संतरा
                  • ` के रूप में लिखा जाना चाहिए। +JSX को टैग को स्पष्ट रूप से बंद करने की आवश्यकता है: `` जैसे सेल्फ-क्लोजिंग टैग `` बनने चाहिए, और `
                • संतरा` जैसे रैपिंग टैग को `
                • संतरा
                  • ` के रूप में लिखा जाना चाहिए। -इस प्रकार हेडी लैमर की छवि और सूची आइटम बंद दिखते हैं: +इस प्रकार Hedy Lamarr की इमेज और लिस्ट आइटम बंद दिखते हैं: ```js {2-6,8-10} <> @@ -197,9 +197,9 @@ JSX को टैग को स्पष्ट रूप से बंद कर ### 3. CamelCase करें सब ज़्यादातर चीज़ें! {/*3-camelcase-salls-most-of-the-things*/} -JSX जावास्क्रिप्ट में बदल जाता है और JSX में लिखी विशेषताएँ जावास्क्रिप्ट ऑब्जेक्ट्स की कुंजी बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन विशेषताओं को चरों में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में चर नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या `class` जैसे आरक्षित शब्द नहीं हो सकते हैं। +JSX जावास्क्रिप्ट में बदल जाता है और JSX में लिखी ऐट्रिब्यूट्स जावास्क्रिप्ट ऑब्जेक्ट्स की keys बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन ऐट्रिब्यूट्स को वेरिएबल्स में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में वेरिएबल के नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या `class` जैसे रिज़र्व शब्द नहीं हो सकते हैं। -यही कारण है कि, React में, कई HTML और SVG विशेषताएँ CamelCase में लिखी जाती हैं। उदाहरण के लिए, `stroke-width` के बजाय आप `strokeWidth` का उपयोग करते हैं। चूंकि `class` एक आरक्षित शब्द है, इसलिए React में आप इसके बजाय `className` लिखते हैं, जिसका नाम [संबंधित DOM संपत्ति](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} ``` -आप [इन सभी विशेषताओं को React DOM एलिमेंट्स में पा सकते हैं](TODO). यदि आप एक गलत पाते हैं, तो चिंता न करें React संभावित सुधार के साथ एक संदेश [ब्राउज़र कंसोल](https://developer.mozilla.org/docs/Tools/Browser_Console) पर प्रिंट करेगी। +आप [इन सभी ऐट्रिब्यूट्स को React DOM एलिमेंट्स में पा सकते हैं](TODO). यदि आप एक गलत पाते हैं, तो चिंता न करें React संभावित सुधार के साथ एक संदेश [ब्राउज़र कंसोल](https://developer.mozilla.org/docs/Tools/Browser_Console) पर प्रिंट करेगी। -ऐतिहासिक कारणों से, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) और [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) विशेषताएँ HTML में डैश के साथ लिखी जाती हैं। +ऐतिहासिक कारणों से, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) और [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) ऐट्रिब्यूट्स HTML में डैश के साथ लिखी जाती हैं। ### प्रो-टिप: JSX कन्वर्टर का उपयोग करें {/*pro-tip-use-a-jsx-converter*/} -इन सभी विशेषताओं को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम अनुशंसा करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें। +इन सभी ऐट्रिब्यूट्स को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम अनुशंसा करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें। यहाँ आपका अंतिम परिणाम है: From e03499f9834cbe175d36a933a7340ff0fe0301bf Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Tue, 10 May 2022 13:03:54 +0530 Subject: [PATCH 10/11] Typo fix --- beta/src/pages/learn/writing-markup-with-jsx.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 786ee1f87..2f6394d00 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -195,11 +195,11 @@ JSX को टैग को स्पष्ट रूप से बंद कर ``` -### 3. CamelCase करें सब ज़्यादातर चीज़ें! {/*3-camelcase-salls-most-of-the-things*/} +### 3. camelCase करें सब ज़्यादातर चीज़ें! {/*3-camelcase-salls-most-of-the-things*/} JSX जावास्क्रिप्ट में बदल जाता है और JSX में लिखी ऐट्रिब्यूट्स जावास्क्रिप्ट ऑब्जेक्ट्स की keys बन जाती हैं। अपने स्वयं के कौम्पोनॅन्ट्स में, आप अक्सर उन ऐट्रिब्यूट्स को वेरिएबल्स में पढ़ना चाहेंगे। लेकिन जावास्क्रिप्ट में वेरिएबल के नामों की सीमाएँ हैं। उदाहरण के लिए, उनके नामों में डैश नहीं हो सकते हैं या `class` जैसे रिज़र्व शब्द नहीं हो सकते हैं। -यही कारण है कि, React में, कई HTML और SVG ऐट्रिब्यूट्स CamelCase में लिखी जाती हैं। उदाहरण के लिए, `stroke-width` के बजाय आप `strokeWidth` का उपयोग करते हैं। चूंकि `class` एक रिजर्व्ड शब्द है, इसलिए React में आप इसके बजाय `className` लिखते हैं, जिसका नाम [संबंधित DOM प्रॉपर्टी](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} Date: Tue, 10 May 2022 17:03:50 +0530 Subject: [PATCH 11/11] Update writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 2f6394d00..704283ce4 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -10,9 +10,9 @@ title: JSX के साथ मार्कअप लिखना -- React मार्कअप को रेंडरिंग लॉजिक के साथ क्यों मिलाता है -- JSX HTML से कैसे अलग है -- JSX के साथ जानकारी कैसे डिस्प्ले करें +* React मार्कअप को रेंडरिंग लॉजिक के साथ क्यों मिलाता है +* JSX HTML से कैसे अलग है +* JSX के साथ जानकारी कैसे डिस्प्ले करें @@ -219,7 +219,7 @@ JSX जावास्क्रिप्ट में बदल जाता ह ### प्रो-टिप: JSX कन्वर्टर का उपयोग करें {/*pro-tip-use-a-jsx-converter*/} -इन सभी ऐट्रिब्यूट्स को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम अनुशंसा करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें। +इन सभी ऐट्रिब्यूट्स को मौजूदा मार्कअप में बदलना थकाऊ हो सकता है! हम रिकमेंड करते हैं कि आप अपने मौजूदा HTML और SVG का JSX में अनुवाद करने के लिए [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग करें। कन्वर्टर्स व्यवहार में बहुत उपयोगी होते हैं, लेकिन यह अभी भी समझने योग्य है कि क्या हो रहा है ताकि आप आराम से JSX को स्वयं लिख सकें। यहाँ आपका अंतिम परिणाम है: @@ -255,9 +255,9 @@ img { height: 90px; } अब आप जानते हैं कि JSX क्यों मौजूद है और इसे कौम्पोनॅन्ट्स में कैसे उपयोग किया जाए: -- React कौम्पोनॅन्ट समूह मार्कअप के साथ लॉजिक रेंडर करता है क्योंकि वे संबंधित हैं। -- JSX कुछ अंतरों के साथ HTML के समान है। जरूरत पड़ने पर आप [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग कर सकते हैं। -- एरर मैसेजेस अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे। +* React कौम्पोनॅन्ट समूह मार्कअप के साथ लॉजिक रेंडर करता है क्योंकि वे संबंधित हैं। +* JSX कुछ अंतरों के साथ HTML के समान है। जरूरत पड़ने पर आप [कन्वर्टर](https://transform.tools/html-to-jsx) का उपयोग कर सकते हैं। +* एरर मैसेजेस अक्सर आपको अपना मार्कअप ठीक करने की सही दिशा में इंगित करेंगे। @@ -265,7 +265,7 @@ img { height: 90px; } ### कुछ HTML को JSX में बदलें {/*convert-some-html-to-jsx*/} -यह HTML एक कौम्पोनॅन्ट में चिपकाया गया था, लेकिन यह JSX वैलिड नहीं है। इसे ठीक करें: +यह HTML एक कौम्पोनॅन्ट में पेस्ट गया था, लेकिन यह JSX वैलिड नहीं है। इसे ठीक करें: