From 7dad41f35c3c7dbe14f80da1b0af5d400019d387 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Thu, 4 Apr 2019 23:04:06 +0530 Subject: [PATCH 01/14] translate composition-vs-inheritance page --- content/docs/composition-vs-inheritance.md | 34 ++++++++++++---------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c86735ef7..71aa12901 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -8,15 +8,15 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. +React का composition मॉडल शक्तिशाली है, और हम सलाह देते है कि आप कौम्पोनॅन्ट के बीच कोड के दुबारा प्रयोग के लिए inheritance कि जगह composition का प्रयोग करे| -In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition. +इस भाग में, हम कुछ समस्याए देखेंगे जहाँ React के नए developers inheritance का प्रयोग करने की दिशा में जाते है , परन्तु हम उनका समाधान composition से निकालेंगे| ## Containment {#containment} -Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes". +कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पते। यह उन कौम्पोनॅन्ट कि लिए आम बात है,जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। -We recommend that such components use the special `children` prop to pass children elements directly into their output: +हम सलाह देते है कि यह कंपोनेंट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| ```js{4} function FancyBorder(props) { @@ -27,8 +27,7 @@ function FancyBorder(props) { ); } ``` - -This lets other components pass arbitrary children to them by nesting the JSX: +यह और कौम्पोनॅन्ट को JSX की nesting के माध्यम से मनमाना चिल्ड्रन पास करने देता है| ```js{4-9} function WelcomeDialog() { @@ -47,9 +46,10 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -Anything inside the `` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `
`, the passed elements appear in the final output. +`` JSX टैग के अंदर कुछ भी `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop की तरह pass हो जाता है। +जबसे `FancyBorder` `{props.children}` को `
` के अंदर रेंडर करता है ,passed एलिमेंट्स अंतिम परिणाम में दिखने लगते है। -While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`: +जबकि यह सामान्य नहीं है, कुछ बारि आपको एक से अधिक "holes" की अवशाकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते है: ```js{5,8,18,21} function SplitPane(props) { @@ -80,13 +80,15 @@ function App() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React elements like `` and `` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React. +React एलिमेंट्स `` एवं `` एक `object` है, आप इनको बाकी `props` की तरह `pass` कर सकते है। +यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु 'react' में कोई रोक नहीं है की आप 'props' में क्या 'pass' कर सकते है! ## Specialization {#specialization} -Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`. +कई बार हम कंपोनेंट्स को और कंपोनेंट्स का "स्पेशल case" समझते है। +उद्धरण हम कह सकते है 'वेलकम डायलॉग ', 'dialog' का विशेष केस है। -In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props: +React में यह भी 'composition' से उपलब्ध किया जाता है, जहाँ एक "specific" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से configure करता है| ```js{5,8,16-18} function Dialog(props) { @@ -113,7 +115,7 @@ function WelcomeDialog() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) -Composition works equally well for components defined as classes: +Composition, classes वाले कंपोनेंट्स के लिए भी समान रूप से काम करता है: ```js{10,27-31} function Dialog(props) { @@ -164,9 +166,9 @@ class SignUpDialog extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## So What About Inheritance? {#so-what-about-inheritance} +'Facebook' में हम 'React' हज़ार जगह प्रयोग करते है परन्तु हमे कोई भी ऐसा case नहीं मिला जहाँ हम आपको कंपोनेंट्स inheritance hierarchies बनाने की सलाह दे। -At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies. - -Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. +'props' एवं 'composition' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कंपोनेंट्स का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। +याद रखिये की एक कॉम्पोनेन्ट 'Arbitiary props', जिसमे 'primitive'वैल्यू हो , 'React' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it. +अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी 'non-UI' फंक्शनलिटी का प्रयोग करना कहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं इसको 'function' ,'object', या फिर 'class' की तरह प्रयोग कर सकता है बिना इसको एक्सटेंड करे। \ No newline at end of file From f799f36b444a0b81837ad52ecb067f0da99935a4 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Fri, 5 Apr 2019 23:41:42 +0530 Subject: [PATCH 02/14] fix few spellings --- content/docs/composition-vs-inheritance.md | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 71aa12901..9258b7bc3 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -10,13 +10,13 @@ next: thinking-in-react.html React का composition मॉडल शक्तिशाली है, और हम सलाह देते है कि आप कौम्पोनॅन्ट के बीच कोड के दुबारा प्रयोग के लिए inheritance कि जगह composition का प्रयोग करे| -इस भाग में, हम कुछ समस्याए देखेंगे जहाँ React के नए developers inheritance का प्रयोग करने की दिशा में जाते है , परन्तु हम उनका समाधान composition से निकालेंगे| +इस भाग में, हम कुछ समस्याएं देखेंगे जहाँ React के नए डेवेलपर्स inheritance का प्रयोग करने की दिशा में जाते है , परन्तु हम उनका समाधान composition से निकालेंगे| ## Containment {#containment} -कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पते। यह उन कौम्पोनॅन्ट कि लिए आम बात है,जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। +कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। -हम सलाह देते है कि यह कंपोनेंट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| +हम सलाह देते है कि, यह कंपोनेंट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| ```js{4} function FancyBorder(props) { @@ -27,7 +27,7 @@ function FancyBorder(props) { ); } ``` -यह और कौम्पोनॅन्ट को JSX की nesting के माध्यम से मनमाना चिल्ड्रन पास करने देता है| +यह और कौम्पोनॅन्ट को JSX की nesting के माध्यम से मनमाना चिल्ड्रन पास करने देता है| ```js{4-9} function WelcomeDialog() { @@ -46,10 +46,10 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -`` JSX टैग के अंदर कुछ भी `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop की तरह pass हो जाता है। -जबसे `FancyBorder` `{props.children}` को `
` के अंदर रेंडर करता है ,passed एलिमेंट्स अंतिम परिणाम में दिखने लगते है। +`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop कि तरह pass हो जाता है। +जबसे `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, passed एलिमेंट्स अंतिम परिणाम में दिखने लगते है। -जबकि यह सामान्य नहीं है, कुछ बारि आपको एक से अधिक "holes" की अवशाकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते है: +जबकि यह सामान्य नहीं है, कई बारी आपको एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: ```js{5,8,18,21} function SplitPane(props) { @@ -80,15 +80,15 @@ function App() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React एलिमेंट्स `` एवं `` एक `object` है, आप इनको बाकी `props` की तरह `pass` कर सकते है। -यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु 'react' में कोई रोक नहीं है की आप 'props' में क्या 'pass' कर सकते है! +React एलिमेंट्स `` एवं `` एक `object` है, आप इनको बाकि `props` की तरह `pass` कर सकते है। +यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु 'react' में कोई रोक नहीं है कि आप 'props' में क्या 'pass' कर सकते हैं| ## Specialization {#specialization} -कई बार हम कंपोनेंट्स को और कंपोनेंट्स का "स्पेशल case" समझते है। -उद्धरण हम कह सकते है 'वेलकम डायलॉग ', 'dialog' का विशेष केस है। +कई बार हम कंपोनेंट्स को और कंपोनेंट्स का "स्पेशल केस" समझते है। +उदहारण के लिए हम कह सकते है 'WelcomeDialog', 'dialog' का विशेष केस है। -React में यह भी 'composition' से उपलब्ध किया जाता है, जहाँ एक "specific" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से configure करता है| +React में यह भी 'composition' से उपलब्ध किया जाता है, जहाँ एक "specific" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से कॉन्फ़िगर करता है| ```js{5,8,16-18} function Dialog(props) { @@ -166,9 +166,9 @@ class SignUpDialog extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## So What About Inheritance? {#so-what-about-inheritance} -'Facebook' में हम 'React' हज़ार जगह प्रयोग करते है परन्तु हमे कोई भी ऐसा case नहीं मिला जहाँ हम आपको कंपोनेंट्स inheritance hierarchies बनाने की सलाह दे। +'Facebook' में हम 'React' का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कंपोनेंट्स inheritance hierarchies बनाने की सलाह दे। -'props' एवं 'composition' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कंपोनेंट्स का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। -याद रखिये की एक कॉम्पोनेन्ट 'Arbitiary props', जिसमे 'primitive'वैल्यू हो , 'React' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। +'props' एवं 'composition' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। +याद रखिये की एक कौम्पोनॅन्ट 'Arbitiary props', जिसमे 'primitive' वैल्यू हो, 'react' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी 'non-UI' फंक्शनलिटी का प्रयोग करना कहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं इसको 'function' ,'object', या फिर 'class' की तरह प्रयोग कर सकता है बिना इसको एक्सटेंड करे। \ No newline at end of file +अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी 'non-UI' फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं इसको 'function' ,'object', या फिर 'class' की तरह प्रयोग कर सकता है बिना इसको एक्सटेंड करे। \ No newline at end of file From e2d1b683fbb611e78808d4cb6284e9c8f5e2ae6e Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 11:23:28 +0530 Subject: [PATCH 03/14] update few words as suggested in the review --- content/docs/composition-vs-inheritance.md | 32 ++++++++++------------ 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 9258b7bc3..3703a8f35 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -8,13 +8,13 @@ prev: lifting-state-up.html next: thinking-in-react.html --- -React का composition मॉडल शक्तिशाली है, और हम सलाह देते है कि आप कौम्पोनॅन्ट के बीच कोड के दुबारा प्रयोग के लिए inheritance कि जगह composition का प्रयोग करे| +React का कम्पोजीशन मॉडल शक्तिशाली है, और हम सलाह देते है कि आप कौम्पोनॅन्ट के बीच कोड के दुबारा प्रयोग के लिए इनहेरिटेंस कि जगह कम्पोजीशन का प्रयोग करे| -इस भाग में, हम कुछ समस्याएं देखेंगे जहाँ React के नए डेवेलपर्स inheritance का प्रयोग करने की दिशा में जाते है , परन्तु हम उनका समाधान composition से निकालेंगे| +इस भाग में, हम कुछ समस्याएं देखेंगे जहाँ React के नए डेवेलपर्स इनहेरिटेंस का प्रयोग करने की दिशा में जाते है, और दिखाएंगे की हम उनका समाधान कम्पोजीशन से कैसे निकाल सकते हैं| -## Containment {#containment} +## कन्टेनमेंट {#containment} -कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। +कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट्स के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। हम सलाह देते है कि, यह कंपोनेंट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| @@ -27,7 +27,8 @@ function FancyBorder(props) { ); } ``` -यह और कौम्पोनॅन्ट को JSX की nesting के माध्यम से मनमाना चिल्ड्रन पास करने देता है| + +यह दूसरे कौम्पोनॅन्ट्स को JSX की nesting के माध्यम से मनमाना चिल्ड्रन पास करने देता है| ```js{4-9} function WelcomeDialog() { @@ -46,8 +47,7 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop कि तरह pass हो जाता है। -जबसे `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, passed एलिमेंट्स अंतिम परिणाम में दिखने लगते है। +`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop कि तरह pass हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है। जबकि यह सामान्य नहीं है, कई बारी आपको एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: @@ -80,15 +80,13 @@ function App() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React एलिमेंट्स `` एवं `` एक `object` है, आप इनको बाकि `props` की तरह `pass` कर सकते है। -यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु 'react' में कोई रोक नहीं है कि आप 'props' में क्या 'pass' कर सकते हैं| +React एलिमेंट्स `` एवं `` एक `ऑब्जेक्ट` है, आप इनको बाकि `props` की तरह `pass` कर सकते है। यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं| -## Specialization {#specialization} +## स्पेशलाइजेशन {#specialization} -कई बार हम कंपोनेंट्स को और कंपोनेंट्स का "स्पेशल केस" समझते है। -उदहारण के लिए हम कह सकते है 'WelcomeDialog', 'dialog' का विशेष केस है। +कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केस" समझते है। उदहारण के लिए हम कह सकते है WelcomeDialog, Dialog का विशेष केसेस है। -React में यह भी 'composition' से उपलब्ध किया जाता है, जहाँ एक "specific" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से कॉन्फ़िगर करता है| +React में यह भी 'कम्पोजीशन' से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से कॉन्फ़िगर करता है| ```js{5,8,16-18} function Dialog(props) { @@ -115,7 +113,7 @@ function WelcomeDialog() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) -Composition, classes वाले कंपोनेंट्स के लिए भी समान रूप से काम करता है: +कम्पोजीशन, classes वाले कंपोनेंट्स के लिए भी समान रूप से काम करता है: ```js{10,27-31} function Dialog(props) { @@ -166,9 +164,9 @@ class SignUpDialog extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## So What About Inheritance? {#so-what-about-inheritance} -'Facebook' में हम 'React' का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कंपोनेंट्स inheritance hierarchies बनाने की सलाह दे। +'Facebook' में हम 'React' का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कंपोनेंट्स इनहेरिटेंस hierarchies बनाने की सलाह दे। -'props' एवं 'composition' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। +'props' एवं 'कम्पोजीशन' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट 'Arbitiary props', जिसमे 'primitive' वैल्यू हो, 'react' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी 'non-UI' फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं इसको 'function' ,'object', या फिर 'class' की तरह प्रयोग कर सकता है बिना इसको एक्सटेंड करे। \ No newline at end of file +अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file From ef908fe16a5694e6561f1fe42f215994601e0738 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 11:37:27 +0530 Subject: [PATCH 04/14] update convert primitive and arbitiary word in hindi --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 3703a8f35..c24b1a6a5 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -167,6 +167,6 @@ class SignUpDialog extends React.Component { 'Facebook' में हम 'React' का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कंपोनेंट्स इनहेरिटेंस hierarchies बनाने की सलाह दे। 'props' एवं 'कम्पोजीशन' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। -याद रखिये की एक कौम्पोनॅन्ट 'Arbitiary props', जिसमे 'primitive' वैल्यू हो, 'react' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। +याद रखिये की एक कौम्पोनॅन्ट 'आरबिटीआरी props', जिसमे 'प्रिमिटिव' वैल्यू हो, 'react' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file From aa2f0be0f82371d5da60b9ccbd293e898d367816 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 21:08:38 +0530 Subject: [PATCH 05/14] updated few spell with ' --- content/docs/composition-vs-inheritance.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index c24b1a6a5..da2d23311 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -16,7 +16,7 @@ React का कम्पोजीशन मॉडल शक्तिशाल कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट्स के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। -हम सलाह देते है कि, यह कंपोनेंट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| +हम सलाह देते है कि, यह कौम्पोनॅन्ट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| ```js{4} function FancyBorder(props) { @@ -47,7 +47,7 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop कि तरह pass हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है। +`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop कि तरह pass हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है। जबकि यह सामान्य नहीं है, कई बारी आपको एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: @@ -80,13 +80,13 @@ function App() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React एलिमेंट्स `` एवं `` एक `ऑब्जेक्ट` है, आप इनको बाकि `props` की तरह `pass` कर सकते है। यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं| +React एलिमेंट्स `` एवं `` एक ऑब्जेक्ट है, आप इनको बाकि props की तरह पास कर सकते है। यह तरिका आपको और लाइब्रेरीज में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं| ## स्पेशलाइजेशन {#specialization} -कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केस" समझते है। उदहारण के लिए हम कह सकते है WelcomeDialog, Dialog का विशेष केसेस है। +कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केस" समझते है। उदहारण के लिए हम कह सकते है `WelcomeDialog`, `Dialog` का विशेष केसेस है। -React में यह भी 'कम्पोजीशन' से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से कॉन्फ़िगर करता है| +React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट्स एक "सामान्य" कौम्पोनॅन्ट्स को रेंडर करता है और उसको props से कॉन्फ़िगर करता है: ```js{5,8,16-18} function Dialog(props) { @@ -113,7 +113,7 @@ function WelcomeDialog() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010) -कम्पोजीशन, classes वाले कंपोनेंट्स के लिए भी समान रूप से काम करता है: +कम्पोजीशन, classes वाले कौम्पोनॅन्ट के लिए भी समान रूप से काम करता है: ```js{10,27-31} function Dialog(props) { @@ -164,9 +164,9 @@ class SignUpDialog extends React.Component { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZbYa?editors=0010) ## So What About Inheritance? {#so-what-about-inheritance} -'Facebook' में हम 'React' का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कंपोनेंट्स इनहेरिटेंस hierarchies बनाने की सलाह दे। -'props' एवं 'कम्पोजीशन' आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। -याद रखिये की एक कौम्पोनॅन्ट 'आरबिटीआरी props', जिसमे 'प्रिमिटिव' वैल्यू हो, 'react' एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। +Facebook में हम React का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कौम्पोनॅन्ट्स इन्हेरिटेंस हाईरारकीस बनाने की सलाह दे। -अगर आप अपने कॉम्पोनेन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file +Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। + +अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file From 6d1ccd55858bef61025a11541e891ef765922b46 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 21:27:13 +0530 Subject: [PATCH 06/14] update word pass into hindi --- content/docs/composition-vs-inheritance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index da2d23311..3b5b98eca 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -47,7 +47,7 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop कि तरह pass हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है। +`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop कि तरह पास हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है। जबकि यह सामान्य नहीं है, कई बारी आपको एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: @@ -84,7 +84,7 @@ React एलिमेंट्स `` एवं `` एक ऑ ## स्पेशलाइजेशन {#specialization} -कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केस" समझते है। उदहारण के लिए हम कह सकते है `WelcomeDialog`, `Dialog` का विशेष केसेस है। +कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केसेस" समझते है। उदहारण के लिए हम कह सकते है `WelcomeDialog`, `Dialog` का विशेष केस है। React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट्स एक "सामान्य" कौम्पोनॅन्ट्स को रेंडर करता है और उसको props से कॉन्फ़िगर करता है: From d7066ef8190b12aad786350da53e7d21d18614e2 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 22:34:52 +0530 Subject: [PATCH 07/14] update component spell --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 3b5b98eca..72b24be44 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -169,4 +169,4 @@ Facebook में हम React का हज़ार जगह प्रयोग Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file +अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file From 0be3d522741a45714908b60c8e56f6487a68dfc7 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 22:51:24 +0530 Subject: [PATCH 08/14] update component spell --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 72b24be44..e973b8558 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -86,7 +86,7 @@ React एलिमेंट्स `` एवं `` एक ऑ कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केसेस" समझते है। उदहारण के लिए हम कह सकते है `WelcomeDialog`, `Dialog` का विशेष केस है। -React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट्स एक "सामान्य" कौम्पोनॅन्ट्स को रेंडर करता है और उसको props से कॉन्फ़िगर करता है: +React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट एक "सामान्य" कौम्पोनॅन्ट को रेंडर करता है और उसको props से कॉन्फ़िगर करता है: ```js{5,8,16-18} function Dialog(props) { From da0ccf835be57e25c7c35c01adc72db2c9b74ed1 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 23:21:40 +0530 Subject: [PATCH 09/14] update class to english --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index e973b8558..6b26a4b04 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -169,4 +169,4 @@ Facebook में हम React का हज़ार जगह प्रयोग Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है| \ No newline at end of file +अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर class की तरह प्रयोग कर सकता है| \ No newline at end of file From 294b1993b15a263c6ea2456ba2aa1659e48f18b5 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sat, 6 Apr 2019 23:36:33 +0530 Subject: [PATCH 10/14] update removed extra space --- content/docs/composition-vs-inheritance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 6b26a4b04..1bfd226e2 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -169,4 +169,4 @@ Facebook में हम React का हज़ार जगह प्रयोग Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर class की तरह प्रयोग कर सकता है| \ No newline at end of file +अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर class की तरह प्रयोग कर सकता है| \ No newline at end of file From 571a1ec33c3beec5a61580cca09ae1b35caa4d71 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Sun, 7 Apr 2019 21:48:04 +0530 Subject: [PATCH 11/14] update few grammatical things --- content/docs/composition-vs-inheritance.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 1bfd226e2..52429a559 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -10,13 +10,13 @@ next: thinking-in-react.html React का कम्पोजीशन मॉडल शक्तिशाली है, और हम सलाह देते है कि आप कौम्पोनॅन्ट के बीच कोड के दुबारा प्रयोग के लिए इनहेरिटेंस कि जगह कम्पोजीशन का प्रयोग करे| -इस भाग में, हम कुछ समस्याएं देखेंगे जहाँ React के नए डेवेलपर्स इनहेरिटेंस का प्रयोग करने की दिशा में जाते है, और दिखाएंगे की हम उनका समाधान कम्पोजीशन से कैसे निकाल सकते हैं| +इस भाग में, हम कुछ समस्याएं देखेंगे जहाँ React के नए डेवेलपर्स इनहेरिटेंस का प्रयोग करने की दिशा में जाते है, और यह भी देखेंगे की हम उनका समाधान कम्पोजीशन से कैसे कर सकते हैं| ## कन्टेनमेंट {#containment} कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट्स के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। -हम सलाह देते है कि, यह कौम्पोनॅन्ट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है| +हम सलाह देते है कि, यह कौम्पोनॅन्ट्स विशेष `चिल्ड्रन` props का प्रयोग करे जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास करना मुमकिन होगा| ```js{4} function FancyBorder(props) { @@ -47,9 +47,9 @@ function WelcomeDialog() { **[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)** -`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop कि तरह पास हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है। +`` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop की तरह पास किया जा सकता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास किये गए एल्मेंट्स अंतिम परिणाम में देखे जा सकते हैं| -जबकि यह सामान्य नहीं है, कई बारी आपको एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: +जबकि यह सामान्य नहीं है, कई बारी आपको एक कौम्पोनॅन्ट मैं एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: ```js{5,8,18,21} function SplitPane(props) { @@ -80,7 +80,7 @@ function App() { [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010) -React एलिमेंट्स `` एवं `` एक ऑब्जेक्ट है, आप इनको बाकि props की तरह पास कर सकते है। यह तरिका आपको और लाइब्रेरीज में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं| +React एलिमेंट्स जैसे कि `` एवं `` केवल एक ऑब्जेक्ट है, आप इनको props की तरह पास कर सकते है, जैसे आप बाक़ी डाटा को पास करते है । यह तरिका आपको और लाइब्रेरीज में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं| ## स्पेशलाइजेशन {#specialization} From 035b041b1ca385fa8ca78500ba57464ada9a54e7 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Mon, 8 Apr 2019 09:38:03 +0530 Subject: [PATCH 12/14] update word children to english --- content/docs/composition-vs-inheritance.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 52429a559..33dfbb771 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -14,9 +14,9 @@ React का कम्पोजीशन मॉडल शक्तिशाल ## कन्टेनमेंट {#containment} -कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट्स के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। +कुछ कौम्पोनॅन्ट अपने children के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट्स के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`। -हम सलाह देते है कि, यह कौम्पोनॅन्ट्स विशेष `चिल्ड्रन` props का प्रयोग करे जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास करना मुमकिन होगा| +हम सलाह देते है कि, यह कौम्पोनॅन्ट्स विशेष `children` props का प्रयोग करे जिनसे children एलिमेंट्स को सीधा आउटपुट में पास करना मुमकिन होगा| ```js{4} function FancyBorder(props) { @@ -28,7 +28,7 @@ function FancyBorder(props) { } ``` -यह दूसरे कौम्पोनॅन्ट्स को JSX की nesting के माध्यम से मनमाना चिल्ड्रन पास करने देता है| +यह दूसरे कौम्पोनॅन्ट्स को JSX की nesting के माध्यम से मनमाना children पास करने देता है| ```js{4-9} function WelcomeDialog() { @@ -49,7 +49,7 @@ function WelcomeDialog() { `` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop की तरह पास किया जा सकता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास किये गए एल्मेंट्स अंतिम परिणाम में देखे जा सकते हैं| -जबकि यह सामान्य नहीं है, कई बारी आपको एक कौम्पोनॅन्ट मैं एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: +जबकि यह सामान्य नहीं है, कई बारी आपको एक कौम्पोनॅन्ट मैं एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `children` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: ```js{5,8,18,21} function SplitPane(props) { From 1c745caabacbb453a1ddc1595af2c21c351a8043 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Wed, 10 Apr 2019 22:36:29 +0530 Subject: [PATCH 13/14] update few spells --- content/docs/composition-vs-inheritance.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index 33dfbb771..b11916396 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -49,7 +49,7 @@ function WelcomeDialog() { `` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop की तरह पास किया जा सकता है। क्यूंकि `FancyBorder`, `{props.children}` को `
` के अंदर रेंडर करता है, पास किये गए एल्मेंट्स अंतिम परिणाम में देखे जा सकते हैं| -जबकि यह सामान्य नहीं है, कई बारी आपको एक कौम्पोनॅन्ट मैं एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `children` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: +जबकि यह सामान्य नहीं है, कई बारी आपको एक कौम्पोनॅन्ट में एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `children` की जगह अपनी कन्वेंशंस इजात कर सकते हैं: ```js{5,8,18,21} function SplitPane(props) { @@ -86,7 +86,7 @@ React एलिमेंट्स जैसे कि `` एवं ` कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केसेस" समझते है। उदहारण के लिए हम कह सकते है `WelcomeDialog`, `Dialog` का विशेष केस है। -React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट एक "सामान्य" कौम्पोनॅन्ट को रेंडर करता है और उसको props से कॉन्फ़िगर करता है: +React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट एक "सामान्य" कौम्पोनॅन्ट को रेंडर करता है और उसको props के द्वारा कॉन्फ़िगर करता है: ```js{5,8,16-18} function Dialog(props) { @@ -165,8 +165,8 @@ class SignUpDialog extends React.Component { ## So What About Inheritance? {#so-what-about-inheritance} -Facebook में हम React का हज़ार जगह प्रयोग करते है, परन्तु हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कौम्पोनॅन्ट्स इन्हेरिटेंस हाईरारकीस बनाने की सलाह दे। +Facebook में हम React का हज़ार बार कौम्पोनॅन्ट्स में प्रयोग करते है, लेकिन हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कौम्पोनॅन्ट्स इन्हेरिटेंस हाईरारकीस बनाने की सलाह दे। -Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। +Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर एक सुरक्षित एवं आरबिटरेरी तरीके से बदल सके। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। -अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर class की तरह प्रयोग कर सकता है| \ No newline at end of file +अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम सुझाव देंगे की आप एक अलग जावास्क्रिप्ट मॉड्यूल का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर class की तरह प्रयोग कर सकता है| \ No newline at end of file From 5704acc96ee3ffb9c2c4703d1a1f55b9a9386b93 Mon Sep 17 00:00:00 2001 From: Apoorv Tomar Date: Thu, 11 Apr 2019 10:37:06 +0530 Subject: [PATCH 14/14] update line 168 --- content/docs/composition-vs-inheritance.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md index b11916396..3a096484d 100644 --- a/content/docs/composition-vs-inheritance.md +++ b/content/docs/composition-vs-inheritance.md @@ -165,8 +165,8 @@ class SignUpDialog extends React.Component { ## So What About Inheritance? {#so-what-about-inheritance} -Facebook में हम React का हज़ार बार कौम्पोनॅन्ट्स में प्रयोग करते है, लेकिन हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कौम्पोनॅन्ट्स इन्हेरिटेंस हाईरारकीस बनाने की सलाह दे। +Facebook में हम हज़ारों React कौम्पोनॅन्ट्स का प्रयोग करते हैं, लेकिन हमे कोई भी ऐसा केस नहीं मिला जहाँ हम आपको कौम्पोनॅन्ट्स इन्हेरिटेंस हाईरारकीस बनाने की सलाह दे। -Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर एक सुरक्षित एवं आरबिटरेरी तरीके से बदल सके। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। +Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर एक सुरक्षित एवं एक्सप्लिसित तरीके से बदल सके। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है। अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम सुझाव देंगे की आप एक अलग जावास्क्रिप्ट मॉड्यूल का प्रयोग करें क्योंकि कोई भी कौम्पोनॅन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर class की तरह प्रयोग कर सकता है| \ No newline at end of file