Skip to content

Translate entire Composition vs Inheritance page #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Apr 11, 2019
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
updated few spell with '
  • Loading branch information
apoorvtomar2222 committed Apr 6, 2019
commit aa2f0be0f82371d5da60b9ccbd293e898d367816
20 changes: 10 additions & 10 deletions content/docs/composition-vs-inheritance.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ React का कम्पोजीशन मॉडल शक्तिशाल

कुछ कौम्पोनॅन्ट अपने चिल्ड्रन के बारे में समय से पूर्व नहीं जान पाते| यह उन कौम्पोनॅन्ट्स के लिए आम बात है, जो सामान्य "boxes" दर्शाते है, जैसे `Sidebar` एवं `Dialog`।

हम सलाह देते है कि, यह कंपोनेंट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है|
हम सलाह देते है कि, यह कौम्पोनॅन्ट्स विशेष `चिल्ड्रन` props का प्रयोग करते है जिनसे चिल्ड्रन एलिमेंट्स को सीधा आउटपुट में पास किया जाता है|

```js{4}
function FancyBorder(props) {
Expand Down Expand Up @@ -47,7 +47,7 @@ function WelcomeDialog() {

**[Try it on CodePen](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)**

`<FancyBorder>` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में चिल्ड्रेंस prop कि तरह pass हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `<div>` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है।
`<FancyBorder>` JSX टैग के अंदर कुछ भी हो, वह `FancyBorder` कौम्पोनॅन्ट में `चिल्ड्रेंस` prop कि तरह pass हो जाता है। क्यूंकि `FancyBorder`, `{props.children}` को `<div>` के अंदर रेंडर करता है, पास्ड एलिमेंट्स अंतिम परिणाम में दिखने लगते है।

जबकि यह सामान्य नहीं है, कई बारी आपको एक से अधिक "holes" की आवश्यकता पढ़ सकती है। इन परिस्थियों में आप `चिल्ड्रन` की जगह अपनी कन्वेंशंस इजात कर सकते हैं:

Expand Down Expand Up @@ -80,13 +80,13 @@ function App() {

[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)

React एलिमेंट्स `<Contacts/>` एवं `<Chat/>` एक `ऑब्जेक्ट` है, आप इनको बाकि `props` की तरह `pass` कर सकते है। यह तरिका आपको और 'libraries' में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं|
React एलिमेंट्स `<Contacts />` एवं `<Chat />` एक ऑब्जेक्ट है, आप इनको बाकि props की तरह पास कर सकते है। यह तरिका आपको और लाइब्रेरीज में "slot" की तरह लग रहा होगा परन्तु React में कोई रोक नहीं है कि आप props में क्या पास कर सकते हैं|

## स्पेशलाइजेशन {#specialization}

कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केस" समझते है। उदहारण के लिए हम कह सकते है WelcomeDialog, Dialog का विशेष केसेस है।
कई बार हम कौम्पोनॅन्ट्स को और कौम्पोनॅन्ट्स का "स्पेशल केस" समझते है। उदहारण के लिए हम कह सकते है `WelcomeDialog`, `Dialog` का विशेष केसेस है।

React में यह भी 'कम्पोजीशन' से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कंपोनेंट्स एक 'generic' कॉम्पोनेन्ट को रेंडर करता है और उसको "props" से कॉन्फ़िगर करता है|
React में यह भी कम्पोजीशन से उपलब्ध किया जाता है, जहाँ एक "विशिष्ट" कौम्पोनॅन्ट्स एक "सामान्य" कौम्पोनॅन्ट्स को रेंडर करता है और उसको props से कॉन्फ़िगर करता है:

```js{5,8,16-18}
function Dialog(props) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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 फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है|
Props एवं कम्पोजीशन आपको हर प्रकार का लचीलापन देता है ताकि आप अपने कौम्पोनॅन्ट का देख दिखाव एवं बिहेवियर बदल सके एक सुरक्षित एवं बिना किसि उलझन के। याद रखिये की एक कौम्पोनॅन्ट आरबिटीआरी props, जिसमे प्रिमिटिव वैल्यू हो, React एलिमेंट्स या फिर फंक्शन्स को स्वीकार कर सकता है।

अगर आप अपने कौम्पोनॅन्ट के बीच कोई भी non-UI फंक्शनलिटी का प्रयोग करना चाहते है, हम कहेंगे की आप एक अलग जावास्क्रिप्ट मॉडल्स का प्रयोग करें क्योंकि कोई भी कॉम्पोनेन्ट इसको इम्पोर्ट कर सकता है एवं बिना इसको एक्सटेंड करे इसको फंक्शन, ऑब्जेक्ट, या फिर क्लास की तरह प्रयोग कर सकता है|