updated till line 209

Author: Anishpras

beta/src/pages/learn/add-react-to-a-website.md

@@ -88,11 +88,10 @@ ReactDOM.render(React.createElement(LikeButton), domContainer);
 
 #### आप कौम्पोनॅन्ट का पुन: उपयोग कर सकते हैं! {/*you-can-reuse-components*/}
 
+आप एक ही HTML पेज पर कई स्थानों पर एक React कौम्पोनॅन्ट को डिस्प्ले करना चाह सकते हैं। यह सबसे उपयोगी है जबकि पेज के React-संचालित हिस्से एक दूसरे से अलग-थलग हैं। आप कई कंटेनर एलिमेंट के साथ `ReactDOM.render()` को कई बार कॉल करके ऐसा कर सकते हैं।
 
-आप एक ही HTML पेज पर कई स्थानों पर एक React कौम्पोनॅन्ट को डिस्प्ले करना चाह सकते हैं। यह सबसे उपयोगी है जबकि पेज के React-संचालित हिस्से एक दूसरे से अलग-थलग हैं। आप कई कंटेनर एलिमेंट के साथ `ReactDOM.render ()` को कई बार कॉल करके ऐसा कर सकते हैं।
-
-1. **index.html** में, एक अतिरिक्त कंटेनर एलिमेंट ऐड करें `<div id="कौम्पोनॅन्ट-यहाँ-भी-जाएगा"></div>`.
-2. **like_button.js** में, नए कंटेनर एलिमेंट के लिए एक अतिरिक्त `ReactDOM.render ()` ऐड करें:
+1. **index.html** में, एक और कंटेनर एलिमेंट ऐड करें `<div id="कौम्पोनॅन्ट-यहाँ-भी-जाएगा"></div>`.
+2. **like_button.js** में, नए कंटेनर एलिमेंट के लिए एक और `ReactDOM.render()` ऐड करें:
 
 ```js {6,7,8,9}
 ReactDOM.render(
@@ -110,10 +109,10 @@ ReactDOM.render(
 
 ### स्टेप 5: प्रोडक्शन के लिए जावास्क्रिप्ट को छोटा करें {/*step-5-minify-javascript-for-production*/}
 
-असिंचित जावास्क्रिप्ट आपके उपयोगकर्ताओं के लिए पेज लोड समय को महत्वपूर्ण रूप से धीमा कर सकता है। अपनी वेबसाइट को प्रोडक्शन में लगाने से पहले, इसकी स्क्रिप्ट को छोटा करना एक अच्छा विचार है।
+अनमिनिफाइड जावास्क्रिप्ट आपके यूज़रस के लिए पेज लोड समय को महत्वपूर्ण रूप से धीमा कर सकता है। अपनी वेबसाइट को प्रोडक्शन में लगाने से पहले, इसकी स्क्रिप्ट को छोटा करना एक अच्छा विचार है।
 
 - **यदि आपके पास अपनी स्क्रिप्ट के लिए छोटा करने का स्टेप नहीं है**, [इसे सेट करने का एक तरीका यहां दिया गया है](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
-- **यदि आप अपनी एप्लिकेशन स्क्रिप्ट को पहले ही छोटा कर देते हैं**, तो आपकी साइट उत्पादन के लिए तैयार हो जाएगी यदि आप सुनिश्चित करते हैं कि तैनात HTML React के संस्करणों को `product.min.js` में समाप्त करता है, जैसे:
+- **यदि आप अपनी एप्लिकेशन स्क्रिप्ट को पहले ही छोटा कर चुके हैं**, तो आपकी साइट प्रोडक्शन के लिए तैयार हो जाएगी यदि आप सुनिश्चित करते हैं कि डेप्लॉयड HTML React के संस्करणों को `product.min.js` में समाप्त करता है, जैसे:
 
 ```html
 <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
@@ -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 <button onClick={() => setLiked(true)}>Like</button>;
 ```
 
-
-ये दो कोड स्निपेट बराबर हैं। 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,29 +142,29 @@ return <button onClick={() => setLiked(true)}>Like</button>;
 अपने प्रोजेक्ट में JSX को आज़माने का सबसे तेज़ तरीका है कि आप अपने पेज के `<head>` में Babel कंपाइलर को React और ReactDom के साथ ऐड दें:
 
 ```html {6}
-<!-- ... बाकी <head> टैग ... -->
+<!-- ... बाकी का <head> टैग ... -->
 
 <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
 
 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 
 </head>
-<!-- ... बाकी <body> टैग... -->
+<!-- ... बाकी का <body> टैग ... -->
 ```
 
-अब आप किसी भी `<script>` टैग में `type="text/babel"` एट्रिब्यूट ऐडकर JSX का उपयोग कर सकते हैं। उदाहरण के लिए:
+अब आप किसी भी `<script>` टैग में `type="text/babel"` एट्रिब्यूट ऐड करके JSX का उपयोग कर सकते हैं। उदाहरण के लिए:
 
 ```jsx {1}
 <script type="text/babel">
   ReactDOM.render(
-  <h1> नमस्ते दुनिया! </h1>, document.getElementById('root') );
+  <h1>Hello, world!</h1>, document.getElementById('root') );
 </script>
 ```
 
 **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 <button onClick={() => setLiked(true)}>Like</button>;
@@ -192,18 +190,18 @@ return <button onClick={() => setLiked(true)}>Like</button>;
 
 यहाँ [JSX के साथ एक उदाहरण HTML फ़ाइल](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) है जिसे आप डाउनलोड कर सकते हैं और उसके साथ खेल सकते हैं।
 
-सरल डेमो सीखने और बनाने के लिए यह दृष्टिकोण ठीक है। हालांकि, यह आपकी वेबसाइट को धीमा कर देता है और **प्रोडक्शन के लिए उपयुक्त नहीं है**। जब आप आगे बढ़ने के लिए तैयार हों, तो यह नया `<script>` टैग और आपके द्वारा ऐडी गई `type="text/babel"` एट्रिब्यूट को हटा दें। इसके बजाय, अगले भाग में आप अपने सभी `<script>` टैग को स्वचालित रूप से बदलने के लिए एक JSX प्रीप्रोसेसर स्थापित करेंगे।
+सरल डेमो सीखने और बनाने के लिए यह तरीका ठीक है। हालांकि, यह आपकी वेबसाइट को धीमा कर देता है और **प्रोडक्शन के लिए उपयुक्त नहीं है**। जब आप आगे बढ़ने के लिए तैयार हों, तो यह नया `<script>` टैग और आपके द्वारा ऐड की गई `type="text/babel"` एट्रिब्यूट को हटा दें। इसके बजाय, अगले भाग में आप अपने सभी `<script>` टैग को स्वचालित रूप से बदलने के लिए एक JSX प्रीप्रोसेसर सेटअप करेंगे।
 
 ### किसी प्रोजेक्ट में JSX ऐड करें {/*add-jsx-to-a-project*/}
 
-किसी प्रोजेक्ट में JSX को ऐडने के लिए [बंडलर] (/learn/start-a-new-react-project#custom-toolchains) या एक डेवलपमेंट सर्वर जैसे जटिल टूल की आवश्यकता नहीं होती है। JSX प्रीप्रोसेसर ऐडना एक CSS प्रीप्रोसेसर ऐडने जैसा है।
+किसी प्रोजेक्ट में JSX को ऐडने के लिए [bundler](/learn/start-a-new-react-project#custom-toolchains) जैसे जटिल टूल या एक डेवलपमेंट सर्वर की आवश्यकता नहीं होती है।
 
-टर्मिनल में अपने प्रोजेक्ट फ़ोल्डर में जाएं, और इन दो आदेशों को पेस्ट करें (**सुनिश्चित करें कि आपने [Node.js](https://nodejs.org/) इंस्टॉल किया हुआ है!**):
+टर्मिनल में अपने प्रोजेक्ट फ़ोल्डर में जाएं, और इन दो कमांड्स को पेस्ट करें (**सुनिश्चित करें कि आपने [Node.js](https://nodejs.org/) इंस्टॉल किया हुआ है!**):
 
-1. `npm init -y` (यदि यह विफल रहता है, [यहाँ एक समाधान है](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
+1. `npm init -y` (यदि यह फ़ैल होता है, [यहाँ एक समाधान है](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
 2. `npm install babel-cli@6 babel-preset-react-app@3`
 
-JSX प्रीप्रोसेसर को स्थापित करने के लिए आपको केवल npm की आवश्यकता है। आपको किसी और चीज के लिए इसकी आवश्यकता नहीं होगी। React और एप्लिकेशन कोड दोनों बिना किसी बदलाव के `<script>` टैग के रूप में रह सकते हैं।
+JSX प्रीप्रोसेसर को सेटअप करने के लिए आपको केवल npm की आवश्यकता है। आपको किसी और चीज के लिए इसकी आवश्यकता नहीं होगी। React और एप्लिकेशन कोड दोनों बिना किसी बदलाव के `<script>` टैग के रूप में रह सकते हैं।
 
 बधाई हो! आपने अभी-अभी अपने प्रोजेक्ट में **प्रोडक्शन के लिए तैयार JSX सेटअप** ऐडा है।
 
@@ -219,7 +217,7 @@ JSX प्रीप्रोसेसर को स्थापित करन
 
 <Gotcha>
 
-यदि आपको यह कहते हुए एक त्रुटि संदेश दिखाई देता है कि "आपने गलती से `babel` पैकेज स्थापित कर लिया है", तो आप [पिछला स्टेप](#add-jsx-to-a-project) चूक गए होंगे। इसे उसी फ़ोल्डर में निष्पादित करें, और फिर पुन: प्रयास करें।
+यदि आपको यह कहते हुए एक त्रुटि संदेश दिखाई देता है कि "आपने गलती से `babel` पैकेज सेटअप कर लिया है", तो आप [पिछला स्टेप](#add-jsx-to-a-project) चूक गए होंगे। इसे उसी फ़ोल्डर में निष्पादित करें, और फिर पुन: प्रयास करें।
 
 </Gotcha>