diff --git a/beta/src/pages/learn/thinking-in-react.md b/beta/src/pages/learn/thinking-in-react.md index 62ff50f06..23fc56239 100644 --- a/beta/src/pages/learn/thinking-in-react.md +++ b/beta/src/pages/learn/thinking-in-react.md @@ -1,18 +1,18 @@ --- -title: Thinking in React +title: React में सोचें --- -React can change how you think about the designs you look at and the apps you build. Where once you might have seen a forest, after working with React, you will appreciate the individual trees. React makes it easier to think in design systems and UI states. In this tutorial, we'll guide you through the thought process of building a searchable product data table with React. +React आपके द्वारा देखे जाने वाले डिज़ाइन और आपके द्वारा बनाए गए ऍप्स के बारे में आपके सोचने के तरीके को बदल सकता है। जहां एक बार आपने जंगल को देखा है, React के साथ काम करने के बाद, आप अलग-अलग पेड़ों की सराहना करेंगे। React डिजाइन सिस्टम और UI states में सोचना आसान बनाता है। इस टुटोरिअल में, हम आपको सर्च होने वाले प्रोडक्ट डाटा टेबल को React के साथ बनाए के तरीके के बारे में गाइड करेंगे। -## Start with the mockup {/*start-with-the-mockup*/} +## मॉकअप के साथ शुरू करें {/*start-with-the-mockup*/} -Imagine that you already have a JSON API and a mockup from a designer. +कल्पना करें कि आपके पास पहले से ही एक JSON API और एक डिजाइनर से दिया गया मॉकअप है। -The JSON API returns some data that looks like this: +JSON API कुछ डेटा लौटाता है जो इस तरह दिखता है: ```json [ @@ -25,25 +25,25 @@ The JSON API returns some data that looks like this: ] ``` -The mockup looks like this: +मॉकअप इस तरह दिखता है: -To implement a UI in React, you will usually follow the same five steps. +React में UI को लागू करने के लिए, आप आमतौर पर इन्ही पांच स्टेप्स का पालन करेंगे। -## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} +## Step 1: UI को कौम्पोनॅन्ट हायरार्की में बांटें {/*step-1-break-the-ui-into-a-component-hierarchy*/} -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. Check in with them! +मॉकअप में प्रत्येक कौम्पोनॅन्ट और सबकौम्पोनॅन्ट के चारों ओर बॉक्स बनाकर शुरू करें और उनका नामकरण करें। यदि आप किसी डिज़ाइनर के साथ काम करते हैं, तो हो सकता है कि उन्होंने अपने डिज़ाइन टूल में इन कौम्पोनॅन्टस का नाम पहले ही रख लिया हो। उनके साथ चेक करलें! -Depending on your background, you can think about splitting up a design into components in different ways: +आपकी बैकग्राउंड के आधार पर, आप किसी डिज़ाइन को विभिन्न तरीकों से कौम्पोनॅन्टस में बांटने करने के बारे में सोच सकते हैं: -* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. -* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) -* **Design**--consider how you would organize the design's layers. +- **Programming**--आपको एक नया फंक्शन बनाना है या ऑब्जेक्ट ये डीडे करने के लिए एक ही तरकीब इस्तेमाल करें। [सिंगल रिस्पांसिबिलिटी प्रिंसिपल](https://en.wikipedia.org/wiki/Single_responsibility_principle) ऐसे ही एक तकनीक है, जिसमें, एक कौम्पोनॅन्ट को सिर्फ एक ही काम करना चाहिए। अगर वो कौम्पोनॅन्ट ज़्यादा बड़ा हो रहा है, तो उसे छोटे कौम्पोनॅन्टस में बाँट दें। +- **CSS**--विचार करें कि आप किसके लिए क्लास सेलेक्टर्स को बनाते हैं। (हालांकि, कौम्पोनॅन्ट थोड़ा काम डिटेल में होते है।) +- **Design**--विचार करें कि आप डिज़ाइन लेयर्स को कैसे व्यवस्थित करेंगे। -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 are five components on this screen: +इस स्क्रीन पर पांच कौम्पोनॅन्टस हैं: @@ -51,19 +51,19 @@ There are five components on this screen: -1. `FilterableProductTable` (grey) contains the entire app. -2. `SearchBar` (blue) receives the user input. -3. `ProductTable` (lavender) displays and filters the list according to the user input. -4. `ProductCategoryRow` (green) displays a heading for each category. -5. `ProductRow` (yellow) displays a row for each product. +1. `FilterableProductTable` (grey) पूरा ऐप शामिल है। +2. `SearchBar` (blue) यूजर इनपुट प्राप्त करता है। +3. `ProductTable` (lavender) यूजर इनपुट के अनुसार सूची को डिस्प्ले और फ़िल्टर करता है। +4. `ProductCategoryRow` (green) हर केटेगरी के लिए एक शीर्षक डिस्प्ले करता है। +5. `ProductRow` (yellow) हर प्रोडक्ट के लिए एक पंक्ति डिस्प्ले करता है। -If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), it would make sense to make this its own `ProductTableHeader` component. +यदि आप `ProductTable` (लैवेंडर) को देखते हैं, तो आप देखेंगे कि टेबल का हैडर (जिसमें "Name" और "Price" लेबल शामिल हैं) इसका अपना कौम्पोनॅन्ट नहीं है। यह अपनी पसंद का मामला है, और आप किसी भी तरह से कर सकते हैं। इस उदाहरण के लिए, यह `ProductTable` का एक हिस्सा है क्योंकि यह `ProductTable` सूची के अंदर दिखाई देता है। हालांकि, अगर यह हैडर काम्प्लेक्स हो जाता है (उदाहरण के लिए, यदि आप सॉर्टिंग ऐड करते हैं), तब ऐसे अपना खुद का `ProductTableHeader` कौम्पोनॅन्ट बनाना सही रहेगा। -Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy: +अब जब आपने मॉकअप में कौम्पोनॅन्ट की पहचान की है, तो उन्हें हायरार्की में व्यवस्थित करें। कौम्पोनॅन्ट जो मॉकअप में एक और कौम्पोनॅन्ट के भीतर दिखाई देता है हायरार्की में एक चाइल्ड के रूप में दिखनाा चाहिए: * `FilterableProductTable` * `SearchBar` @@ -71,13 +71,13 @@ Now that you've identified the components in the mockup, arrange them into a hie * `ProductCategoryRow` * `ProductRow` -## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/} +## Step 2: React में स्टैटिक वर्शन बनाएं {/*step-2-build-a-static-version-in-react*/} -Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and then add interactivity separately. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing. +अब जब आपके पास आपका कौम्पोनॅन्ट हायरार्की है, तो अब आपके एप्प को बनाने का समय है। सबसे सरल अप्प्रोअच एक वर्शन बनाना है जो किसी भी इंटरएक्टिविटी को ऐड करे बिना अपने डेटा मॉडल से UI रेंडर करता है... अभी तक! अक्सर स्टैटिक वर्शन को पहले बनाना और फिर अलग-अलग इंटरएक्टिविटी ऐड करना आसान होता है। एक स्टैटिक वर्शन बनाने के लिए बिना सोचे बहुत सारे टाइपिंग की आवश्यकता होती है, लेकिन इंटरएक्टिविटी को ऐड करने में बहुत कुछ सोचने और कम टाइपिंग की आवश्यकता होती है। -To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props](/learn/passing-props-to-a-component). Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.) +एप्प का स्टैटिक वर्शन बनाने के लिए जो आपके डाटा मॉडल को रेंडर करे, उसके लिए आप दूसरा कौम्पोनॅन्टस इस्तेमाल करकेक उसमें डेटा [props](/learn/passing-props-to-a-component) से भेजने के बजाये आप [कौम्पोनॅन्टस](/learn/your-first-component) बनाना चाहेंगे। Props डेटा को पैरेंट से चाइल्ड तक पास करने का तरीका है।(अगर आप [state](/learn/state-a-components-memory) के कांसेप्ट के बारे में जानते है, तो स्टैटिक वर्शन बनाने के लिए state बिलकुल भी इस्तेमाल न करे। State सिर्फ इंटरएक्टिविटी के लिए रखा गया है, जो की, ऐसा डेटा जो वक़्त के साथ बदलता है। आप को इसकी ज़रूरत नहीं है, क्यूंकि ये एप्प का स्टैटिक वर्शन है।) -You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up. +आप हायरार्की में ऊपर के कौम्पोनॅन्टस के निर्माण के साथ शुरुआत करके या तो "टॉप डाउन" बना सकते हैं (`FilterableProductTable` की तरह) या नीचे के कौम्पोनॅन्टस से काम करके "बॉटम अप" (`ProductRow` की तरह)। सरल उदाहरणों में, आमतौर पर टॉप-डाउन जाना आसान होता है, और बड़े प्रोजेक्ट्स पर, बॉटम-अप जाना आसान होता है। @@ -177,7 +177,7 @@ export default function App() { ```css body { - padding: 5px + padding: 5px; } label { display: block; @@ -195,112 +195,112 @@ td { -**Don't fret if this code example looks intimidating!** In this guide, we're focusing on concepts rather than code. Make sure to bookmark [Describing the UI](/learn/describing-the-ui) which will help you fill in the gaps and make sense of this code. +**यदि यह कोड उदाहरण डराने वाला लगता है तो परेशान न हों!** इस गाइड में, हम कोड के बजाय कॉन्सेप्ट्स पर ध्यान केंद्रित कर रहे हैं। [UI का वर्णन](/learn/describing-the-ui) को बुकमार्क करना सुनिश्चित करें जो आपको गैप्स को फिल करने और इस कोड को समझने में मदद करेगा। -After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree. +अपने कौम्पोनॅन्ट के निर्माण के बाद, आपके पास रीयूज़एबल कौम्पोनॅन्ट की एक लाइब्रेरी होगी जो आपके डेटा मॉडल को रेंडर करेगी। चूंकि यह एक स्टैटिक ऐप है, कौम्पोनॅन्ट केवल JSX रिटर्न करेंगे। हायरार्की में सबसे ऊपर वाले कौम्पोनॅन्ट (`FilterableProductTable`) आपके डाटा मॉडल को prop की तरह लेगा। इसे *वन-वे डेटा फ्लो* कहा जाता है क्योंकि डाटा टॉप-लेवल के कौम्पोनॅन्ट से ट्री के सबसे निचे वाले कौम्पोनॅन्ट तक फ्लो करता है। - -At this point, you should not be using any state values. That’s for the next step! + +इस समय, आपको किसी भी state की वैल्यूज कर इस्तेमाल नहीं करना चाहिए। वो अगले कदम के लिए है! -## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} +## Step 3: UI state का न्यूनतम लेकिन पूर्ण प्रतिनिधित्व खोजें {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} -To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this. +UI को इंटरैक्टिव बनाने के लिए, आपको उपयोगकर्ताओं को अपने अंतर्निहित डेटा मॉडल को बदलने की आवश्यकता है। आप इसके लिए *state* का उपयोग करेंगे। -Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)). Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array. +state के बारे में सोचें कि आपके ऐप को याद रखने वाले डेटा के न्यूनतम सेट के रूप में सोचें। state की संरचना के लिए सबसे महत्वपूर्ण सिद्धांत इसे रखना है[DRY (Don't Repeat Yourself](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)). अपने आवेदन की जरूरतों के पूर्ण न्यूनतम प्रतिनिधित्व को समझें और मांग पर बाकी सबकुछ की गणना करें। उदाहरण के लिए, यदि आप खरीदारी सूची बना रहे हैं, तो आप वस्तुओं को state में एक सरणी के रूप में स्टोर कर सकते हैं। यदि आप सूची में वस्तुओं की संख्या भी प्रदर्शित करना चाहते हैं, तो वस्तुओं की संख्या को किसी अन्य state मूल्य के रूप में संग्रहीत न करें - इसके बजाय, अपनी सरणी की लंबाई पढ़ें। -Now think of all of the pieces of data in this example application: +अब इस उदाहरण में डेटा के सभी टुकड़ों के बारे में सोचें आवेदन: -1. The original list of products -2. The search text the user has entered -3. The value of the checkbox -4. The filtered list of products +1. उत्पादों की मूल सूची +2. उपयोगकर्ता द्वारा दर्ज किया गया खोज पाठ +3. चेकबॉक्स का मान +4. उत्पादों की फ़िल्टर सूची -Which of these are state? Identify the ones that are not: +इनमें से कौन सा state है?उन लोगों की पहचान करें जो नहीं हैं: -* Does it **remain unchanged** over time? If so, it isn't state. -* Is it **passed in from a parent** via props? If so, it isn't state. -* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state! +- क्या यह **समय के साथ अपरिवर्तित** रहता है? यदि हां, तो यह state नहीं है। +- क्या यह **एक माता-पिता से** प्रोप के माध्यम से पारित किया गया है? यदि हां, तो यह state नहीं है। +- **क्या आप इसकी गणना कर सकते हैं** मौजूदा state या प्रोप के आधार पर आपके कपम्पोनेंट में ? यदि हां, तो यह *निश्चित रूप से* state नहीं है! -What's left is probably state. +क्या बचा है शायद state है। -Let's go through them one by one again: +आइए उनसे एक-एक करके फिर से जाएं: -1. The original list of products is **passed in as props, so it's not state**. -2. The search text seems to be state since it changes over time and can't be computed from anything. -3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. -4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. +1. उत्पादों की मूल सूची **प्रोप के रूप में पारित है, इसलिए यह state** नहीं है। +2. खोज पाठ state प्रतीत होता है क्योंकि यह समय के साथ बदलता है और किसी भी चीज़ से गणना नहीं की जा सकती है। +3. चेकबॉक्स का मान state प्रतीत होता है क्योंकि यह समय के साथ बदलता है और किसी भी चीज़ से गणना नहीं की जा सकती है। +4. उत्पादों की फ़िल्टर की गई सूची **state इसलिए नहीं है क्योंकि इसकी गणना की जा सकती है** उत्पादों की मूल सूची लेकर और उसे खोज टेक्स्ट और चेकबॉक्स के मान के अनुसार फ़िल्टर करके। -This means only the search text and the value of the checkbox are state! Nicely done! +इसका मतलब केवल खोज पाठ और चेकबॉक्स का मान state है!अच्छी तरह से किया! -There are two types of "model" data in React: props and state. The two are very different: +प्रतिक्रिया में दो प्रकार के "मॉडल" डेटा हैं: प्रोप और state। दोनों बहुत अलग हैं: -* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`. -* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state. +- [**प्रोप** आपके द्वारा पास किए गए तर्कों की तरह हैं](/learn/passing-props-to-a-component) एक समारोह के लिए। उन्होंने एक मूल घटक को एक बाल घटक को डेटा पास करने और इसकी उपस्थिति को अनुकूलित करने दिया। उदाहरण के लिए, एक 'फॉर्म' एक 'रंग' प्रोप को 'बटन' पास कर सकता है। +- [**state** एक कुम्पोनान्ट की स्मृति की तरह है।](/learn/state-a-components-memory) यह एक कुम्पोनानेंट को कुछ जानकारी का ट्रैक रखने देता है और इंटरैक्शन के जवाब में इसे बदल देता है। उदाहरण के लिए, एक 'बटन' `Ishovered` state का ट्रैक रख सकता है। -Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick! +प्रोप और state अलग हैं, लेकिन वे एक साथ काम करते हैं।एक माता-पिता कुम्पोनानेंट अक्सर state में कुछ जानकारी रखेगा (ताकि यह इसे बदल सके), और इसे अपने प्रोप के रूप में बाल घटकों के लिए नीचे_पास करें। यह ठीक है अगर अंतर अभी भी पहले पढ़ने पर अस्पष्ट महसूस करता है।वास्तव में छड़ी के लिए यह थोड़ा अभ्यास करता है! -## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} +## Step 4: पहचानें कि आपके state को कहाँ रहना चाहिए {/*step-4-identify-where-your-state-should-live*/} + +अपने ऐप के न्यूनतम state डेटा की पहचान करने के बाद, आपको यह पहचानने की आवश्यकता है कि इस state को बदलने के लिए कौन सा कुम्पोनान्ट जिम्मेदार है, या *OWNS* state। Remember: प्रतिक्रिया एक-तरफा डेटा प्रवाह का उपयोग करती है, जो माता-पिता से बाल घटक तक घटक पदानुक्रम के नीचे डेटा पारित करती है। यह तुरंत स्पष्ट नहीं हो सकता है कि कौन सा कंड्पोनेंट का मालिक होना चाहिए। यदि आप इस अवधारणा के लिए नए हैं तो यह चुनौतीपूर्ण हो सकता है, लेकिन आप इन चरणों का पालन करके इसे समझ सकते हैं! -After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps! +आपके आवेदन में state के प्रत्येक टुकड़े के लिए: +1. *हर* घटक की पहचान करें जो उस state के आधार पर कुछ प्रस्तुत करता है। +2. उनके निकटतम सामान्य मूल घटक को खोजें- पदानुक्रम में उन सभी के ऊपर एक घटक। +3. तय करें कि state को कहाँ रहना चाहिए: -For each piece of state in your application: + 1. अक्सर, आप state को सीधे उनके सामान्य माता-पिता में डाल सकते हैं। + 2. आप state को उनके सामान्य माता-पिता के ऊपर कुछ घटक में भी डाल सकते हैं। + 3. यदि आपको कोई ऐसा घटक नहीं मिल रहा है, जहां state का स्वामित्व होना समझ में आता है, तो केवल state को धारण करने के लिए एक नया घटक बनाएं और इसे सामान्य मूल घटक के ऊपर पदानुक्रम में कहीं जोड़ें। -1. Identify *every* component that renders something based on that state. -2. Find their closest common parent component--a component above them all in the hierarchy. -3. Decide where the state should live: - 1. Often, you can put the state directly into their common parent. - 2. You can also put the state into some component above their common parent. - 3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component. +पिछले चरण में, आपको इस एप्लिकेशन में दो state मिले: खोज इनपुट टेक्स्ट, और चेकबॉक्स का मान। इस उदाहरण में, वे हमेशा एक साथ दिखाई देते हैं, इसलिए उन्हें state के एक टुकड़े के रूप में सोचना आसान है। -In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it is easier to think of them as a single piece of state. +आइए अब इस state के लिए अपनी रणनीति पर चलते हैं: -Now let's run through our strategy for this state: +1. state का उपयोग करने वाले घटकों की पहचान करें: + - `ProductTable` उस स्थिति (खोज टेक्स्ट और चेकबॉक्स मान) के आधार पर उत्पाद सूची को फ़िल्टर करने की आवश्यकता है। + - `SearchBar` उस स्थिति को प्रदर्शित करने की आवश्यकता है (खोज पाठ और चेकबॉक्स मान)। +2. उनके सामान्य पैरेंट का पता लगाएं: पहला पैरेंट कंपोनेंट दोनों कंपोनेंट शेयर करते हैं `FilterableProductTable।` -1. **Identify components that use state:** - * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). - * `SearchBar` needs to display that state (search text and checkbox value). -1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. -2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. +3. तय करें कि state कहाँ रहता है : हम फ़िल्टर टेक्स्ट और चेक किए गए state मानों को में रखेंगे `FilterableProductTable।` -So the state values will live in `FilterableProductTable`. +तो state के मूल्यों में रहेंगे `FilterableProductTable।` -Add state to the component with the [`useState()` Hook](/reference/usestate). Hooks let you "hook into" a component's [render cycle](/learn/render-and-commit). Add two state variables at the top of `FilterableProductTable` and specify the initial state of your application: +[`useState()` Hook](/reference/usestate) के साथ घटक में state जोड़ें । हुक आपको एक घटक के [रेंडर चक्र](/learn/render-and-commit) में "हुक इन" करने देता है । के शीर्ष पर दो state चर जोड़ें FilterableProductTableऔर अपने आवेदन की प्रारंभिक स्थिति निर्दिष्ट करें: ```js function FilterableProductTable({ products }) { const [filterText, setFilterText] = useState(''); - const [inStockOnly, setInStockOnly] = useState(false); + const [inStockOnly, setInStockOnly] = useState(false); ``` -Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props: +फिर, पास `filterText` और `inStockOnly` को `ProductTable` और `SearchBar` प्रॉप्स के रूप में: ```js
- - + + inStockOnly={inStockOnly} + />
``` -You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update: +आप यह देखना शुरू कर सकते हैं कि आपका आवेदन कैसा व्यवहार करेगा। नीचे दिए गए सैंडबॉक्स कोड में `filterText` से आरंभिक मान संपादित करें । आपको खोज इनपुट टेक्स्ट और तालिका अपडेट दोनों दिखाई देंगे:`useState('')``useState('fruit')` ```jsx App.js -import { useState } from 'react'; +import {useState} from 'react'; -function FilterableProductTable({ products }) { +function FilterableProductTable({products}) { const [filterText, setFilterText] = useState(''); const [inStockOnly, setInStockOnly] = useState(false); @@ -309,7 +309,7 @@ function FilterableProductTable({ products }) { - @@ -317,7 +317,7 @@ function FilterableProductTable({ products }) { ); } -function ProductCategoryRow({ category }) { +function ProductCategoryRow({category}) { return ( @@ -327,7 +327,7 @@ function ProductCategoryRow({ category }) { ); } -function ProductRow({ product }) { +function ProductRow({product}) { const name = product.stocked ? product.name : {product.name} @@ -418,7 +418,7 @@ export default function App() { ```css body { - padding: 5px + padding: 5px; } label { display: block; @@ -435,7 +435,7 @@ td { -In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value: +उपरोक्त सैंडबॉक्स में, `ProductTable` और तालिका, इनपुट और चेकबॉक्स को रेंडर करने के लिए और प्रॉप्स `SearchBar` पढ़ें । उदाहरण के लिए, यहां बताया गया है कि इनपुट मान कैसे पॉप्युलेट करता है:`filterTextinStockOnlySearchBar` ```js {1,6} function SearchBar({ filterText, inStockOnly }) { @@ -448,15 +448,16 @@ function SearchBar({ filterText, inStockOnly }) { ``` -Refer to the [Managing State](/learn/managing-state) to dive deeper into how React uses state and how you can organize your app with it. +रिएक्ट state का उपयोग कैसे करता है और आप इसके साथ अपने ऐप को कैसे व्यवस्थित कर सकते हैं, इस बारे में गहराई से जानने के लिए [प्रबंध state](/learn/managing-state)का संदर्भ लें । -## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} +## Step 5: उलटा डेटा प्रवाह जोड़ें {/*step-5-add-inverse-data-flow*/} -Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. +वर्तमान में आपका ऐप पदानुक्रम से नीचे की ओर बहने वाले प्रॉप्स और स्थिति के साथ सही ढंग से प्रस्तुत करता है। लेकिन उपयोगकर्ता इनपुट के अनुसार state को बदलने के लिए, आपको दूसरे तरीके से बहने वाले डेटा का समर्थन करने की आवश्यकता होगी: पदानुक्रम में गहरे रूप के घटकों को state में अद्यतन करने की आवश्यकता है `FilterableProductTable` । -React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing ``, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. +प्रतिक्रिया इस डेटा प्रवाह को स्पष्ट करती है, लेकिन इसे दो-तरफा डेटा बाध्यकारी की तुलना में थोड़ा और टाइपिंग की आवश्यकता होती है। यदि आप उपरोक्त उदाहरण में बॉक्स को टाइप या चेक करने का प्रयास करते हैं, तो आप देखेंगे कि प्रतिक्रिया आपके इनपुट को अनदेखा करती है। यह जानबूझकर है. `` लिखकर, आप `input` के `value` प्रोप को हमेशा `FilterableProductTable ` से पारित `filterText` स्थिति के बराबर होने के लिए सेट करते हैं।चूंकि `filterText` state कभी सेट नहीं होता है, इसलिए इनपुट कभी नहीं बदलता है। -You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`: + +आप इसे बनाना चाहते हैं ताकि जब भी उपयोगकर्ता फॉर्म इनपुट बदलता है, तो state उन परिवर्तनों को प्रतिबिंबित करने के लिए अद्यतन करता है। state के स्वामित्व में है `FilterableProductTable`, इसलिए केवल यह कॉल कर सकता है `setFilterText` और `setInStockOnly।` की स्थिति को `SearchBar` अपडेट करने देने के लिए `FilterableProductTable`, आपको इन कार्यों को नीचे पास करने की आवश्यकता है `SearchBar`: ```js {2,3,10,11} function FilterableProductTable({ products }) { @@ -472,8 +473,7 @@ function FilterableProductTable({ products }) { onInStockOnlyChange={setInStockOnly} /> ``` -Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them: - +`searchbar` के अंदर, आप `onchange` इवेंट हैंडलर जोड़ देंगे और उनसे मूल state सेट करेंगे: ```js {5} onFilterTextChange(e.target.value)} /> ``` -Now the application fully works! +अब आवेदन पूरी तरह से काम करता है! @@ -615,7 +615,7 @@ export default function App() { ```css body { - padding: 5px + padding: 5px; } label { display: block; @@ -632,8 +632,8 @@ td { -You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section. +आप घटनाओं को संभालने और state को अद्यतन करने के बारे में सब कुछ सीख सकते हैं [अंतःक्रियाशीलता जोड़ना](/learn/adding-interactivity) अनुभाग. -## Where to go from here {/*where-to-go-from-here*/} +## यहाँ से कहाँ जाएं {/*where-to-go-from-here*/} {/*where-to-go-from-here-where-to-go-from-here*/} -This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial. +रिएक्ट के साथ घटकों और अनुप्रयोगों के निर्माण के बारे में सोचने के लिए यह एक बहुत ही संक्षिप्त परिचय था। आप इस ट्यूटोरियल में [एक प्रतिक्रिया परियोजना शुरू करें](/learn/installation) या [सभी वाक्यविन्यास पर गहराई से गोता लगाएँ](/learn/describing-the-ui) इसमें उपयोग किया जाता है ट्यूटोरियल.