From 283e45a13f2196460fbe90f84cd15eb021ad92e0 Mon Sep 17 00:00:00 2001 From: Anish Prashun <66175058+Anishpras@users.noreply.github.com> Date: Sun, 2 Jan 2022 18:18:14 +0530 Subject: [PATCH 01/21] Two paragraphs translated --- .../src/pages/learn/add-react-to-a-website.md | 46 ++++++++++--------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index f3d166bc0..353d34843 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -1,32 +1,32 @@ --- -title: Add React to a Website +title: किसी वेबसाइट पर React जोड़ें --- -React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you're working with micro-frontends, an existing system, or just giving React a try, you can start adding interactive React components to an HTML page with just a few lines of code—and no build tooling! +React को शुरू से ही धीरे-धीरे अपनाने के लिए डिज़ाइन किया गया है, और आप जितना चाहें उतना कम या ज्यादा React का उपयोग कर सकते हैं। चाहे आप माइक्रो-फ्रंटेंड, एक मौजूदा सिस्टम के साथ काम कर रहे हों, या सिर्फ React को आज़मा रहे हों, आप HTML पेज पर इंटरेक्टिव React कौम्पोनॅन्ट को कोड की कुछ पंक्तियों के साथ जोड़ना शुरू कर सकते हैं - और कोई बिल्ड टूलिंग नहीं! -## Add React in one minute {/*add-react-in-one-minute*/} +## एक मिनट में React जोड़ें {/_add-react-in-one-minute_/} {/*एक-मिनट-में-react-जोड़ें-add-react-in-one-minute*/} -You can add a React component to an existing HTML page in under a minute. Try this out with your own website or [an empty HTML file](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—all you need is an internet connection and a text editor like Notepad (or VSCode—check out our guide on [how to set yours up](/learn/editor-setup/))! +आप एक मिनट से भी कम समय में मौजूदा HTML पृष्ठ पर एक React कौम्पोनॅन्ट जोड़ सकते हैं। इसे अपनी वेबसाइट या [एक खाली HTML फ़ाइल](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip) के साथ आज़माएं—आपको बस एक इंटरनेट कनेक्शन और नोटपैड (या VSCode—को [कैसे सेट अप करें](/learn/editor-setup/) इस पर हमारी मार्गदर्शिका देखें) जैसे टेक्स्ट एडिटर की आवश्यकता है! -### Step 1: Add an element to the HTML {/*step-1-add-an-element-to-the-html*/} +### Step 1: HTML में एक एलमन्ट जोड़ें {/*step-1-add-an-element-to-the-html*/} -In the HTML page you want to edit, add an HTML element like an empty `
` tag with a unique `id` to mark the spot where you want to display something with React. +जिस HTML पृष्ठ में आप संपादित करना चाहते हैं, जहां आप React के साथ कुछ प्रदर्शित करना चाहते हैं, उस स्थान पर एक खाली `
` टैग के साथ एक अनोखा ‘id’ वाला HTML एलमन्ट जोड़ें। -You can place a "container" element like this `
` anywhere inside the `` tag. React will replace any existing content inside HTML elements, so they are usually empty. You can have as many of these HTML elements on one page as you need. +आप इस तरह का "कंटेनर" एलमन्ट `
` को `` टैग के अंदर कहीं भी रख सकते हैं। React HTML एलमन्ट के अंदर किसी भी मौजूदा सामग्री को बदल देगा, इसलिए वे आमतौर पर खाली होते हैं। आपके पास इन HTML एलमन्ट में से एक पृष्ठ पर जितनी आवश्यकता हो उतनी हो सकती है। ```html {3} - + -
+
- + ``` -### Step 2: Add the Script Tags {/*step-2-add-the-script-tags*/} +### Step 2: Add the Script Tags {/_step-2-add-the-script-tags_/} {/*step-2-add-the-script-tags-step-2-add-the-script-tags*/} In the HTML page, right before the closing `` tag, add three ` - + + ``` -## Try React with JSX {/*try-react-with-jsx*/} +## Try React with JSX {/_try-react-with-jsx_/} {/*try-react-with-jsx-try-react-with-jsx*/} The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display: @@ -137,7 +141,7 @@ These two code snippets are equivalent. JSX is popular syntax for describing mar > You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). -### Try JSX {/*try-jsx*/} +### Try JSX {/_try-jsx_/} {/*try-jsx-try-jsx*/} The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so: @@ -192,7 +196,7 @@ Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactj This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new ` ``` -### Step 3: Create a React component {/_step-3-create-a-react-component_/} {/*step-3-create-a-react-component-step-3-create-a-react-component*/} +### चरण 3: एक React कौम्पोनॅन्ट बनाएँ {/*step-3-create-a-react-component*/} -Create a file called **like_button.js** next to your HTML page, add this code snippet, and save the file. This code defines a React component called `LikeButton`. [You can learn more about making components in our guides.](/learn/your-first-component) +अपने HTML पृष्ठ के बगल में **like_button.js** नाम की एक फाइल बनाएं, इस कोड स्निपेट को जोड़ें और फाइल को सेव करें। यह कोड `LikeButton` नामक एक React कौम्पोनॅन्ट को परिभाषित करता है। [आप हमारे गाइड में कौम्पोनॅन्ट बनाने के बारे में अधिक जान सकते हैं।](/learn/your-first-component) ```js 'use strict'; @@ -59,7 +59,7 @@ function LikeButton() { const [liked, setLiked] = React.useState(false); if (liked) { - return 'You liked this!'; + return 'आपको यह पसंद आया!'; } return React.createElement( @@ -67,28 +67,29 @@ function LikeButton() { { onClick: () => setLiked(true), }, - 'Like' + 'पसंद करें' ); } ``` -### Step 4: Add your React Component to the page {/_step-4-add-your-react-component-to-the-page_/} {/*step-4-add-your-react-component-to-the-page-step-4-add-your-react-component-to-the-page*/} +### चरण 4: पृष्ठ पर अपना React कौम्पोनॅन्ट जोड़ें {/*step-4-add-your-react-component-to-the-page*/} -Lastly, add two lines to the bottom of **like_button.js**. These two lines of code find the `
` you added to your HTML in the first step and then display the "Like" button React component inside of it. +अंत में, **like_button.js** के नीचे दो पंक्तियाँ जोड़ें। कोड की ये दो पंक्तियाँ पहले चरण में आपके द्वारा अपने HTML में जोड़े गए `
` को ढूंढती हैं और फिर उसके अंदर "पसंद करें" बटन React कौम्पोनॅन्ट प्रदर्शित करती हैं। ```js -const domContainer = document.getElementById('component-goes-here'); +const domContainer = document.getElementById('कौम्पोनॅन्ट-यहाँ-जाएगा'); ReactDOM.render(React.createElement(LikeButton), domContainer); ``` -**Congratulations! You have just rendered your first React component to your website!** +**बधाई हो! आपने अभी-अभी अपनी वेबसाइट पर अपना पहला React कौम्पोनॅन्ट प्रस्तुत किया है!** -- [View the full example source code](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9) -- [Download the full example (2KB zipped)](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip) +- [पूरा उदाहरण स्रोत कोड देखें](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9) +- [पूरा उदाहरण डाउनलोड करें (2KB ज़िपित)](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip) -#### You can reuse components! {/_you-can-reuse-components_/} {/*you-can-reuse-components-you-can-reuse-components*/} +#### आप कौम्पोनॅन्ट का पुन: उपयोग कर सकते हैं! {/*you-can-reuse-components*/} -You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.render()` multiple times with multiple container elements. + +आप एक ही HTML पृष्ठ पर कई स्थानों पर एक React कौम्पोनॅन्ट प्रदर्शित करना चाह सकते हैं। यह सबसे उपयोगी है जबकि पृष्ठ के React-संचालित हिस्से एक दूसरे से अलग-थलग हैं। आप कई कंटेनर एलिमेंट के साथ `ReactDOM.render ()` को कई बार कॉल करके ऐसा कर सकते हैं। 1. In **index.html**, add an additional container element `
`. 2. In **like_button.js**, add an additional `ReactDOM.render()` for the new container element: @@ -107,7 +108,7 @@ ReactDOM.render( Check out [an example that displays the "Like" button three times and passes some data to it](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)! -### Step 5: Minify JavaScript for production {/_step-5-minify-javascript-for-production_/} {/*step-5-minify-javascript-for-production-step-5-minify-javascript-for-production*/} +### Step 5: Minify JavaScript for production {/_step-5-minify-javascript-for-production_/} {/_step-5-minify-javascript-for-production-step-5-minify-javascript-for-production_/} {/*step-5-minify-javascript-for-production-step-5-minify-javascript-for-production-step-5-minify-javascript-for-production-step-5-minify-javascript-for-production*/} Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts. @@ -123,7 +124,7 @@ Unminified JavaScript can significantly slow down page load times for your users crossorigin> ``` -## Try React with JSX {/_try-react-with-jsx_/} {/*try-react-with-jsx-try-react-with-jsx*/} +## Try React with JSX {/_try-react-with-jsx_/} {/_try-react-with-jsx-try-react-with-jsx_/} {/*try-react-with-jsx-try-react-with-jsx-try-react-with-jsx-try-react-with-jsx*/} The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display: @@ -141,7 +142,7 @@ These two code snippets are equivalent. JSX is popular syntax for describing mar > You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). -### Try JSX {/_try-jsx_/} {/*try-jsx-try-jsx*/} +### Try JSX {/_try-jsx_/} {/_try-jsx-try-jsx_/} {/*try-jsx-try-jsx-try-jsx-try-jsx*/} The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so: @@ -196,7 +197,7 @@ Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactj This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new ` - + + ``` ## Try React with JSX {/_try-react-with-jsx_/} {/_try-react-with-jsx-try-react-with-jsx_/} {/*try-react-with-jsx-try-react-with-jsx-try-react-with-jsx-try-react-with-jsx*/} From 5a5aeddd455132f082d5da877b37995910c503d2 Mon Sep 17 00:00:00 2001 From: Anish Prashun <66175058+Anishpras@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:21:59 +0530 Subject: [PATCH 08/21] Starting try JSX translation --- beta/src/pages/learn/add-react-to-a-website.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index 4dc0c725d..d8bb87b2e 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -120,23 +120,24 @@ ReactDOM.render( ``` -## Try React with JSX {/_try-react-with-jsx_/} {/_try-react-with-jsx-try-react-with-jsx_/} {/*try-react-with-jsx-try-react-with-jsx-try-react-with-jsx-try-react-with-jsx*/} +## JSX के साथ React का प्रयास करें {/*try-react-with-jsx*/} -The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display: +ऊपर दिए गए उदाहरण उन विशेषताओं पर निर्भर करते हैं जो मूल रूप से ब्राउज़र द्वारा समर्थित हैं। यही कारण है कि **like_button.js** React को क्या प्रदर्शित करना है, यह बताने के लिए जावास्क्रिप्ट फ़ंक्शन कॉल का उपयोग करता है: ```js -return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); +return React.createElement('button', {onClick: () => setLiked(true)}, 'पसंद करें'); ``` -However, React also offers an option to use [JSX](/learn/writing-markup-with-jsx), an HTML-like JavaScript syntax, instead: +हालाँकि, React इसके बजाय [JSX],(/learn/writing-markup-with-jsx), एक HTML-जैसे जावास्क्रिप्ट सिंटैक्स का उपयोग करने का विकल्प भी प्रदान करता है: ```jsx -return ; +return ; ``` -These two code snippets are equivalent. JSX is popular syntax for describing markup in JavaScript. Many people find it familiar and helpful for writing UI code--both with React and with other libraries. You might see "markup sprinkled throughout your JavaScript" in other projects! -> You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). +ये दो कोड स्निपेट बराबर हैं। JSX जावास्क्रिप्ट में मार्कअप का वर्णन करने के लिए लोकप्रिय सिंटैक्स है। बहुत से लोग इसे UI कोड लिखने के लिए परिचित और सहायक पाते हैं - दोनों रिएक्ट के साथ और अन्य लाइब्रेरी के साथ। आप अन्य परियोजनाओं में "आपके पूरे जावास्क्रिप्ट में छिड़का हुआ मार्कअप" देख सकते हैं! + +> आप [इस ऑनलाइन कनवर्टर](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) का उपयोग करके HTML मार्कअप को JSX में बदलने के साथ खेल सकते हैं। ### Try JSX {/_try-jsx_/} {/_try-jsx-try-jsx_/} {/*try-jsx-try-jsx-try-jsx-try-jsx*/} From 815f9d3007f7aeeb68d3e75083093a4870623261 Mon Sep 17 00:00:00 2001 From: Anish Prashun <66175058+Anishpras@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:28:28 +0530 Subject: [PATCH 09/21] formatted --- beta/src/pages/learn/add-react-to-a-website.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index d8bb87b2e..9e6829322 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -139,7 +139,7 @@ return > आप [इस ऑनलाइन कनवर्टर](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) का उपयोग करके HTML मार्कअप को JSX में बदलने के साथ खेल सकते हैं। -### Try JSX {/_try-jsx_/} {/_try-jsx-try-jsx_/} {/*try-jsx-try-jsx-try-jsx-try-jsx*/} +### Try JSX {/*try-jsx*/} The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so: @@ -194,7 +194,7 @@ Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactj This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new ` @@ -152,21 +152,21 @@ The quickest way to try JSX in your project is to add the Babel compiler to your - + ``` -Now you can use JSX in any ` ``` -To convert **like_button.js** to use JSX: +**like_button.js** को JSX में बदलने के लिए: -1. In **like_button.js**, replace +1. **like_button.js** में, बदलें ```js return React.createElement( @@ -174,25 +174,25 @@ return React.createElement( { onClick: () => setLiked(true), }, - 'Like' + 'पसंद करें' ); ``` with: ```jsx -return ; +return ; ``` -2. In **index.html**, add `type="text/babel"` to the like button's script tag: +2. **index.html** में, लाइक बटन के script टैग में `type="text/babel"` जोड़ें: ```html ``` -Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with. +यहाँ [JSX के साथ एक उदाहरण HTML फ़ाइल](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) है जिसे आप डाउनलोड कर सकते हैं और उसके साथ खेल सकते हैं। -This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new ` @@ -194,7 +194,7 @@ return सरल डेमो सीखने और बनाने के लिए यह दृष्टिकोण ठीक है। हालांकि, यह आपकी वेबसाइट को धीमा कर देता है और **प्रोडक्शन के लिए उपयुक्त नहीं है**। जब आप आगे बढ़ने के लिए तैयार हों, तो यह नया ` @@ -50,7 +50,7 @@ HTML पृष्ठ में, समापन `` टैग से ठ ### स्टेप 3: एक React कौम्पोनॅन्ट बनाएँ {/*step-3-create-a-react-component*/} -अपने HTML पृष्ठ के बगल में **like_button.js** नाम की एक फाइल बनाएं, इस कोड स्निपेट को ऐड करें और फाइल को सेव करें। यह कोड `LikeButton` नामक एक React कौम्पोनॅन्ट को परिभाषित करता है। [आप हमारे गाइड में कौम्पोनॅन्ट बनाने के बारे में अधिक जान सकते हैं।](/learn/your-first-component) +अपने HTML पेज के बगल में **like_button.js** नाम की एक फाइल बनाएं, इस कोड स्निपेट को ऐड करें और फाइल को सेव करें। यह कोड `LikeButton` नामक एक React कौम्पोनॅन्ट को परिभाषित करता है। [आप हमारे गाइड में कौम्पोनॅन्ट बनाने के बारे में अधिक जान सकते हैं।](/learn/your-first-component) ```js 'use strict'; @@ -72,9 +72,9 @@ function LikeButton() { } ``` -### स्टेप 4: पृष्ठ पर अपना React कौम्पोनॅन्ट ऐड करें {/*step-4-add-your-react-component-to-the-page*/} +### स्टेप 4: पेज पर अपना React कौम्पोनॅन्ट ऐड करें {/*step-4-add-your-react-component-to-the-page*/} -अंत में, **like_button.js** के नीचे दो पंक्तियाँ ऐड करें। कोड की ये दो पंक्तियाँ पहले स्टेप में आपके द्वारा अपने HTML में जोड़े गए `
` को ढूंढती हैं और फिर उसके अंदर "पसंद करें" बटन React कौम्पोनॅन्ट प्रदर्शित करती हैं। +अंत में, **like_button.js** के नीचे दो पंक्तियाँ ऐड करें। कोड की ये दो पंक्तियाँ पहले स्टेप में आपके द्वारा अपने HTML में ऐडे गए `
` को ढूंढती हैं और फिर उसके अंदर "पसंद करें" बटन React कौम्पोनॅन्ट प्रदर्शित करती हैं। ```js const domContainer = document.getElementById('कौम्पोनॅन्ट-यहाँ-जाएगा'); @@ -89,7 +89,7 @@ ReactDOM.render(React.createElement(LikeButton), domContainer); #### आप कौम्पोनॅन्ट का पुन: उपयोग कर सकते हैं! {/*you-can-reuse-components*/} -आप एक ही HTML पृष्ठ पर कई स्थानों पर एक React कौम्पोनॅन्ट प्रदर्शित करना चाह सकते हैं। यह सबसे उपयोगी है जबकि पृष्ठ के React-संचालित हिस्से एक दूसरे से अलग-थलग हैं। आप कई कंटेनर एलिमेंट के साथ `ReactDOM.render ()` को कई बार कॉल करके ऐसा कर सकते हैं। +आप एक ही HTML पेज पर कई स्थानों पर एक React कौम्पोनॅन्ट प्रदर्शित करना चाह सकते हैं। यह सबसे उपयोगी है जबकि पेज के React-संचालित हिस्से एक दूसरे से अलग-थलग हैं। आप कई कंटेनर एलिमेंट के साथ `ReactDOM.render ()` को कई बार कॉल करके ऐसा कर सकते हैं। 1. **index.html** में, एक अतिरिक्त कंटेनर एलिमेंट ऐड करें `
`. 2. **like_button.js** में, नए कंटेनर एलिमेंट के लिए एक अतिरिक्त `ReactDOM.render ()` ऐड करें: @@ -110,7 +110,7 @@ ReactDOM.render( ### स्टेप 5: प्रोडक्शन के लिए जावास्क्रिप्ट को छोटा करें {/*step-5-minify-javascript-for-production*/} -असिंचित जावास्क्रिप्ट आपके उपयोगकर्ताओं के लिए पृष्ठ लोड समय को महत्वपूर्ण रूप से धीमा कर सकता है। अपनी वेबसाइट को प्रोडक्शन में लगाने से पहले, इसकी स्क्रिप्ट को छोटा करना एक अच्छा विचार है। +असिंचित जावास्क्रिप्ट आपके उपयोगकर्ताओं के लिए पेज लोड समय को महत्वपूर्ण रूप से धीमा कर सकता है। अपनी वेबसाइट को प्रोडक्शन में लगाने से पहले, इसकी स्क्रिप्ट को छोटा करना एक अच्छा विचार है। - **यदि आपके पास अपनी स्क्रिप्ट के लिए छोटा करने का स्टेप नहीं है**, [इसे सेट करने का एक तरीका यहां दिया गया है](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). - **यदि आप अपनी एप्लिकेशन स्क्रिप्ट को पहले ही छोटा कर देते हैं**, तो आपकी साइट उत्पादन के लिए तैयार हो जाएगी यदि आप सुनिश्चित करते हैं कि तैनात HTML React के संस्करणों को `product.min.js` में समाप्त करता है, जैसे: @@ -141,7 +141,7 @@ return ### JSX का प्रयास करें {/*try-jsx*/} -अपने प्रोजेक्ट में JSX को आज़माने का सबसे तेज़ तरीका है कि आप अपने पेज के `` में Babel कंपाइलर को React और ReactDom के साथ जोड़ दें: +अपने प्रोजेक्ट में JSX को आज़माने का सबसे तेज़ तरीका है कि आप अपने पेज के `` में Babel कंपाइलर को React और ReactDom के साथ ऐड दें: ```html {6} @@ -155,7 +155,7 @@ return ``` -अब आप किसी भी ` @@ -122,20 +121,19 @@ ReactDOM.render( ## JSX के साथ React का प्रयास करें {/*try-react-with-jsx*/} -ऊपर दिए गए उदाहरण उन विशेषताओं पर निर्भर करते हैं जो कोर रूप से ब्राउज़र द्वारा समर्थित हैं। यही कारण है कि **like_button.js** React को क्या को डिस्प्ले करना है, यह बताने के लिए जावास्क्रिप्ट फ़ंक्शन कॉल का उपयोग करता है: +ऊपर दिए गए उदाहरण उन विशेषताओं पर निर्भर करते हैं जो कोर रूप से ब्राउज़र द्वारा समर्थित हैं। यही कारण है कि **like_button.js** React बताने के लिए जावास्क्रिप्ट फ़ंक्शन कॉल का उपयोग करता है की क्या डिस्प्ले करना है: ```js return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); ``` -हालाँकि, React इसके बजाय [JSX],(/learn/writing-markup-with-jsx), एक HTML-जैसे जावास्क्रिप्ट सिंटैक्स का उपयोग करने का विकल्प भी प्रदान करता है: +हालाँकि, React इसके बजाय एक HTML-जैसे जावास्क्रिप्ट सिंटैक्स [JSX](/learn/writing-markup-with-jsx), इस्तेमाल करने का ऑप्शन भी प्रदान करता है: ```jsx return ; ``` - -ये दो कोड स्निपेट बराबर हैं। JSX जावास्क्रिप्ट में मार्कअप का वर्णन करने के लिए लोकप्रिय सिंटैक्स है। बहुत से लोग इसे UI कोड लिखने के लिए परिचित और सहायक पाते हैं - दोनों रिएक्ट के साथ और अन्य लाइब्रेरी के साथ। आप अन्य परियोजनाओं में "आपके पूरे जावास्क्रिप्ट में छिड़का हुआ मार्कअप" देख सकते हैं! +बहुत से लोग इसे React के साथ और अन्य लाइब्रेरी के साथ UI कोड लिखने के लिए परिचित और सहायक पाते हैं। आप अन्य प्रोजेक्ट्स में "आपके पूरे जावास्क्रिप्ट में फैला हुआ मार्कअप" देख सकते हैं! > आप [इस ऑनलाइन कनवर्टर](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) का उपयोग करके HTML मार्कअप को JSX में बदलने के साथ खेल सकते हैं। @@ -144,7 +142,7 @@ return ; अपने प्रोजेक्ट में JSX को आज़माने का सबसे तेज़ तरीका है कि आप अपने पेज के `` में Babel कंपाइलर को React और ReactDom के साथ ऐड दें: ```html {6} - + @@ -152,21 +150,21 @@ return ; - + ``` -अब आप किसी भी ` ``` **like_button.js** को JSX में बदलने के लिए: -1. **like_button.js** में, बदलें +1. **like_button.js** में, निचे के कोड को ```js return React.createElement( @@ -178,7 +176,7 @@ return React.createElement( ); ``` -with: +इससे बदलें: ```jsx return ; @@ -192,18 +190,18 @@ return ; यहाँ [JSX के साथ एक उदाहरण HTML फ़ाइल](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) है जिसे आप डाउनलोड कर सकते हैं और उसके साथ खेल सकते हैं। -सरल डेमो सीखने और बनाने के लिए यह दृष्टिकोण ठीक है। हालांकि, यह आपकी वेबसाइट को धीमा कर देता है और **प्रोडक्शन के लिए उपयुक्त नहीं है**। जब आप आगे बढ़ने के लिए तैयार हों, तो यह नया `