translated-thinking-in-react #239
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
arshadkazmi42
requested changes
Aug 8, 2023
There was a problem hiding this comment.
Thank you for working on this.
I have added review till line 56. Lets get these fixed then we can continue further with the review.
To know more about review guidelines refer #23
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React. | ||
| React आपके डिज़ाइन और आपके बनाए गए ऐप्स के बारे में सोचने के तरीके को बदल सकता है। जब आप React के साथ एक उपयोगकर्ता इंटरफ़ेस (User Interface / UI) बनाते हैं, तो सबसे पहले आप उसे छोटे टुकड़ों में टूटते हैं, जिन्हें **कंपोनेंट्स** (Components) कहा जाता है। फिर, आप हर एक कंपोनेंट के लिए विभिन्न दृश्य स्थितियों (visual states) का वर्णन करेंगे। अंत में, आप अपने कंपोनेंट्स को एक साथ जोड़ेंगे ताकि उनमे से डाटा का प्रवाह सही तरीके से हो सके। इस ट्यूटोरियल में, हम आपको React के साथ एक खोजने योग्य प्रोडक्ट डेटा टेबल बनाने के पीछे की सोच प्रक्रिया के माध्यम से गाइड करेंगे। |
There was a problem hiding this comment.
Suggested change
| React आपके डिज़ाइन और आपके बनाए गए ऐप्स के बारे में सोचने के तरीके को बदल सकता है। जब आप React के साथ एक उपयोगकर्ता इंटरफ़ेस (User Interface / UI) बनाते हैं, तो सबसे पहले आप उसे छोटे टुकड़ों में टूटते हैं, जिन्हें **कंपोनेंट्स** (Components) कहा जाता है। फिर, आप हर एक कंपोनेंट के लिए विभिन्न दृश्य स्थितियों (visual states) का वर्णन करेंगे। अंत में, आप अपने कंपोनेंट्स को एक साथ जोड़ेंगे ताकि उनमे से डाटा का प्रवाह सही तरीके से हो सके। इस ट्यूटोरियल में, हम आपको React के साथ एक खोजने योग्य प्रोडक्ट डेटा टेबल बनाने के पीछे की सोच प्रक्रिया के माध्यम से गाइड करेंगे। | |
| React आपके डिज़ाइन और आपके बनाए गए ऐप्स के बारे में सोचने के तरीके को बदल सकता है। जब आप React के साथ एक यूजर इंटरफ़ेस बनाते हैं, तो सबसे पहले आप उसे छोटे टुकड़ों में टूटते हैं, जिन्हें **कौम्पोनॅन्टस** कहा जाता है। फिर, आप हर एक कौम्पोनॅन्ट के लिए विभिन्न विसुअल स्टेट्स का वर्णन करेंगे। अंत में, आप अपने कौम्पोनॅन्टस को एक साथ जोड़ेंगे ताकि उनमे से डाटा का प्रवाह सही तरीके से हो सके। इस ट्यूटोरियल में, हम आपको React के साथ एक खोजने योग्य प्रोडक्ट डेटा टेबल बनाने के पीछे की सोच प्रक्रिया के माध्यम से गाइड करेंगे। |
| To implement a UI in React, you will usually follow the same five steps. | ||
| React में एक UI को लागू करने के लिए, आप आम तौर पर इन्हीं पाँच चरणों का पालन करेंगे। | ||
|
|
||
| ## Step 1: UI को एक कंपोनेंट विभाजित करें {/*step-1-break-the-ui-into-a-component-hierarchy*/} |
There was a problem hiding this comment.
Suggested change
| ## Step 1: UI को एक कंपोनेंट विभाजित करें {/*step-1-break-the-ui-into-a-component-hierarchy*/} | |
| ## Step 1: UI को एक कौम्पोनॅन्ट विभाजित करें {/*step-1-break-the-ui-into-a-component-hierarchy*/} |
lets change component to कौम्पोनॅन्ट everywhere
|
|
||
| ## Step 1: UI को एक कंपोनेंट विभाजित करें {/*step-1-break-the-ui-into-a-component-hierarchy*/} | ||
|
|
||
| सबसे पहले, मॉकअप में हर कंपोनेंट और सब-कंपोनेंट (subcomponent) के चारों ओर बॉक्स (डब्बे) बनाएँ और उन्हें नाम दें। यदि आप एक डिज़ाइनर के साथ काम कर रहे हैं, तो शायद उन्होंने अपने डिज़ाइन टूल में पहले से ही इन कंपोनेंट्स को नाम दे दिया होगा। उनसे इस विषय मे वार्ता करें! |
There was a problem hiding this comment.
Suggested change
| सबसे पहले, मॉकअप में हर कंपोनेंट और सब-कंपोनेंट (subcomponent) के चारों ओर बॉक्स (डब्बे) बनाएँ और उन्हें नाम दें। यदि आप एक डिज़ाइनर के साथ काम कर रहे हैं, तो शायद उन्होंने अपने डिज़ाइन टूल में पहले से ही इन कंपोनेंट्स को नाम दे दिया होगा। उनसे इस विषय मे वार्ता करें! | |
| सबसे पहले, मॉकअप में हर कौम्पोनॅन्ट और सब-कौम्पोनॅन्ट के चारों ओर बॉक्स बनाएँ और उन्हें नाम दें। यदि आप एक डिज़ाइनर के साथ काम कर रहे हैं, तो शायद उन्होंने अपने डिज़ाइन टूल में पहले से ही इन कौम्पोनॅन्टस को नाम दे दिया होगा। उनसे इस विषय मे वार्ता करें! |
|
|
||
| सबसे पहले, मॉकअप में हर कंपोनेंट और सब-कंपोनेंट (subcomponent) के चारों ओर बॉक्स (डब्बे) बनाएँ और उन्हें नाम दें। यदि आप एक डिज़ाइनर के साथ काम कर रहे हैं, तो शायद उन्होंने अपने डिज़ाइन टूल में पहले से ही इन कंपोनेंट्स को नाम दे दिया होगा। उनसे इस विषय मे वार्ता करें! | ||
|
|
||
| आपके पृष्ठभूमि के अनुरूप, आप कंपोनेंट्स को विभाजित करने के लिए विभिन्न तरीकों पर विचार कर सकते हैं: |
There was a problem hiding this comment.
Suggested change
| आपके पृष्ठभूमि के अनुरूप, आप कंपोनेंट्स को विभाजित करने के लिए विभिन्न तरीकों पर विचार कर सकते हैं: | |
| आपके बैकग्राउंड के अनुरूप, आप कौम्पोनॅन्टस को विभाजित करने के लिए विभिन्न तरीकों पर विचार कर सकते हैं: |
|
|
||
| ## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} | ||
| * **प्रोग्रामिंग** (Programming)--यदि आप नए फ़ंक्शन या ऑब्जेक्ट बनाने का फैसला कर रहे हैं तो एक ही तकनीक का उपयोग करें। एक ऐसी तकनीक है एकल जिम्मेवारी का सिद्धांत ([single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle)), अर्थात्, एक कंपोनेंट को आदर्शरूप से केवल एक काम करना चाहिए। यदि यह बढ़ जाता है, तो इसे छोटे से छोटे सब-कंपोनेंट (subcomponent) में विभाजित किया जाना चाहिए। |
There was a problem hiding this comment.
Suggested change
| * **प्रोग्रामिंग** (Programming)--यदि आप नए फ़ंक्शन या ऑब्जेक्ट बनाने का फैसला कर रहे हैं तो एक ही तकनीक का उपयोग करें। एक ऐसी तकनीक है एकल जिम्मेवारी का सिद्धांत ([single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle)), अर्थात्, एक कंपोनेंट को आदर्शरूप से केवल एक काम करना चाहिए। यदि यह बढ़ जाता है, तो इसे छोटे से छोटे सब-कंपोनेंट (subcomponent) में विभाजित किया जाना चाहिए। | |
| * **प्रोग्रामिंग**--यदि आप नए फ़ंक्शन या ऑब्जेक्ट बनाने का फैसला कर रहे हैं तो एक ही तकनीक का उपयोग करें। एक ऐसी तकनीक है [एक जिम्मेवारी का सिद्धांत](https://en.wikipedia.org/wiki/Single_responsibility_principle), अर्थात्, एक कौम्पोनॅन्ट को आदर्शरूप से केवल एक काम करना चाहिए। यदि यह बढ़ जाता है, तो इसे छोटे से छोटे सब-कौम्पोनॅन्ट में विभाजित किया जाना चाहिए। |
|
|
||
| Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them! | ||
| * **सीएसएस** (CSS)--विचार करें कि आप class selectors किसके लिए बनाएँगे। (हालांकि, कंपोनेंट्स थोड़े कम सूक्ष्म होते हैं।) |
There was a problem hiding this comment.
Suggested change
| * **सीएसएस** (CSS)--विचार करें कि आप class selectors किसके लिए बनाएँगे। (हालांकि, कंपोनेंट्स थोड़े कम सूक्ष्म होते हैं।) | |
| * **CSS**--विचार करें कि आप class selectors किसके लिए बनाएँगे। (हालांकि, कौम्पोनॅन्टस थोड़े कम सूक्ष्म होते हैं।) |
|
|
||
| Depending on your background, you can think about splitting up a design into components in different ways: | ||
| * **डिज़ाइन** (Design)--विचार करें कि आप डिज़ाइन के स्तर (layers) को कैसे व्यवस्थित करेंगे। |
There was a problem hiding this comment.
Suggested change
| * **डिज़ाइन** (Design)--विचार करें कि आप डिज़ाइन के स्तर (layers) को कैसे व्यवस्थित करेंगे। | |
| * **Design**--विचार करें कि आप डिज़ाइन के स्तर (layers) को कैसे व्यवस्थित करेंगे। |
|
|
||
| Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them! | ||
| * **सीएसएस** (CSS)--विचार करें कि आप class selectors किसके लिए बनाएँगे। (हालांकि, कंपोनेंट्स थोड़े कम सूक्ष्म होते हैं।) | ||
|
|
|
|
||
| If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model. | ||
| यदि आपका JSON अच्छी तरह से संरचित है, तो आपको अक्सर मिलेगा कि यह आपके UI के कंपोनेंट संरचना से अपने आप ही मैप होता है। यह इसलिए क्योंकि UI और डेटा मॉडल आम तौर पर एक ही जानकारी वितरण की आर्किटेक्चर होती है--अर्थात्, एक ही आकृति। अपने UI को कंपोनेंट्स में विभाजित करें, जहां प्रत्येक कंपोनेंट आपके डेटा मॉडल के एक अंश के साथ मेल खाता है। |
There was a problem hiding this comment.
Suggested change
| यदि आपका JSON अच्छी तरह से संरचित है, तो आपको अक्सर मिलेगा कि यह आपके UI के कंपोनेंट संरचना से अपने आप ही मैप होता है। यह इसलिए क्योंकि UI और डेटा मॉडल आम तौर पर एक ही जानकारी वितरण की आर्किटेक्चर होती है--अर्थात्, एक ही आकृति। अपने UI को कंपोनेंट्स में विभाजित करें, जहां प्रत्येक कंपोनेंट आपके डेटा मॉडल के एक अंश के साथ मेल खाता है। | |
| यदि आपका JSON अच्छी तरह से संरचित है, तो आपको अक्सर मिलेगा कि यह आपके UI के कौम्पोनॅन्ट संरचना से अपने आप ही मैप होता है। यह इसलिए क्योंकि UI और डेटा मॉडल आम तौर पर एक ही जानकारी वितरण की आर्किटेक्चर होती है--अर्थात्, एक ही आकृति। अपने UI को कौम्पोनॅन्टस में विभाजित करें, जहां प्रत्येक कौम्पोनॅन्ट आपके डेटा मॉडल के एक अंश के साथ मेल खाता है। |
|
|
||
| There are five components on this screen: | ||
| screen पर पाँच कम्पोनन्ट हैं: |
There was a problem hiding this comment.
Suggested change
| screen पर पाँच कम्पोनन्ट हैं: | |
| screen पर पाँच कौम्पोनॅन्टस हैं: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Translated entire Thinking-in-react page in Hindi.