Skip to content

Commit

Permalink
Worked on review comments till line reactjs#34
Browse files Browse the repository at this point in the history
  • Loading branch information
mayank-gangwal authored Jan 14, 2020
1 parent 3647419 commit a63b0ef
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions content/docs/thinking-in-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ redirect_from:
prev: composition-vs-inheritance.html
---

React, हमारी राय में, एक मुख्य तरीका है, जावास्क्रिप्ट द्वारा, बड़ी और तेज़ वेब एप्प बनाने का। यह हमारे लिए फेसबुक और इंस्टाग्राम के लिए काफी अच्छे से बढ़ा।
हमारी राय में, जावास्क्रिप्ट द्वारा, बड़ी और तेज़ वेब एप्पस बनाने का React एक मुख्य तरीका है। यह हमारे लिए Facebook और Instagram के लिए काफी अच्छे से बढ़ा है

कई में से एक मुख्य बात React की है कि कैसे यह आपको एप्प बनाते हुए उसके बारे में सोचने पर मजबूर करता है। इस आलेख में हम React से बने खोजनीय डाटा टेबल को बनाने की विचार प्रक्रिया पर ध्यान देंगे।
कई में से एक मुख्य बात React की है कि कैसे यह आपको एप्प बनाते हुए उसके बारे में सोचने पर मजबूर करता है। इस डॉक्यूमेंट में हम React से बने सर्चएब्ल प्रोडक्ट डाटा टेबल को बनाने की विचार प्रक्रिया पर ध्यान देंगे।

## मॉक से शुरुवात {#start-with-a-mock}
## मॉक के साथ शुरुवात {#start-with-a-mock}

कल्पना कीजिये की हमारे पास पहले से JSON API और मॉक उपलब्ध है। मॉक ऐसा कुछ दिखता है:
कल्पना कीजिये कि हमारे पास पहले से JSON API और हमारे डिज़ाइनर से एक मॉक उपलब्ध है। मॉक ऐसा कुछ दिखता है:

![Mockup](../images/blog/thinking-in-react-mock.png)

Expand All @@ -31,15 +31,15 @@ React, हमारी राय में, एक मुख्य तरीक
];
```

## स्टेप १ : UI को कौम्पोनॅन्ट पदक्रम में तोड़े {#step-1-break-the-ui-into-a-component-hierarchy}
## स्टेप १ : UI को कौम्पोनॅन्ट हायरार्की में ब्रेक करें {#step-1-break-the-ui-into-a-component-hierarchy}

पहली चीज़ जो आप करना चाहेंगे, वह होगी कि अपने हर मॉक कौम्पोनॅन्ट (और उप कौम्पोनॅन्ट) के आस पास बक्से बना दे और सब को नाम दे दें। अगर आप डिज़ाइनर के साथ काम कर रहे है, तो उन्होंने यह काम पहले ही कर रखा होगा, उनसे बात कीजिये! उनकी फोटोशॉप परत के नाम, आपके react कौम्पोनॅन्ट के नाम हो सकते है।

परन्तु आप को कैसे पता चलेगा कि खुद का कौम्पोनॅन्ट क्या होना चाहिए? वह ही तकनीक का इस्तेमाल कीजिये जो आप एक नया ऑब्जेक्ट या फंक्शन बनाने के निर्णय के लिए लेते है। एक ऐसी तकनीक है [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), अर्थात्, कौम्पोनॅन्ट को आदर्श रूप में एक ही चीज़ करना चाहिए। अगर वह बढ़ रहा है, तो उसे छोटे उप कौम्पोनॅन्टस में तोड़ देना चाहिए।

चुकी आप अक्सर उपभोक्ता को JSON डाटा मॉडल दिखते है, आप ये देखेंगे की यदि आपका मॉडल सही बना है, तो आपका UI (और इसलिए आपका कौम्पोनॅन्ट ढांचा) सही दिखेगा। यह इसलिए क्युकी UI और डाटा मॉडल समान *इनफार्मेशन आर्किटेक्चर* इस्तेमाल करते है। अपने UI कौम्पोनॅन्ट को बाँट दीजिये, ताकि हर एक कौम्पोनॅन्ट आपके डाटा मॉडल के टुकड़े से मेल खाए।

![कौम्पोनॅन्ट आलेख](../images/blog/thinking-in-react-components.png)
![कौम्पोनॅन्ट डॉक्यूमेंट](../images/blog/thinking-in-react-components.png)

आप देखेंगे कि हमारे एप्प में ५ कौम्पोनॅन्ट है। हर कौम्पोनॅन्ट जो डाटा वर्णन करता है, उसे हमने तिर्थकित किया हुआ है।

Expand Down Expand Up @@ -76,7 +76,7 @@ React, हमारी राय में, एक मुख्य तरीक

### संक्षिप्त अन्तराल: Props की तुलना में State {#a-brief-interlude-props-vs-state}

React में दो प्रकार के डाटा "मॉडल" है: props और state। दोनों के अंतर को समझना महत्वपूर्ण है; पढ़िए [React का शासकीय आलेख](/docs/state-and-lifecycle.html) यदि आपको दोनों के अंतर के बारे में नहीं पता हो तो। देखिये [FAQ: state और props में क्या अंतर है?](/docs/faq-state.html#what-is-the-difference-between-state-and-props)
React में दो प्रकार के डाटा "मॉडल" है: props और state। दोनों के अंतर को समझना महत्वपूर्ण है; पढ़िए [React का शासकीय डॉक्यूमेंट](/docs/state-and-lifecycle.html) यदि आपको दोनों के अंतर के बारे में नहीं पता हो तो। देखिये [FAQ: state और props में क्या अंतर है?](/docs/faq-state.html#what-is-the-difference-between-state-and-props)

## स्टेप ३: UI state का न्यूनतम (परन्तु पूर्ण) प्रतिनिधित्व {#step-3-identify-the-minimal-but-complete-representation-of-ui-state}

Expand Down

0 comments on commit a63b0ef

Please sign in to comment.