From 078e2d0e0ca4904e1ca0346a84b72be0195d40da Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Thu, 21 Nov 2019 12:33:40 +0100 Subject: [PATCH 01/18] Hindi translation for hooks-overview --- .../blog/2019-10-22-react-release-channels.md | 14 +-- content/docs/hooks-overview.md | 109 +++++++++--------- content/docs/release-channels.md | 12 +- 3 files changed, 67 insertions(+), 68 deletions(-) diff --git a/content/blog/2019-10-22-react-release-channels.md b/content/blog/2019-10-22-react-release-channels.md index f841c5abe..ac3245ea1 100644 --- a/content/blog/2019-10-22-react-release-channels.md +++ b/content/blog/2019-10-22-react-release-channels.md @@ -13,7 +13,7 @@ Because the source of truth for React is our [public GitHub repository](https:// We would like to make it even easier for developers to test prerelease builds of React, so we're formalizing our process with three separate release channels. -## Release Channels +## Release Channels {#release-channels} > The information in this post is also available on our [Release Channels](/docs/release-channels.html) page. We will update that document whenever there are changes to our release process. @@ -29,7 +29,7 @@ All releases are published to npm, but only Latest uses [semantic versioning](/d By publishing prereleases to the same registry that we use for stable releases, we are able to take advantage of the many tools that support the npm workflow, like [unpkg](https://unpkg.com) and [CodeSandbox](https://codesandbox.io). -### Latest Channel +### Latest Channel {#latest-channel} Latest is the channel used for stable React releases. It corresponds to the `latest` tag on npm. It is the recommended channel for all React apps that are shipped to real users. @@ -37,7 +37,7 @@ Latest is the channel used for stable React releases. It corresponds to the `lat You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme. Learn more about our commitment to stability and incremental migration in our [versioning policy](/docs/faq-versioning.html). -### Next Channel +### Next Channel {#next-channel} The Next channel is a prerelease channel that tracks the master branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently. @@ -47,7 +47,7 @@ The degree of change between the most recent Next release and the most recent La Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-1022ee0ec`. -#### Using the Next Channel for Integration Testing +#### Using the Next Channel for Integration Testing {#using-the-next-channel-for-integration-testing} The Next channel is designed to support integration testing between React and other projects. @@ -73,7 +73,7 @@ If you're the author of a third party React framework, library, developer tool, A project that uses this workflow is Next.js. (No pun intended! Seriously!) You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. -### Experimental Channel +### Experimental Channel {#experimental-channel} Like Next, the Experimental channel is a prerelease channel that tracks the master branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release. @@ -83,7 +83,7 @@ Experimental releases may be significantly different than releases to Next and L Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-experimental-1022ee0ec`. -#### What Goes Into an Experimental Release? +#### What Goes Into an Experimental Release? {#what-goes-into-an-experimental-release} Experimental features are ones that are not ready to be released to the wider public, and may change drastically before they are finalized. Some experiments may never be finalized -- the reason we have experiments is to test the viability of proposed changes. @@ -91,7 +91,7 @@ For example, if the Experimental channel had existed when we announced Hooks, we You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Next. **We do not guarantee any stability between Experimental releases.** -#### How Can I Learn More About Experimental Features? +#### How Can I Learn More About Experimental Features? {#how-can-i-learn-more-about-experimental-features} Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Stable. diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index df958dc6d..1c2440fd7 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -1,24 +1,23 @@ --- id: hooks-overview -title: Hooks at a Glance +title: एक नज़र में Hooks permalink: docs/hooks-overview.html next: hooks-state.html prev: hooks-intro.html --- +React 16.8 में *Hooks* एक नया अतिरिक्त है। वे आपको class लिखने के बिना state और अन्य React प्रतिक्रिया सुविधाओं का उपयोग करने देते हैं। -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +Hooks [बैकवर्ड-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है।. यह पृष्ठ अनुभवी React उपयोगकर्ताओं के लिए Hooks का अवलोकन प्रदान करता है। यह एक तेज अवलोकन है। यदि आप भ्रमित हो जाते हैं, तो इस तरह पीले बॉक्स की तलाश करे: -Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this: - ->Detailed Explanation +>विस्तृत विवरण > ->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React. +>यह जानने के लिए [प्रेरणा](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैं। -**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations. +**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता है.** वे विस्तृत स्पष्टीकरण से जुड़ते हैं. ## 📌 State Hook {#state-hook} -This example renders a counter. When you click the button, it increments the value: +यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते हैं, तो यह मूल्य बढ़ाता है। ```js{1,4,5} import React, { useState } from 'react'; @@ -38,13 +37,13 @@ function Example() { } ``` -Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the *current* state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It's similar to `this.setState` in a class, except it doesn't merge the old and new state together. (We'll show an example comparing `useState` to `this.state` in [Using the State Hook](/docs/hooks-state.html).) +यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक जोड़ी देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैंडलर या कहीं और से कॉल कर सकते हैं। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook का उपयोग करना](/docs/hooks-state.html) में एक उदाहरण दिखाते हैं जिसमे `useState` की `this.state` से तुलना की गयी है। -The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render. +`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि यह हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। -#### Declaring multiple state variables {#declaring-multiple-state-variables} +#### कई state वेरिएबल्स को घोषित करना। {#declaring-multiple-state-variables} -You can use the State Hook more than once in a single component: +आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते हैं: ```js function ExampleWithManyStates() { @@ -56,25 +55,25 @@ function ExampleWithManyStates() { } ``` -The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later. +[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं हैं। इसके बजाय, React मानता है कि यदि आप कई बार `यूजस्टैट` कॉल करते हैं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैं। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। -#### But what is a Hook? {#but-what-is-a-hook} +#### लेकिन hook है क्या? {#but-what-is-a-hook} -Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.) +'Hooks' ऐसे फंक्शन हैं जो आपको फ़ंक्शन कॉम्पोनेंट्स से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैं। 'Hooks' क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कॉम्पोनेंट्स को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कॉम्पोनेंट्स में Hooks का उपयोग शुरू कर सकते हैं।) -React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first. +React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कॉम्पोनेंट्स के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैं। हम बने बनाये हुक को पहले देखते है। ->Detailed Explanation +>विस्तृत विवरण > ->You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html). +>आप समर्पित पृष्ठ पर state hook के बारे में अधिक जान सकते हैं। [State Hook का उपयोग करना](/docs/hooks-state.html). ## ⚡️ Effect Hook {#effect-hook} -You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering. +आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कॉम्पोनेंट्स से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैं क्योंकि वे अन्य कॉम्पोनेंट्स को प्रभावित कर सकते हैं और रेंडरिंग के दौरान नहीं किये जा सकते। -The Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API. (We'll show examples comparing `useEffect` to these methods in [Using the Effect Hook](/docs/hooks-effect.html).) +Effect Hook, `useEffect`, एक फ़ंक्शन कॉम्पोनेंट्स से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`,` componentDidUpdate`, और `componentWillUnmount`` React classes में करते है , लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [State Hook का उपयोग करना](/docs/hooks-effect.html)।) -For example, this component sets the document title after React updates the DOM: +उदाहरण के लिए, DOM को React के अपडेट के बाद यह कॉम्पोनेंट डॉक्यूमेंट का शीर्षक सेट करता है: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -99,9 +98,9 @@ function Example() { } ``` -When you call `useEffect`, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render -- *including* the first render. (We'll talk more about how this compares to class lifecycles in [Using the Effect Hook](/docs/hooks-effect.html).) +जब आप `useEffect` कॉल करते हैं, तो आप DOM को परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कॉम्पोनेंट्स के अंदर Effects की घोषणा की जाती है ताकि उनके पास इसकी props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर * सहित * (हम इस बारे में अधिक बात करेंगे कि यह किस प्रकार class lifecycles की तुलना मैं [Effect hook का उपयोग करना](/docs/hooks-effect.html) कैसे काम करता है।) -Effects may also optionally specify how to "clean up" after them by returning a function. For example, this component uses an effect to subscribe to a friend's online status, and cleans up by unsubscribing from it: +Effects वैकल्पिक रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कॉम्पोनेंट किसी मित्र की ऑनलाइन स्थिति की सब्सक्रिप्शन के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके clean करता है: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +127,9 @@ function FriendStatus(props) { } ``` -In this example, React would unsubscribe from our `ChatAPI` when the component unmounts, as well as before re-running the effect due to a subsequent render. (If you want, there's a way to [tell React to skip re-subscribing](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) if the `props.friend.id` we passed to `ChatAPI` didn’t change.) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कॉम्पोनेंट अनमाउंट हो जाता है, साथ ही बाद में रेंडर करने के कारण effect को फिर से चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को री-सब्सक्राइब छोड़ना बताएं।](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर 'props.friend.id' जो हमने `ChatAPI` को पास किया है,नहीं बदलता तो।) -Just like with `useState`, you can use more than a single effect in a component: +`useState` की तराह, आप एक कॉम्पोनेंट में एक से अधिक effect का उपयोग कर सकते हैं: ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,32 +152,32 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods. +Hooks आपको एक कॉम्पोनेंट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय lifecycle के तरीकों के आधार पर विभाजन को मजबूर करने के। ->Detailed Explanation +>विस्तृत विवरण > ->You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html). +>आप एक समर्पित पृष्ठ पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html). -## ✌️ Rules of Hooks {#rules-of-hooks} +## ✌️ Hook के नियम {#rules-of-hooks} -Hooks are JavaScript functions, but they impose two additional rules: +Hooks JavaScript फंक्शन हैं, लेकिन वे दो अतिरिक्त नियम लागू करते हैं: -* Only call Hooks **at the top level**. Don’t call Hooks inside loops, conditions, or nested functions. -* Only call Hooks **from React function components**. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks -- your own custom Hooks. We'll learn about them in a moment.) +* Hooks **सबसे उप्पर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। +* Hooks सिर्फ ** React फ़ंक्शन कॉम्पोनेंट ** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से हुक Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) -We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well. +हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैं जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते हैं कि ये नियम पहले सीमित या भ्रमित हो सकते हैं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैं। ->Detailed Explanation +>विस्तृत विवरण > ->You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html). +>आप एक समर्पित पृष्ठ पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html). -## 💡 Building Your Own Hooks {#building-your-own-hooks} +## 💡 अपनी खुद की Hooks का निर्माण {#building-your-own-hooks} -Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree. +कभी-कभी, हम कॉम्पोनेंट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [हाई आर्डर कॉम्पोनेंट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। कस्टम Hooks आपको ऐसा करने देते हैं, लेकिन आपके tree में अधिक कॉम्पोनेंट को जोड़े बिना। -Earlier on this page, we introduced a `FriendStatus` component that calls the `useState` and `useEffect` Hooks to subscribe to a friend's online status. Let's say we also want to reuse this subscription logic in another component. +इस पृष्ठ मैं पहले, हमने एक 'FriendStatus' कॉम्पोनेंट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और` useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कॉम्पोनेंट में पुन: उपयोग करना चाहते हैं। -First, we'll extract this logic into a custom Hook called `useFriendStatus`: +सबसे पहले, हम इस लॉजिक को 'useFriendStatus' नामक एक कस्टम Hook में निकालेंगे: ```js{3} import React, { useState, useEffect } from 'react'; @@ -201,9 +200,9 @@ function useFriendStatus(friendID) { } ``` -It takes `friendID` as an argument, and returns whether our friend is online. +यह एक तर्क के रूप में `friendID` लेता है, और लौटता है कि क्या हमारा दोस्त ऑनलाइन है। यह एक आर्गुमेंट के रूप में `friendID` लेता है, और लौटता है कि क्या हमारा दोस्त ऑनलाइन है। -Now we can use it from both components: +अब हम इसे दोनों कॉम्पोनेंट्स का उपयोग कर सकते हैं: ```js{2} @@ -229,19 +228,19 @@ function FriendListItem(props) { } ``` -The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component. +इन कॉम्पोनेंट्स की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कॉम्पोनेंट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। -Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks. +कस्टम Hook एक विशेषता की तुलना में एक कन्वेंशन अधिक हैं। यदि किसी फ़ंक्शन का नाम "` use `" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। `UseSomething` नामकरण कन्वेंशन हमारे लिंटर प्लगइन, जो Hook का उपयोग करता है, कोड में बग ढूंढने में मदद करता है। -You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. We are excited to see what custom Hooks the React community will come up with. +आप कस्टम Hook लिख सकते हैं जो फॉर्म हैंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैं। हम यह देखने के लिए उत्साहित हैं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। ->Detailed Explanation +>विस्तृत विवरण > ->You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html). +>आप एक समर्पित पृष्ठ पर कस्टम Hook के बारे में अधिक जान सकते हैं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). -## 🔌 Other Hooks {#other-hooks} +## 🔌 अन्य Hooks {#other-hooks} -There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting: +कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context की सदस्यता लेने देता है: ```js{2,3} function Example() { @@ -251,7 +250,7 @@ function Example() { } ``` -And [`useReducer`](/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer: +और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कॉम्पोनेंट्स के local state का प्रबंधन करने देता है: ```js{2} function Todos() { @@ -259,14 +258,14 @@ function Todos() { // ... ``` ->Detailed Explanation +>विस्तृत विवरण > ->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html). +>आप एक समर्पित पृष्ठ पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html). -## Next Steps {#next-steps} +## अगला कदम {#next-steps} -Phew, that was fast! If some things didn't quite make sense or you'd like to learn more in detail, you can read the next pages, starting with the [State Hook](/docs/hooks-state.html) documentation. +अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) प्रलेखन के साथ शुरू करते हुए। -You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html). +आप इन पृष्ठों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html). -Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps. +अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- बिना हमारे एप्लिकेशन को फिरसे लिखे। diff --git a/content/docs/release-channels.md b/content/docs/release-channels.md index e6e814f41..579376d37 100644 --- a/content/docs/release-channels.md +++ b/content/docs/release-channels.md @@ -22,7 +22,7 @@ All releases are published to npm, but only Latest uses [semantic versioning](/d By publishing prereleases to the same registry that we use for stable releases, we are able to take advantage of the many tools that support the npm workflow, like [unpkg](https://unpkg.com) and [CodeSandbox](https://codesandbox.io). -### Latest Channel +### Latest Channel {#latest-channel} Latest is the channel used for stable React releases. It corresponds to the `latest` tag on npm. It is the recommended channel for all React apps that are shipped to real users. @@ -30,7 +30,7 @@ Latest is the channel used for stable React releases. It corresponds to the `lat You can expect updates to Latest to be extremely stable. Versions follow the semantic versioning scheme. Learn more about our commitment to stability and incremental migration in our [versioning policy](/docs/faq-versioning.html). -### Next Channel +### Next Channel {#next-channel} The Next channel is a prerelease channel that tracks the master branch of the React repository. We use prereleases in the Next channel as release candidates for the Latest channel. You can think of Next as a superset of Latest that is updated more frequently. @@ -40,7 +40,7 @@ The degree of change between the most recent Next release and the most recent La Releases in Next are published with the `next` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-1022ee0ec`. -#### Using the Next Channel for Integration Testing +#### Using the Next Channel for Integration Testing {#using-the-next-channel-for-integration-testing} The Next channel is designed to support integration testing between React and other projects. @@ -66,7 +66,7 @@ If you're the author of a third party React framework, library, developer tool, A project that uses this workflow is Next.js. (No pun intended! Seriously!) You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. -### Experimental Channel +### Experimental Channel {#experimental-channel} Like Next, the Experimental channel is a prerelease channel that tracks the master branch of the React repository. Unlike Next, Experimental releases include additional features and APIs that are not ready for wider release. @@ -76,7 +76,7 @@ Experimental releases may be significantly different than releases to Next and L Releases in Experimental are published with the `experimental` tag on npm. Versions are generated from a hash of the build's contents, e.g. `0.0.0-experimental-1022ee0ec`. -#### What Goes Into an Experimental Release? +#### What Goes Into an Experimental Release? {#what-goes-into-an-experimental-release} Experimental features are ones that are not ready to be released to the wider public, and may change drastically before they are finalized. Some experiments may never be finalized -- the reason we have experiments is to test the viability of proposed changes. @@ -84,7 +84,7 @@ For example, if the Experimental channel had existed when we announced Hooks, we You may find it valuable to run integration tests against Experimental. This is up to you. However, be advised that Experimental is even less stable than Next. **We do not guarantee any stability between Experimental releases.** -#### How Can I Learn More About Experimental Features? +#### How Can I Learn More About Experimental Features? {#how-can-i-learn-more-about-experimental-features} Experimental features may or may not be documented. Usually, experiments aren't documented until they are close to shipping in Next or Stable. From 1456ca5de667b59e5bbbdd319fe651b2cf318271 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Mon, 25 Nov 2019 11:44:10 +0100 Subject: [PATCH 02/18] Added changes mentioned in the review --- content/docs/hooks-overview.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 1c2440fd7..805e7d4fc 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -5,19 +5,20 @@ permalink: docs/hooks-overview.html next: hooks-state.html prev: hooks-intro.html --- -React 16.8 में *Hooks* एक नया अतिरिक्त है। वे आपको class लिखने के बिना state और अन्य React प्रतिक्रिया सुविधाओं का उपयोग करने देते हैं। -Hooks [बैकवर्ड-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है।. यह पृष्ठ अनुभवी React उपयोगकर्ताओं के लिए Hooks का अवलोकन प्रदान करता है। यह एक तेज अवलोकन है। यदि आप भ्रमित हो जाते हैं, तो इस तरह पीले बॉक्स की तलाश करे: +React 16.8 में *Hooks* एक नया फीचर ऐड हुआ है। वे आपको class लिखे बिना state और अन्य React सुविधाओं का उपयोग करने देता हैं। + +Hooks [बैकवर्ड-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता है। यह एक तेज ओवरव्यू है। यदि आप उलझन में पड़ जाते हैं, तो इस तरह पीले बॉक्स की तलाश करे: >विस्तृत विवरण > ->यह जानने के लिए [प्रेरणा](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैं। +>यह जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैं। -**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता है.** वे विस्तृत स्पष्टीकरण से जुड़ते हैं. +**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता है।** वे विस्तृत स्पष्टीकरण से जुड़ते हैं। ## 📌 State Hook {#state-hook} -यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते हैं, तो यह मूल्य बढ़ाता है। +यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते हैं, तो यह वैल्यू को बढ़ाता है। ```js{1,4,5} import React, { useState } from 'react'; @@ -65,7 +66,7 @@ React `useState` जैसे कुछ बने बनाये Hooks प् >विस्तृत विवरण > ->आप समर्पित पृष्ठ पर state hook के बारे में अधिक जान सकते हैं। [State Hook का उपयोग करना](/docs/hooks-state.html). +>आप समर्पित पृष्ठ पर state hook के बारे में अधिक जान सकते हैं। [State Hook का उपयोग करना](/docs/hooks-state.html) ## ⚡️ Effect Hook {#effect-hook} @@ -156,7 +157,7 @@ Hooks आपको एक कॉम्पोनेंट में साइड >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html). +>आप एक समर्पित पृष्ठ पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) ## ✌️ Hook के नियम {#rules-of-hooks} @@ -169,7 +170,7 @@ Hooks JavaScript फंक्शन हैं, लेकिन वे दो अ >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html). +>आप एक समर्पित पृष्ठ पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) ## 💡 अपनी खुद की Hooks का निर्माण {#building-your-own-hooks} @@ -260,12 +261,12 @@ function Todos() { >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html). +>आप एक समर्पित पृष्ठ पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) ## अगला कदम {#next-steps} अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) प्रलेखन के साथ शुरू करते हुए। -आप इन पृष्ठों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html). +आप इन पृष्ठों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- बिना हमारे एप्लिकेशन को फिरसे लिखे। From c321d220598aaf91641df75e572d8ffde9985c82 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Tue, 26 Nov 2019 11:48:43 +0100 Subject: [PATCH 03/18] Added changes mentioned in the review --- content/docs/hooks-overview.md | 50 +++++++++++++++++----------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 805e7d4fc..29807ebb0 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -38,9 +38,9 @@ function Example() { } ``` -यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक जोड़ी देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैंडलर या कहीं और से कॉल कर सकते हैं। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook का उपयोग करना](/docs/hooks-state.html) में एक उदाहरण दिखाते हैं जिसमे `useState` की `this.state` से तुलना की गयी है। +यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक पेअर देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैंडलर या कहीं और से कॉल कर सकते हैं। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है। -`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि यह हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। +`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि इसके पास हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। #### कई state वेरिएबल्स को घोषित करना। {#declaring-multiple-state-variables} @@ -56,25 +56,25 @@ function ExampleWithManyStates() { } ``` -[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं हैं। इसके बजाय, React मानता है कि यदि आप कई बार `यूजस्टैट` कॉल करते हैं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैं। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। +[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं हैं। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते हैं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैं। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। #### लेकिन hook है क्या? {#but-what-is-a-hook} -'Hooks' ऐसे फंक्शन हैं जो आपको फ़ंक्शन कॉम्पोनेंट्स से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैं। 'Hooks' क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कॉम्पोनेंट्स को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कॉम्पोनेंट्स में Hooks का उपयोग शुरू कर सकते हैं।) +Hooks ऐसे फंक्शन हैं जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैं। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते हैं।) -React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कॉम्पोनेंट्स के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैं। हम बने बनाये हुक को पहले देखते है। +React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैं। हम बने बनाये Hooks को पहले देखते है। >विस्तृत विवरण > ->आप समर्पित पृष्ठ पर state hook के बारे में अधिक जान सकते हैं। [State Hook का उपयोग करना](/docs/hooks-state.html) +>आप समर्पित पेज पर state hook के बारे में अधिक जान सकते हैं: [State Hook का उपयोग करना](/docs/hooks-state.html) ## ⚡️ Effect Hook {#effect-hook} -आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कॉम्पोनेंट्स से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैं क्योंकि वे अन्य कॉम्पोनेंट्स को प्रभावित कर सकते हैं और रेंडरिंग के दौरान नहीं किये जा सकते। +आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैं क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते हैं और रेंडरिंग के दौरान नहीं किये जा सकते। -Effect Hook, `useEffect`, एक फ़ंक्शन कॉम्पोनेंट्स से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`,` componentDidUpdate`, और `componentWillUnmount`` React classes में करते है , लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [State Hook का उपयोग करना](/docs/hooks-effect.html)।) +Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) -उदाहरण के लिए, DOM को React के अपडेट के बाद यह कॉम्पोनेंट डॉक्यूमेंट का शीर्षक सेट करता है: +उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता है: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -99,9 +99,9 @@ function Example() { } ``` -जब आप `useEffect` कॉल करते हैं, तो आप DOM को परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कॉम्पोनेंट्स के अंदर Effects की घोषणा की जाती है ताकि उनके पास इसकी props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर * सहित * (हम इस बारे में अधिक बात करेंगे कि यह किस प्रकार class lifecycles की तुलना मैं [Effect hook का उपयोग करना](/docs/hooks-effect.html) कैसे काम करता है।) +जब आप `useEffect` कॉल करते हैं, तो आप DOM को परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर Effects की घोषणा की जाती है ताकि उनके पास इसकी props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर * सहित * (हम इस बारे में अधिक बात करेंगे कि यह किस प्रकार class lifecycles की तुलना मैं [Effect hook का उपयोग करते समय](/docs/hooks-effect.html) कैसे काम करता है।) -Effects वैकल्पिक रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कॉम्पोनेंट किसी मित्र की ऑनलाइन स्थिति की सब्सक्रिप्शन के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके clean करता है: +Effects वैकल्पिक रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्थिति की सब्सक्रिप्शन के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके clean करता है: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +128,9 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कॉम्पोनेंट अनमाउंट हो जाता है, साथ ही बाद में रेंडर करने के कारण effect को फिर से चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को री-सब्सक्राइब छोड़ना बताएं।](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर 'props.friend.id' जो हमने `ChatAPI` को पास किया है,नहीं बदलता तो।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही बाद में रेंडर करने के कारण effect को फिर से चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को री-सब्सक्राइब छोड़ना बताएं।](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर 'props.friend.id' जो हमने `ChatAPI` को पास किया है,नहीं बदलता तो।) -`useState` की तराह, आप एक कॉम्पोनेंट में एक से अधिक effect का उपयोग कर सकते हैं: +`useState` की तराह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,30 +153,30 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks आपको एक कॉम्पोनेंट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय lifecycle के तरीकों के आधार पर विभाजन को मजबूर करने के। +Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय lifecycle के तरीकों के आधार पर विभाजन को मजबूर करने के। >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) +>आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) ## ✌️ Hook के नियम {#rules-of-hooks} Hooks JavaScript फंक्शन हैं, लेकिन वे दो अतिरिक्त नियम लागू करते हैं: * Hooks **सबसे उप्पर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। -* Hooks सिर्फ ** React फ़ंक्शन कॉम्पोनेंट ** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से हुक Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) +* Hooks सिर्फ ** React फ़ंक्शन कौम्पोनॅन्ट ** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैं जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते हैं कि ये नियम पहले सीमित या भ्रमित हो सकते हैं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैं। >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) +>आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) ## 💡 अपनी खुद की Hooks का निर्माण {#building-your-own-hooks} -कभी-कभी, हम कॉम्पोनेंट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [हाई आर्डर कॉम्पोनेंट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। कस्टम Hooks आपको ऐसा करने देते हैं, लेकिन आपके tree में अधिक कॉम्पोनेंट को जोड़े बिना। +कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [हाई आर्डर कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। कस्टम Hooks आपको ऐसा करने देते हैं, लेकिन आपके tree में अधिक कौम्पोनॅन्ट को जोड़े बिना। -इस पृष्ठ मैं पहले, हमने एक 'FriendStatus' कॉम्पोनेंट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और` useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कॉम्पोनेंट में पुन: उपयोग करना चाहते हैं। +इस पेज मैं पहले, हमने एक 'FriendStatus' कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और` useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। सबसे पहले, हम इस लॉजिक को 'useFriendStatus' नामक एक कस्टम Hook में निकालेंगे: @@ -203,7 +203,7 @@ function useFriendStatus(friendID) { यह एक तर्क के रूप में `friendID` लेता है, और लौटता है कि क्या हमारा दोस्त ऑनलाइन है। यह एक आर्गुमेंट के रूप में `friendID` लेता है, और लौटता है कि क्या हमारा दोस्त ऑनलाइन है। -अब हम इसे दोनों कॉम्पोनेंट्स का उपयोग कर सकते हैं: +अब हम इसे दोनों कौम्पोनॅन्टस का उपयोग कर सकते हैं: ```js{2} @@ -229,7 +229,7 @@ function FriendListItem(props) { } ``` -इन कॉम्पोनेंट्स की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कॉम्पोनेंट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। +इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। कस्टम Hook एक विशेषता की तुलना में एक कन्वेंशन अधिक हैं। यदि किसी फ़ंक्शन का नाम "` use `" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। `UseSomething` नामकरण कन्वेंशन हमारे लिंटर प्लगइन, जो Hook का उपयोग करता है, कोड में बग ढूंढने में मदद करता है। @@ -237,7 +237,7 @@ function FriendListItem(props) { >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर कस्टम Hook के बारे में अधिक जान सकते हैं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). +>आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते हैं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). ## 🔌 अन्य Hooks {#other-hooks} @@ -251,7 +251,7 @@ function Example() { } ``` -और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कॉम्पोनेंट्स के local state का प्रबंधन करने देता है: +और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के local state का प्रबंधन करने देता है: ```js{2} function Todos() { @@ -261,12 +261,12 @@ function Todos() { >विस्तृत विवरण > ->आप एक समर्पित पृष्ठ पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) +>आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) ## अगला कदम {#next-steps} अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) प्रलेखन के साथ शुरू करते हुए। -आप इन पृष्ठों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) +आप इन पेजों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- बिना हमारे एप्लिकेशन को फिरसे लिखे। From 0d2c53ad8a0f9330e4c6b94bc2baaa25e42adb5f Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Sat, 30 Nov 2019 22:56:24 +0100 Subject: [PATCH 04/18] changes in review --- content/docs/hooks-overview.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 29807ebb0..2796a8221 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -99,9 +99,9 @@ function Example() { } ``` -जब आप `useEffect` कॉल करते हैं, तो आप DOM को परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर Effects की घोषणा की जाती है ताकि उनके पास इसकी props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर * सहित * (हम इस बारे में अधिक बात करेंगे कि यह किस प्रकार class lifecycles की तुलना मैं [Effect hook का उपयोग करते समय](/docs/hooks-effect.html) कैसे काम करता है।) +जब आप `useEffect` कॉल करते हैं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर Effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) -Effects वैकल्पिक रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्थिति की सब्सक्रिप्शन के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके clean करता है: +Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +128,9 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही बाद में रेंडर करने के कारण effect को फिर से चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को री-सब्सक्राइब छोड़ना बताएं।](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर 'props.friend.id' जो हमने `ChatAPI` को पास किया है,नहीं बदलता तो।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर के वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को री-सब्सक्राइब छोड़ना बताएं।](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) -`useState` की तराह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: +`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: ```js{3,8} function FriendStatusWithCounter(props) { From c98731bc1f8bfebbb72f9f1cb4ed7a84452bda4b Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Sun, 1 Dec 2019 13:44:17 +0100 Subject: [PATCH 05/18] changes in review --- content/docs/hooks-overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 2796a8221..86cfe49aa 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -99,7 +99,7 @@ function Example() { } ``` -जब आप `useEffect` कॉल करते हैं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर Effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) +जब आप `useEffect` कॉल करते हैं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: @@ -128,7 +128,7 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर के वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को री-सब्सक्राइब छोड़ना बताएं।](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को बताये की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) `useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: From 7e1a585e096b8ec61964c746dfc30ac7a30c37f2 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Tue, 3 Dec 2019 20:53:26 +0100 Subject: [PATCH 06/18] changes in review --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 86cfe49aa..f419288a9 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -128,7 +128,7 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को बताये की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) `useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: From 6e07364264f7dc54882a5500e992b110b27d46f0 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Tue, 10 Dec 2019 00:11:18 +0100 Subject: [PATCH 07/18] changes in review --- content/docs/hooks-overview.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index f419288a9..831e11f4a 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -153,7 +153,7 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय lifecycle के तरीकों के आधार पर विभाजन को मजबूर करने के। +Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। >विस्तृत विवरण > @@ -163,8 +163,8 @@ Hooks आपको एक कौम्पोनॅन्ट में साइ Hooks JavaScript फंक्शन हैं, लेकिन वे दो अतिरिक्त नियम लागू करते हैं: -* Hooks **सबसे उप्पर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। -* Hooks सिर्फ ** React फ़ंक्शन कौम्पोनॅन्ट ** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) +* Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। +* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैं जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते हैं कि ये नियम पहले सीमित या भ्रमित हो सकते हैं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैं। @@ -172,13 +172,13 @@ Hooks JavaScript फंक्शन हैं, लेकिन वे दो अ > >आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) -## 💡 अपनी खुद की Hooks का निर्माण {#building-your-own-hooks} +## 💡 अपने खुद के Hooks का निर्माण {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [हाई आर्डर कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। कस्टम Hooks आपको ऐसा करने देते हैं, लेकिन आपके tree में अधिक कौम्पोनॅन्ट को जोड़े बिना। +कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को जोड़े बिना ऐसा करने देते हैं। -इस पेज मैं पहले, हमने एक 'FriendStatus' कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और` useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। +इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। -सबसे पहले, हम इस लॉजिक को 'useFriendStatus' नामक एक कस्टम Hook में निकालेंगे: +सबसे पहले, हम इस लॉजिक को `useFriendStatus` नामक एक कस्टम Hook में निकालेंगे: ```js{3} import React, { useState, useEffect } from 'react'; @@ -201,9 +201,9 @@ function useFriendStatus(friendID) { } ``` -यह एक तर्क के रूप में `friendID` लेता है, और लौटता है कि क्या हमारा दोस्त ऑनलाइन है। यह एक आर्गुमेंट के रूप में `friendID` लेता है, और लौटता है कि क्या हमारा दोस्त ऑनलाइन है। +यह एक आर्गुमेंट के रूप में `friendID` लेता है, और लोटाता है कि क्या हमारा दोस्त ऑनलाइन है। -अब हम इसे दोनों कौम्पोनॅन्टस का उपयोग कर सकते हैं: +अब हम इसे दोनों कौम्पोनॅन्टस मैं उपयोग कर सकते हैं: ```js{2} @@ -231,7 +231,7 @@ function FriendListItem(props) { इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। -कस्टम Hook एक विशेषता की तुलना में एक कन्वेंशन अधिक हैं। यदि किसी फ़ंक्शन का नाम "` use `" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। `UseSomething` नामकरण कन्वेंशन हमारे लिंटर प्लगइन, जो Hook का उपयोग करता है, कोड में बग ढूंढने में मदद करता है। +कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन हैं। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। आप कस्टम Hook लिख सकते हैं जो फॉर्म हैंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैं। हम यह देखने के लिए उत्साहित हैं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। @@ -241,7 +241,7 @@ function FriendListItem(props) { ## 🔌 अन्य Hooks {#other-hooks} -कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context की सदस्यता लेने देता है: +कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करनेे देता है: ```js{2,3} function Example() { @@ -251,7 +251,7 @@ function Example() { } ``` -और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के local state का प्रबंधन करने देता है: +और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state का प्रबंधन करने देता है: ```js{2} function Todos() { @@ -265,8 +265,8 @@ function Todos() { ## अगला कदम {#next-steps} -अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) प्रलेखन के साथ शुरू करते हुए। +अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। आप इन पेजों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) -अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- बिना हमारे एप्लिकेशन को फिरसे लिखे। +अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। From 8ec9574d688c98b6019ece7810bdb57c51872e92 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Tue, 10 Dec 2019 17:03:34 +0100 Subject: [PATCH 08/18] changes in review --- content/docs/hooks-overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 831e11f4a..b9de4ba22 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -174,7 +174,7 @@ Hooks JavaScript फंक्शन हैं, लेकिन वे दो अ ## 💡 अपने खुद के Hooks का निर्माण {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को जोड़े बिना ऐसा करने देते हैं। +कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते हैं। इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। @@ -203,7 +203,7 @@ function useFriendStatus(friendID) { यह एक आर्गुमेंट के रूप में `friendID` लेता है, और लोटाता है कि क्या हमारा दोस्त ऑनलाइन है। -अब हम इसे दोनों कौम्पोनॅन्टस मैं उपयोग कर सकते हैं: +अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैं: ```js{2} @@ -241,7 +241,7 @@ function FriendListItem(props) { ## 🔌 अन्य Hooks {#other-hooks} -कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करनेे देता है: +कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: ```js{2,3} function Example() { From b8a23d98c638b166ce45178314d51cca1fd990b2 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Thu, 12 Dec 2019 23:34:40 +0100 Subject: [PATCH 09/18] changes in review --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index b9de4ba22..563c01fda 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -201,7 +201,7 @@ function useFriendStatus(friendID) { } ``` -यह एक आर्गुमेंट के रूप में `friendID` लेता है, और लोटाता है कि क्या हमारा दोस्त ऑनलाइन है। +यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है। अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैं: From 49572f37714fd19bee6ca4631c0f7dee8bd7be7a Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Fri, 27 Dec 2019 16:10:47 +0100 Subject: [PATCH 10/18] Changes mentioned in review --- content/docs/hooks-overview.md | 80 +++++++++++++++++----------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 563c01fda..1645918b0 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -6,19 +6,19 @@ next: hooks-state.html prev: hooks-intro.html --- -React 16.8 में *Hooks* एक नया फीचर ऐड हुआ है। वे आपको class लिखे बिना state और अन्य React सुविधाओं का उपयोग करने देता हैं। +React 16.8 में *Hooks* नामक एक नया फीचर ऐड हुआ हैं। यह आपको class का इस्तेमाल बिना state और अन्य React विशेषताओं का उपयोग करने देता हैंं। -Hooks [बैकवर्ड-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता है। यह एक तेज ओवरव्यू है। यदि आप उलझन में पड़ जाते हैं, तो इस तरह पीले बॉक्स की तलाश करे: +Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) हैं। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता हैं। यह एक तेज ओवरव्यू हैं। यदि आप उलझन में पड़ जाते हैंं, तो निचे दिखाए गए पीले बॉक्स की तलाश करे: >विस्तृत विवरण > ->यह जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैं। +>यह जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैंं। -**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता है।** वे विस्तृत स्पष्टीकरण से जुड़ते हैं। +**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता हैं।** वे विस्तृत स्पष्टीकरण से जुड़ते हैंं। ## 📌 State Hook {#state-hook} -यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते हैं, तो यह वैल्यू को बढ़ाता है। +यह उदाहरण एक काउंटर को रेंडर करता हैं। जब आप बटन पर क्लिक करते हैंं, तो यह वैल्यू को बढ़ाता हैं। ```js{1,4,5} import React, { useState } from 'react'; @@ -38,13 +38,13 @@ function Example() { } ``` -यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक पेअर देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैंडलर या कहीं और से कॉल कर सकते हैं। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है। +यहाँ, `useState` एक *Hook* हैं (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते हैं। री-रेंडरर्स के बीच React इस state को संरक्षित करता हैं। `useState` एक पेअर देता हैं: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता हैं। आप इस फ़ंक्शन को किसी इवेंट हैंंडलर या कहीं और से कॉल कर सकते हैंं। यह एक class में `this.setState` के समान हैं, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी हैं। -`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि इसके पास हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। +`UseState` का एकमात्र पैरामीटर initial state हैं। ऊपर दिखाए हुए उदाहरण में, यह `0` हैं क्योंकि हमारा काउंटर शून्य से शुरू होता हैं। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं हैं -- हालाँकि इसके पास हो सकता हैं यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता हैं। #### कई state वेरिएबल्स को घोषित करना। {#declaring-multiple-state-variables} -आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते हैं: +आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते हैंं: ```js function ExampleWithManyStates() { @@ -56,25 +56,25 @@ function ExampleWithManyStates() { } ``` -[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं हैं। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते हैं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैं। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। +[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता हैं जो हमें `useState` को घोषित करके मिलते हैं। ये नाम `useState` एपीआई का हिस्सा नहीं हैंं। इसके बजाय, React मानता हैं कि यदि आप कई बार `useState` कॉल करते हैंं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैंं। हम वापस आएंगे कि यह क्यों काम करता हैं और यह बाद में कहाँ उपयोगी होता हैं। -#### लेकिन hook है क्या? {#but-what-is-a-hook} +#### लेकिन hook हैं क्या? {#but-what-is-a-hook} -Hooks ऐसे फंक्शन हैं जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैं। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते हैं।) +Hooks ऐसे फंक्शन हैंं जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैंं। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैंं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते हैंं।) -React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैं। हम बने बनाये Hooks को पहले देखते है। +React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता हैं। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैंं। हम बने बनाये Hooks को पहले देखते हैं। >विस्तृत विवरण > ->आप समर्पित पेज पर state hook के बारे में अधिक जान सकते हैं: [State Hook का उपयोग करना](/docs/hooks-state.html) +>आप समर्पित पेज पर state hook के बारे में अधिक जान सकते हैंं: [State Hook का उपयोग करना](/docs/hooks-state.html) ## ⚡️ Effect Hook {#effect-hook} -आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैं क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते हैं और रेंडरिंग के दौरान नहीं किये जा सकते। +आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ हैं। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैंं क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते हैंं और रेंडरिंग के दौरान नहीं किये जा सकते। -Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) +Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता हैं। यह उसी प्रकार में कार्य करता हैं जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते हैं, लेकिन यह एक ही API में एकीकृत हैं। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) -उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता है: +उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता हैं: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -99,9 +99,9 @@ function Example() { } ``` -जब आप `useEffect` कॉल करते हैं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) +जब आप `useEffect` कॉल करते हैंं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैंं। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता हैं ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता हैं -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता हैं।) -Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: +Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैंं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता हैं, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता हैं: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +128,9 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती हैं जब कौम्पोनॅन्ट अनमाउंट हो जाता हैं, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैंं, यहाँ एक तरीका हैं [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया हैं।) -`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: +`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैंं: ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,30 +153,30 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। +Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैंं जो pieces से संबंधित होते हैंं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। >विस्तृत विवरण > ->आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) +>आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते हैंं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) ## ✌️ Hook के नियम {#rules-of-hooks} -Hooks JavaScript फंक्शन हैं, लेकिन वे दो अतिरिक्त नियम लागू करते हैं: +Hooks JavaScript फंक्शन हैंं, लेकिन वे दो अतिरिक्त नियम लागू करते हैंं: * Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। -* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) +* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान हैं -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) -हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैं जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते हैं कि ये नियम पहले सीमित या भ्रमित हो सकते हैं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैं। +हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैंं जो इन नियमों को स्वचालित रूप से लागू कर देते हैं। हम समझते हैंं कि ये नियम पहले सीमित या भ्रमित हो सकते हैंं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैंं। >विस्तृत विवरण > ->आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) +>आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैंं: [Hooks के नियम](/docs/hooks-rules.html) ## 💡 अपने खुद के Hooks का निर्माण {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते हैं। +कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैंं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते हैंं। -इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। +इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया हैं, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता हैं। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैंं। सबसे पहले, हम इस लॉजिक को `useFriendStatus` नामक एक कस्टम Hook में निकालेंगे: @@ -201,9 +201,9 @@ function useFriendStatus(friendID) { } ``` -यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है। +यह एक आर्गुमेंट के रूप में `friendID` लेता हैं, और रिटर्न करता हैं कि क्या हमारा दोस्त ऑनलाइन हैं। -अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैं: +अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैंं: ```js{2} @@ -229,19 +229,19 @@ function FriendListItem(props) { } ``` -इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। +इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र हैं। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका हैं, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state हैं -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैंं। -कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन हैं। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। +कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन हैंं। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता हैं और इसे अन्य Hook कॉल करते हैं, तो हम कहते हैंं कि यह एक कस्टम Hook हैं। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता हैं। -आप कस्टम Hook लिख सकते हैं जो फॉर्म हैंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैं। हम यह देखने के लिए उत्साहित हैं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। +आप कस्टम Hook लिख सकते हैंं जो फॉर्म हैंंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैंं। हम यह देखने के लिए उत्साहित हैंं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। >विस्तृत विवरण > ->आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते हैं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). +>आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते हैंं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). ## 🔌 अन्य Hooks {#other-hooks} -कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: +कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैंं जो आपको उपयोगी लग सकते हैंं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता हैं: ```js{2,3} function Example() { @@ -251,7 +251,7 @@ function Example() { } ``` -और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state का प्रबंधन करने देता है: +और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state का प्रबंधन करने देता हैं: ```js{2} function Todos() { @@ -261,12 +261,12 @@ function Todos() { >विस्तृत विवरण > ->आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) +>आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैंं: [Hooks API संदर्भ](/docs/hooks-reference.html) ## अगला कदम {#next-steps} -अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। +अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैंं, आप अगले पेज पढ़ सकते हैंं, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। -आप इन पेजों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) +आप इन पेजों को भी देख सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) -अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। +अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता हैं कि *हम* Hooks क्यों बना रहे हैंं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। From 35614115a05854b1fbabb91772b7801dfb10559d Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Thu, 2 Jan 2020 19:34:29 +0100 Subject: [PATCH 11/18] Changes mentioned in review --- content/docs/hooks-overview.md | 80 +++++++++++++++++----------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 1645918b0..f1cd6631c 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -6,19 +6,19 @@ next: hooks-state.html prev: hooks-intro.html --- -React 16.8 में *Hooks* नामक एक नया फीचर ऐड हुआ हैं। यह आपको class का इस्तेमाल बिना state और अन्य React विशेषताओं का उपयोग करने देता हैंं। +React 16.8 में *Hooks* नामक एक नया फीचर ऐड हुआ है। यह आपको class का इस्तेमाल किये बिना state और अन्य React विशेषताओं का उपयोग करने देता है। -Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) हैं। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता हैं। यह एक तेज ओवरव्यू हैं। यदि आप उलझन में पड़ जाते हैंं, तो निचे दिखाए गए पीले बॉक्स की तलाश करे: +Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता है। यह एक तेज गति का ओवरव्यू है। यदि आप उलझन में पड़ जाते हैं, तो निचे दिखाए गए पीले बॉक्स की तलाश करे: >विस्तृत विवरण > ->यह जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैंं। +>यह जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैं। -**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता हैं।** वे विस्तृत स्पष्टीकरण से जुड़ते हैंं। +**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता है।** वे विस्तृत स्पष्टीकरण से जुड़ते हैं। ## 📌 State Hook {#state-hook} -यह उदाहरण एक काउंटर को रेंडर करता हैं। जब आप बटन पर क्लिक करते हैंं, तो यह वैल्यू को बढ़ाता हैं। +यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते हैं, तो यह वैल्यू को बढ़ाता है। ```js{1,4,5} import React, { useState } from 'react'; @@ -38,13 +38,13 @@ function Example() { } ``` -यहाँ, `useState` एक *Hook* हैं (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते हैं। री-रेंडरर्स के बीच React इस state को संरक्षित करता हैं। `useState` एक पेअर देता हैं: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता हैं। आप इस फ़ंक्शन को किसी इवेंट हैंंडलर या कहीं और से कॉल कर सकते हैंं। यह एक class में `this.setState` के समान हैं, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी हैं। +यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक पेअर देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैंडलर या कहीं और से कॉल कर सकते हैं। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है। -`UseState` का एकमात्र पैरामीटर initial state हैं। ऊपर दिखाए हुए उदाहरण में, यह `0` हैं क्योंकि हमारा काउंटर शून्य से शुरू होता हैं। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं हैं -- हालाँकि इसके पास हो सकता हैं यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता हैं। +`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि इसके पास हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। #### कई state वेरिएबल्स को घोषित करना। {#declaring-multiple-state-variables} -आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते हैंं: +आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते हैं: ```js function ExampleWithManyStates() { @@ -56,25 +56,25 @@ function ExampleWithManyStates() { } ``` -[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता हैं जो हमें `useState` को घोषित करके मिलते हैं। ये नाम `useState` एपीआई का हिस्सा नहीं हैंं। इसके बजाय, React मानता हैं कि यदि आप कई बार `useState` कॉल करते हैंं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैंं। हम वापस आएंगे कि यह क्यों काम करता हैं और यह बाद में कहाँ उपयोगी होता हैं। +[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं हैं। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते हैं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैं। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। -#### लेकिन hook हैं क्या? {#but-what-is-a-hook} +#### लेकिन hook है क्या? {#but-what-is-a-hook} -Hooks ऐसे फंक्शन हैंं जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैंं। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैंं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते हैंं।) +Hooks ऐसे फंक्शन हैं जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैं। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते हैं।) -React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता हैं। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैंं। हम बने बनाये Hooks को पहले देखते हैं। +React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैं। हम बने बनाये Hooks को पहले देखते है। >विस्तृत विवरण > ->आप समर्पित पेज पर state hook के बारे में अधिक जान सकते हैंं: [State Hook का उपयोग करना](/docs/hooks-state.html) +>आप समर्पित पेज पर state hook के बारे में अधिक जान सकते हैं: [State Hook का उपयोग करना](/docs/hooks-state.html) ## ⚡️ Effect Hook {#effect-hook} -आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ हैं। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैंं क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते हैंं और रेंडरिंग के दौरान नहीं किये जा सकते। +आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैं क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते हैं और रेंडरिंग के दौरान नहीं किये जा सकते। -Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता हैं। यह उसी प्रकार में कार्य करता हैं जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते हैं, लेकिन यह एक ही API में एकीकृत हैं। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) +Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) -उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता हैं: +उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता है: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -99,9 +99,9 @@ function Example() { } ``` -जब आप `useEffect` कॉल करते हैंं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैंं। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता हैं ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता हैं -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता हैं।) +जब आप `useEffect` कॉल करते हैं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) -Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैंं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता हैं, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता हैं: +Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +128,9 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती हैं जब कौम्पोनॅन्ट अनमाउंट हो जाता हैं, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैंं, यहाँ एक तरीका हैं [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया हैं।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) -`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैंं: +`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,30 +153,30 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैंं जो pieces से संबंधित होते हैंं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। +Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। >विस्तृत विवरण > ->आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते हैंं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) +>आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) ## ✌️ Hook के नियम {#rules-of-hooks} -Hooks JavaScript फंक्शन हैंं, लेकिन वे दो अतिरिक्त नियम लागू करते हैंं: +Hooks JavaScript फंक्शन हैं, लेकिन वे दो अतिरिक्त नियम लागू करते हैं: * Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। -* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान हैं -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) +* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) -हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैंं जो इन नियमों को स्वचालित रूप से लागू कर देते हैं। हम समझते हैंं कि ये नियम पहले सीमित या भ्रमित हो सकते हैंं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैंं। +हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैं जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते हैं कि ये नियम पहले सीमित या भ्रमित हो सकते हैं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैं। >विस्तृत विवरण > ->आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैंं: [Hooks के नियम](/docs/hooks-rules.html) +>आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) ## 💡 अपने खुद के Hooks का निर्माण {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैंं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते हैंं। +कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते हैं। -इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया हैं, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता हैं। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैंं। +इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। सबसे पहले, हम इस लॉजिक को `useFriendStatus` नामक एक कस्टम Hook में निकालेंगे: @@ -201,9 +201,9 @@ function useFriendStatus(friendID) { } ``` -यह एक आर्गुमेंट के रूप में `friendID` लेता हैं, और रिटर्न करता हैं कि क्या हमारा दोस्त ऑनलाइन हैं। +यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है। -अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैंं: +अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैं: ```js{2} @@ -229,19 +229,19 @@ function FriendListItem(props) { } ``` -इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र हैं। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका हैं, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state हैं -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैंं। +इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। -कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन हैंं। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता हैं और इसे अन्य Hook कॉल करते हैं, तो हम कहते हैंं कि यह एक कस्टम Hook हैं। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता हैं। +कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन हैं। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। -आप कस्टम Hook लिख सकते हैंं जो फॉर्म हैंंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैंं। हम यह देखने के लिए उत्साहित हैंं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। +आप कस्टम Hook लिख सकते हैं जो फॉर्म हैंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैं। हम यह देखने के लिए उत्साहित हैं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। >विस्तृत विवरण > ->आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते हैंं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). +>आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते हैं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). ## 🔌 अन्य Hooks {#other-hooks} -कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैंं जो आपको उपयोगी लग सकते हैंं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता हैं: +कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: ```js{2,3} function Example() { @@ -251,7 +251,7 @@ function Example() { } ``` -और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state का प्रबंधन करने देता हैं: +और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state का प्रबंधन करने देता है: ```js{2} function Todos() { @@ -261,12 +261,12 @@ function Todos() { >विस्तृत विवरण > ->आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैंं: [Hooks API संदर्भ](/docs/hooks-reference.html) +>आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) ## अगला कदम {#next-steps} -अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैंं, आप अगले पेज पढ़ सकते हैंं, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। +अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। -आप इन पेजों को भी देख सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) +आप इन पेजों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) -अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता हैं कि *हम* Hooks क्यों बना रहे हैंं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। +अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। From a0b050717eac4b3ee7090545652bf17bebeea6c4 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Wed, 22 Jan 2020 13:55:00 +0100 Subject: [PATCH 12/18] added changes --- content/docs/hooks-overview.md | 64 +++++++++++++++++----------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index f1cd6631c..606d83055 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -8,17 +8,17 @@ prev: hooks-intro.html React 16.8 में *Hooks* नामक एक नया फीचर ऐड हुआ है। यह आपको class का इस्तेमाल किये बिना state और अन्य React विशेषताओं का उपयोग करने देता है। -Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता है। यह एक तेज गति का ओवरव्यू है। यदि आप उलझन में पड़ जाते हैं, तो निचे दिखाए गए पीले बॉक्स की तलाश करे: +Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.html#no-breaking-changes) है। यह पेज अनुभवी React उपयोगकर्ताओं के लिए Hooks का ओवरव्यू प्रदान करता है। यह एक तेज गति का ओवरव्यू है। यदि आप उलझन में पड़ जाते है, तो निचे दिखाए गए पीले बॉक्स की तलाश करे: >विस्तृत विवरण > ->यह जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें कि हम Hooks का React में परिचय क्यों कर रहे हैं। +>यह जानने के लिए आप [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें जो बताता है कि हम Hooks का React में क्यों परिचय कर रहे है। -**↑↑↑ प्रत्येक खंड इस तरह से पीले बॉक्स के साथ समाप्त होता है।** वे विस्तृत स्पष्टीकरण से जुड़ते हैं। +**↑↑↑ प्रत्येक खंड इस तरह के पीले बॉक्स के साथ समाप्त होता है।** वे आपको और जानकारी की तरफ ले जाते है। ## 📌 State Hook {#state-hook} -यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते हैं, तो यह वैल्यू को बढ़ाता है। +यह उदाहरण एक काउंटर को रेंडर करता है। जब आप बटन पर क्लिक करते है, तो यह वैल्यू को बढ़ाता है। ```js{1,4,5} import React, { useState } from 'react'; @@ -31,20 +31,20 @@ function Example() {

You clicked {count} times

); } ``` -यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक पेअर देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैंडलर या कहीं और से कॉल कर सकते हैं। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है। +यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक जोड़ा देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैडलर या कहीं और से कॉल कर सकते है। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है। `UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि इसके पास हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। #### कई state वेरिएबल्स को घोषित करना। {#declaring-multiple-state-variables} -आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते हैं: +आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते है: ```js function ExampleWithManyStates() { @@ -56,21 +56,21 @@ function ExampleWithManyStates() { } ``` -[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं हैं। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते हैं, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते हैं। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। +[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं है। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते है, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते है। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। #### लेकिन hook है क्या? {#but-what-is-a-hook} -Hooks ऐसे फंक्शन हैं जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते हैं। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते हैं। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते हैं।) +Hooks ऐसे फंक्शन है जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते है। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते है। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते है।) -React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते हैं। हम बने बनाये Hooks को पहले देखते है। +React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते है। हम बने बनाये Hooks को पहले देखते है। >विस्तृत विवरण > ->आप समर्पित पेज पर state hook के बारे में अधिक जान सकते हैं: [State Hook का उपयोग करना](/docs/hooks-state.html) +>आप समर्पित पेज पर state hook के बारे में अधिक जान सकते है: [State Hook का उपयोग करना](/docs/hooks-state.html) ## ⚡️ Effect Hook {#effect-hook} -आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते हैं क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते हैं और रेंडरिंग के दौरान नहीं किये जा सकते। +आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते है क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते है और रेंडरिंग के दौरान नहीं किये जा सकते। Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) @@ -99,9 +99,9 @@ function Example() { } ``` -जब आप `useEffect` कॉल करते हैं, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे हैं। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) +जब आप `useEffect` कॉल करते है, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे है। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) -Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते हैं कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: +Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते है कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +128,9 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते हैं, यहाँ एक तरीका है [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते है, यहाँ एक तरीका है [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) -`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते हैं: +`useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते है: ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,30 +153,30 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते हैं जो pieces से संबंधित होते हैं (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। +Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते है जो pieces से संबंधित होते है (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। >विस्तृत विवरण > ->आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते हैं: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) +>आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते है: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) ## ✌️ Hook के नियम {#rules-of-hooks} -Hooks JavaScript फंक्शन हैं, लेकिन वे दो अतिरिक्त नियम लागू करते हैं: +Hooks JavaScript फंक्शन है, लेकिन वे दो अतिरिक्त नियम लागू करते है: * Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। * Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) -हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते हैं जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते हैं कि ये नियम पहले सीमित या भ्रमित हो सकते हैं, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक हैं। +हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते है जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते है कि ये नियम पहले सीमित या भ्रमित हो सकते है, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक है। >विस्तृत विवरण > ->आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते हैं: [Hooks के नियम](/docs/hooks-rules.html) +>आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते है: [Hooks के नियम](/docs/hooks-rules.html) ## 💡 अपने खुद के Hooks का निर्माण {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते हैं। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते हैं। +कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते है। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते है। -इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते हैं। +इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते है। सबसे पहले, हम इस लॉजिक को `useFriendStatus` नामक एक कस्टम Hook में निकालेंगे: @@ -203,7 +203,7 @@ function useFriendStatus(friendID) { यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है। -अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते हैं: +अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते है: ```js{2} @@ -229,19 +229,19 @@ function FriendListItem(props) { } ``` -इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते हैं। +इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते है। -कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन हैं। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते हैं कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। +कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन है। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते है कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। -आप कस्टम Hook लिख सकते हैं जो फॉर्म हैंडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते हैं। हम यह देखने के लिए उत्साहित हैं कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। +आप कस्टम Hook लिख सकते है जो फॉर्म हैडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते है। हम यह देखने के लिए उत्साहित है कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। >विस्तृत विवरण > ->आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते हैं: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). +>आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते है: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). ## 🔌 अन्य Hooks {#other-hooks} -कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks हैं जो आपको उपयोगी लग सकते हैं। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: +कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks है जो आपको उपयोगी लग सकते है। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: ```js{2,3} function Example() { @@ -261,12 +261,12 @@ function Todos() { >विस्तृत विवरण > ->आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते हैं: [Hooks API संदर्भ](/docs/hooks-reference.html) +>आप एक समर्पित पेज पर सब बिल्ड इन Hooks के बारे में अधिक जान सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) ## अगला कदम {#next-steps} -अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते हैं, आप अगले पेज पढ़ सकते हैं, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। +अगर आपको कुछ चीजें समझ में नहीं आईं या आप अधिक विस्तार से सीखना चाहते है, आप अगले पेज पढ़ सकते है, [State Hook](/docs/hooks-state.html) डॉक्यूमेंटेशन के साथ शुरू करते हुए। आप इन पेजों को भी देख सकते है: [Hooks API संदर्भ](/docs/hooks-reference.html) और [Hooks FAQ](/docs/hooks-faq.html) -अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे हैं और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। +अंत में, [introduction page](/docs/hooks-intro.html) को देखना ना भूले जो बताता है कि *हम* Hooks क्यों बना रहे है और कैसे हम classes के साथ-साथ उनका उपयोग करना शुरू करेंगे -- हमारे एप्लिकेशन को फिरसे लिखे बिना। From 58602c10c5deed57b0bcc6c43180913fc026bd45 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Fri, 21 Feb 2020 11:56:20 +0100 Subject: [PATCH 13/18] added changes --- content/docs/hooks-overview.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 606d83055..98f0d904b 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -12,7 +12,7 @@ Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.h >विस्तृत विवरण > ->यह जानने के लिए आप [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें जो बताता है कि हम Hooks का React में क्यों परिचय कर रहे है। +>Hooks के React में परिचय होने के कारणो को जानने के लिए [मोटिवेशन](/docs/hooks-intro.html#motivation) पढ़ें। **↑↑↑ प्रत्येक खंड इस तरह के पीले बॉक्स के साथ समाप्त होता है।** वे आपको और जानकारी की तरफ ले जाते है। @@ -40,9 +40,9 @@ function Example() { यहाँ, `useState` एक *Hook* है (हम इसके बारे में एक पल में बात करेंगे)। हम इसे फंक्शन कौम्पोनॅन्ट के अंदर लोकल state डालने के लिए कॉल करते है। री-रेंडरर्स के बीच React इस state को संरक्षित करता है। `useState` एक जोड़ा देता है: एक *current* state वैल्यू और एक फ़ंक्शन जो आपको इसे अपडेट करने देता है। आप इस फ़ंक्शन को किसी इवेंट हैडलर या कहीं और से कॉल कर सकते है। यह एक class में `this.setState` के समान है, लेकिन यह पुराने और नए state को एक साथ नहीं मिलाता। (हम [State Hook उपयोग करते समय](/docs/hooks-state.html) में एक उदाहरण दिखाएंगे जिसमे `useState` की `this.state` से तुलना की गयी है। -`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- हालाँकि इसके पास हो सकता है यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। +`UseState` का एकमात्र पैरामीटर initial state है। ऊपर दिखाए हुए उदाहरण में, यह `0` है क्योंकि हमारा काउंटर शून्य से शुरू होता है। ध्यान दें कि `this.state` के विपरीत, यहाँ state के पास कोई object नहीं है -- पर यह एक object भी हो सकता है, यदि आप चाहें। Initial state का पैरामीटर केवल पहले रेंडर के दौरान उपयोग किया जाता है। -#### कई state वेरिएबल्स को घोषित करना। {#declaring-multiple-state-variables} +#### कई state वेरिएबल्स को घोषित करना {#declaring-multiple-state-variables} आप एक कौम्पोनॅन्ट में एक से अधिक बार State Hook का उपयोग कर सकते है: @@ -50,13 +50,13 @@ function Example() { function ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); - const [fruit, setFruit] = useState('banana'); - const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); + const [fruit, setFruit] = useState('केला'); + const [todos, setTodos] = useState([{ text: 'Hooks सीखें' }]); // ... } ``` -[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं है। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते है, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते है। हम वापस आएंगे कि यह क्यों काम करता है और यह बाद में कहाँ उपयोगी होता है। +[ऐरे डेस्ट्रक्टरिंग] सिंटेक्स हमें state वेरिएबल्स को अलग-अलग नाम देने की सुविधा देता है जो हमें `useState` को घोषित करके मिलते है। ये नाम `useState` एपीआई का हिस्सा नहीं है। इसके बजाय, React मानता है कि यदि आप कई बार `useState` कॉल करते है, तो आप इसे हर रेंडर के दौरान उसी क्रम में करते है। हम इसके बारे में फिर बात करेंगे और बताएँगे की यह कहाँ उपयोगी होता है। #### लेकिन hook है क्या? {#but-what-is-a-hook} From 3d27ffc8a636e89130a75307af523125c2c251af Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Tue, 28 Apr 2020 11:18:43 +0200 Subject: [PATCH 14/18] Added changes --- content/docs/hooks-overview.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 98f0d904b..0d84b5be6 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -24,7 +24,7 @@ Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.h import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // एक नया state variable घोषित करें, जिसे हम "काउंट" कहेंगे const [count, setCount] = useState(0); return ( @@ -48,7 +48,7 @@ function Example() { ```js function ExampleWithManyStates() { - // Declare multiple state variables! + // यहाँ कई state variables घोषित करें! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('केला'); const [todos, setTodos] = useState([{ text: 'Hooks सीखें' }]); @@ -60,7 +60,7 @@ function ExampleWithManyStates() { #### लेकिन hook है क्या? {#but-what-is-a-hook} -Hooks ऐसे फंक्शन है जो आपको फ़ंक्शन कौम्पोनॅन्टस से React state "में Hooks" और लाइफ साइकिल की सुविधा देते है। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते है। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते है।) +Hooks ऐसे फंक्शन है जो आपको React State और लाइफ साइकिल का उपयोग फ़ंक्शन कौम्पोनॅन्टस के माध्यम से करने की सुविधा देते है। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते है। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते है।) React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते है। हम बने बनाये Hooks को पहले देखते है। @@ -70,9 +70,9 @@ React `useState` जैसे कुछ बने बनाये Hooks प् ## ⚡️ Effect Hook {#effect-hook} -आपने संभवतः पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस से बदलकर दिखाया हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट के लिए "effects") कहते है क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते है और रेंडरिंग के दौरान नहीं किये जा सकते। +आपने पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस के उपयोग से बदलना करा हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट में "effects") कहते है क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते है और रेंडरिंग के दौरान नहीं चलाये जा सकते। -Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जो `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) +Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जैसे `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) उदाहरण के लिए, React DOM को अपडेट करने के बाद यह कौम्पोनॅन्ट डॉक्यूमेंट का शीर्षक सेट करता है: @@ -82,26 +82,26 @@ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); - // Similar to componentDidMount and componentDidUpdate: + // जैसे `componentDidMount`, `componentDidUpdate` useEffect(() => { - // Update the document title using the browser API - document.title = `You clicked ${count} times`; + // browser API का उपयोग करके डॉक्यूमेंट के शीर्षक को अपडेट करें + document.title = `आपने ${count} बार क्लिक किया`; }); return (
-

You clicked {count} times

+

आपने ${count} बार क्लिक किया

); } ``` -जब आप `useEffect` कॉल करते है, तो आप DOM के परिवर्तन फ्लश करने के बाद अपने "effect" फ़ंक्शन को चलाने के लिए React को बता रहे है। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि उनके पास इसके props और state तक पहुंच हो। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी* (हम इस बारे में और बात करेंगे की [Effect hook इस्तेमाल करते समय](/docs/hooks-effect.html) ये class lifecycles से कैसे तुलना करता है।) +जब आप `useEffect` कॉल करते है, तब React DOM पे अपने बदलाव को फ्लश करके "effect" फ़ंक्शन चलाता है। कौम्पोनॅन्टस के अंदर effects को डिक्लेअर किया जाता है ताकि वो इसके props और state को यूज़ कर सके। डिफ़ॉल्ट रूप से, React हर रेंडर के बाद effects चलाता है -- पहले रेंडर *के साथ भी*। ये class lifecycles की तुलना में कैसे काम करता है इसके बारे में हम यहाँ और बात करेंगे: [Effect hook का उपयोग](/docs/hooks-effect.html) -Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते है कि किसी फ़ंक्शन को वापस करके उनके बाद उसका "clean up" कैसे करें। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र की ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: +Effects ऑप्शनल रूप से यह भी निर्दिष्ट कर सकते है कि उसका "clean up" कैसे करे। यह आप "effect" मैं एक फंक्शन return करके कर सकते है। उदाहरण के लिए, यह कौम्पोनॅन्ट किसी मित्र के ऑनलाइन स्टेटस को सब्सक्राइब करने के लिए एक effect का उपयोग करता है, और बाद मैं इससे अनसब्सक्राइब करके क्लीन करता है: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,7 +128,7 @@ function FriendStatus(props) { } ``` -इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, साथ ही अगले रेंडर की वजह से effect को दुबारा चलाने से पहले। (यदि आप चाहते है, यहाँ एक तरीका है [React को बताने का की री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है।) +इस उदाहरण में, React हमारे `ChatAPI` से तब अनसब्सक्राइब हो जाती है जब कौम्पोनॅन्ट अनमाउंट हो जाता है, और अगले रेंडर पर भी क्यूंकि हर रेंडर पे effect दोबारा चलता है। अगर `props.friend.id` नहीं बदलता जो हमने `ChatAPI` को पास किया है तो React री-सब्सक्राइबिंग को स्किप कर देगा (आप इस बारे मैं यहाँ और पढ़ सकते है: [React री-सब्सक्राइबिंग को कैसे स्किप करें](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)) `useState` की तरह, आप एक कौम्पोनॅन्ट में एक से अधिक effect का उपयोग कर सकते है: @@ -136,7 +136,7 @@ function FriendStatus(props) { function FriendStatusWithCounter(props) { const [count, setCount] = useState(0); useEffect(() => { - document.title = `You clicked ${count} times`; + document.title = `आपने ${count} बार क्लिक किया`; }); const [isOnline, setIsOnline] = useState(null); @@ -153,7 +153,7 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते है जो pieces से संबंधित होते है (जैसे कि सब्सक्रिप्शन लेना और हटाना), बजाय इसके इसको लाइफसाइकिल तरीकों के आधार पर विभाजित करने के लिए मजबूर करना। +Hooks आपको एक कौम्पोनॅन्ट में साइड इफेक्ट को व्यवस्थित करने देते है जो pieces से संबंधित होते है (जैसे कि सब्सक्रिप्शन लेना और हटाना), वे आपको लाइफसाइकिल के तरीकों के आधार पर विभाजित करने के लिए मजबूर नहीं करते। >विस्तृत विवरण > From 7fa83177f90f03b5690c29e3894b6e1bcd5a8269 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Mon, 4 May 2020 10:51:39 +0200 Subject: [PATCH 15/18] added changes --- content/docs/hooks-overview.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 0d84b5be6..225c9cf11 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -24,7 +24,7 @@ Hooks [बैकवर्डस-कम्पेटिबल](/docs/hooks-intro.h import React, { useState } from 'react'; function Example() { - // एक नया state variable घोषित करें, जिसे हम "काउंट" कहेंगे + // एक नया state variable घोषित करा जा रहा हैं, जिसे हम "काउंट" कहेंगे const [count, setCount] = useState(0); return ( @@ -48,7 +48,7 @@ function Example() { ```js function ExampleWithManyStates() { - // यहाँ कई state variables घोषित करें! + // यहाँ कई state variables घोषित हो रहे हैं! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('केला'); const [todos, setTodos] = useState([{ text: 'Hooks सीखें' }]); @@ -70,7 +70,7 @@ React `useState` जैसे कुछ बने बनाये Hooks प् ## ⚡️ Effect Hook {#effect-hook} -आपने पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस के उपयोग से बदलना करा हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट में "effects") कहते है क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते है और रेंडरिंग के दौरान नहीं चलाये जा सकते। +आपने पहले डेटा फेचिंग, सब्स्क्रिप्शन, या मैन्युअल रूप से DOM को React कौम्पोनॅन्टस के उपयोग से बदला हुआ है। हम इन ऑपरेशनों को "साइड इफेक्ट्स" (या शॉर्ट में "effects") कहते है क्योंकि वे अन्य कौम्पोनॅन्टस को प्रभावित कर सकते है और रेंडरिंग के दौरान नहीं चलाये जा सकते। Effect Hook, `useEffect`, एक फ़ंक्शन कौम्पोनॅन्टस से साइड इफेक्ट करने की क्षमता देता है। यह उसी प्रकार में कार्य करता है जैसे `componentDidMount`, `componentDidUpdate`, और `componentWillUnmount` React classes में करते है, लेकिन यह एक ही API में एकीकृत है। (हम इन तरीकों की तुलना में `useEffect` की तुलना करने वाले उदाहरण यहाँ दिखाएंगे [Effect Hook का उपयोग करना](/docs/hooks-effect.html)।) @@ -82,7 +82,7 @@ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); - // जैसे `componentDidMount`, `componentDidUpdate` + // `componentDidMount`, `componentDidUpdate` के समान useEffect(() => { // browser API का उपयोग करके डॉक्यूमेंट के शीर्षक को अपडेट करें document.title = `आपने ${count} बार क्लिक किया`; From f26253d7a69e517cba69a8acc81b91f170d7862d Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Mon, 11 May 2020 13:22:39 +0200 Subject: [PATCH 16/18] added more changes --- content/docs/hooks-overview.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 225c9cf11..c47396a33 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -159,22 +159,22 @@ Hooks आपको एक कौम्पोनॅन्ट में साइ > >आप एक समर्पित पेज पर `useEffect` के बारे में अधिक जान सकते है: [Effect Hook का उपयोग करना](/docs/hooks-effect.html) -## ✌️ Hook के नियम {#rules-of-hooks} +## ✌️ Hooks के नियम {#rules-of-hooks} -Hooks JavaScript फंक्शन है, लेकिन वे दो अतिरिक्त नियम लागू करते है: +Hooks JavaScript फंक्शन्स है, लेकिन वे दो अतिरिक्त नियम लागू करते है: -* Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hook को कॉल न करें। -* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hook कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) +* Hooks को केवल **सबसे उपर** कॉल करें। लूप्स, कंडीशंस, या नेस्टेड फ़ंक्शन के अंदर Hooks को कॉल न करें। +* Hooks को सिर्फ **React फ़ंक्शन कौम्पोनॅन्ट** मैं ही कॉल करें। नियमित जावास्क्रिप्ट फ़ंक्शंस से Hooks कॉल न करें। (Hooks को कॉल करने के लिए सिर्फ एक अन्य वैध स्थान है -- अपने स्वयं के कस्टम Hooks। हम उनके बारे में एक क्षण में जानेंगे।) -हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) प्रदान करते है जो इन नियमों को स्वचालित रूप से लागू कर देते है। हम समझते है कि ये नियम पहले सीमित या भ्रमित हो सकते है, लेकिन वे Hooks को अच्छी तरह से काम करने के लिए आवश्यक है। +हम एक [लिंटर प्लगइन](https://www.npmjs.com/package/eslint-plugin-react-hooks) यूज़ करेंगे जो इन नियमों को खुद लागू कर देगा। हम समझते है कि ये नियम शुरू मैं थोड़े सीमित या मुश्किल लग सकते हैं, लेकिन वे Hooks को अच्छे से काम करने के लिए आवश्यक है। >विस्तृत विवरण > ->आप एक समर्पित पेज पर ये नियम के बारे में अधिक जान सकते है: [Hooks के नियम](/docs/hooks-rules.html) +>आप एक समर्पित पेज पर इन नियमों के बारे में अधिक जान सकते है: [Hooks के नियम](/docs/hooks-rules.html) -## 💡 अपने खुद के Hooks का निर्माण {#building-your-own-hooks} +## 💡 अपने खुद के Hooks बनाना {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्ट के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते है। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते है। +कभी-कभी, हम कौम्पोनॅन्टस के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते है। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते है। इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते है। From d47b15c8b183c9a35e838f5ca99bbc33c1bef642 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Fri, 22 May 2020 13:28:04 +0200 Subject: [PATCH 17/18] added changes mentioned --- content/docs/hooks-overview.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index c47396a33..b520d624c 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -62,7 +62,7 @@ function ExampleWithManyStates() { Hooks ऐसे फंक्शन है जो आपको React State और लाइफ साइकिल का उपयोग फ़ंक्शन कौम्पोनॅन्टस के माध्यम से करने की सुविधा देते है। Hooks क्लासेस के अंदर काम नहीं करते - वे आपको क्लासेस के बिना React का उपयोग करने देते है। (हम [सलाह नहीं देते](/docs/hooks-intro.html#gradual-adoption-strategy) की आप अपने मौजूदा कौम्पोनॅन्टस को रात भर में Hooks में परिवर्तित करदे लेकिन यदि आप चाहें तो नए कौम्पोनॅन्टस में Hooks का उपयोग शुरू कर सकते है।) -React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का पुन: उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते है। हम बने बनाये Hooks को पहले देखते है। +React `useState` जैसे कुछ बने बनाये Hooks प्रदान करता है। आप विभिन्न कौम्पोनॅन्टस के बीच stateful बिहेवियर का फिर से उपयोग करने के लिए अपने स्वयं के Hooks भी बना सकते है। हम बने बनाये Hooks को पहले देखते है। >विस्तृत विवरण > @@ -174,9 +174,9 @@ Hooks JavaScript फंक्शन्स है, लेकिन वे दो ## 💡 अपने खुद के Hooks बनाना {#building-your-own-hooks} -कभी-कभी, हम कौम्पोनॅन्टस के बीच कुछ स्टेटफुल लॉजिक का पुन: उपयोग करना चाहते है। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते है। +कभी-कभी, हम कौम्पोनॅन्टस के बीच कुछ स्टेटफुल लॉजिक का फिर से उपयोग करना चाहते है। परंपरागत रूप से, इस समस्या के दो लोकप्रिय समाधान थे: [higher-order कौम्पोनॅन्ट](/docs/higher-order-components.html) और [रेंडर प्रॉप्स](/docs/render-props.html)। लेकिन कस्टम Hooks आपको आपके tree में अधिक कौम्पोनॅन्ट को ऐड करे बिना ऐसा करने देते है। -इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया है, जो किसी मित्र के ऑनलाइन स्टेटस की सदस्यता के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सदस्यता तर्क को किसी अन्य कौम्पोनॅन्ट में पुन: उपयोग करना चाहते है। +इस पेज मैं पहले, हमने एक `FriendStatus` कौम्पोनॅन्ट पेश किया था, जो किसी मित्र के ऑनलाइन स्टेटस की सब्सक्रिप्शन के लिए `useState` और `useEffect` Hook को कॉल करता है। मान लें कि हम इस सब्सक्रिप्शन लॉजिक को किसी अन्य कौम्पोनॅन्ट में फिर से उपयोग करना चाहते है। सबसे पहले, हम इस लॉजिक को `useFriendStatus` नामक एक कस्टम Hook में निकालेंगे: @@ -203,7 +203,7 @@ function useFriendStatus(friendID) { यह एक आर्गुमेंट के रूप में `friendID` लेता है, और रिटर्न करता है कि क्या हमारा दोस्त ऑनलाइन है। -अब हम इसे दोनों कौम्पोनॅन्टस से उपयोग कर सकते है: +अब हम इसे दोनों कौम्पोनॅन्टस में उपयोग कर सकते है: ```js{2} @@ -229,15 +229,15 @@ function FriendListItem(props) { } ``` -इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का पुन: उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- जिस से आप एक ही कौम्पोनॅन्ट में दो बार एक कस्टम Hook का उपयोग कर सकते है। +इन कौम्पोनॅन्टस की स्टेट पूरी तरह से स्वतंत्र है। Hooks *स्टेट फुल लॉजिक* का फिर से उपयोग करने का एक तरीका है, न कि state का। वास्तव में, एक Hook करने के लिए प्रत्येक *कॉल* में एक पूरी तरह से अलग state है -- आप वही कस्टम Hook एक ही कौम्पोनॅन्ट में दो बार उपयोग कर सकते है। -कस्टम Hook एक विशेषता से ज़्यादा एक कन्वेंशन है। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hook कॉल करते है, तो हम कहते है कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। +कस्टम Hooks एक विशेषता से ज़्यादा एक कन्वेंशन है। यदि किसी फ़ंक्शन का नाम "`use`" से शुरू होता है और इसे अन्य Hooks कॉल करते है, तो हम कहते है कि यह एक कस्टम Hook है। हमारे लिंटर प्लगइन `useSomething` नामकरण कन्वेंशन का उपयोग करके कोड में बग ढूंढने में मदद करता है। -आप कस्टम Hook लिख सकते है जो फॉर्म हैडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक मामलों मे जिसपे हमने विचार नहीं किया, जैसे उपयोग मामलों की एक विस्तृत श्रृंखला को कवर करते है। हम यह देखने के लिए उत्साहित है कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। +आप कस्टम Hooks फॉर्म हैडलिंग, एनीमेशन, डेक्लेरेटिव सब्सक्रिप्शन, टाइमर और शायद और अधिक यूज़ केसेस के लिए लिख सकते है जिसपे हमने कभी विचार भी नहीं किया। हम यह देखने के लिए उत्साहित है कि React समुदाय और कौन कौन से कस्टम Hooks लेकर आएंगे। >विस्तृत विवरण > ->आप एक समर्पित पेज पर कस्टम Hook के बारे में अधिक जान सकते है: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). +>आप एक समर्पित पेज पर कस्टम Hooks के बारे में अधिक जान सकते है: [अपने खुद के Hooks का निर्माण](/docs/hooks-custom.html). ## 🔌 अन्य Hooks {#other-hooks} From 5cf6c5308e635148e99fa7c52042d2e2d522f144 Mon Sep 17 00:00:00 2001 From: Gautam Pahuja Date: Tue, 26 May 2020 13:24:01 +0200 Subject: [PATCH 18/18] added final changes --- content/docs/hooks-overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index b520d624c..8ca39393b 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -241,7 +241,7 @@ function FriendListItem(props) { ## 🔌 अन्य Hooks {#other-hooks} -कुछ कम इस्तेमाल किए जाने वाले बिल्ड इन Hooks है जो आपको उपयोगी लग सकते है। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) यह आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: +कुछ Hooks ऐसे भी है जो कम इस्तेमाल होते है। उदाहरण के लिए, [`useContext`](/docs/hooks-reference.html#usecontext) आपको नेस्टिंग के बिना React context को सब्सक्राइब करने देता है: ```js{2,3} function Example() { @@ -251,7 +251,7 @@ function Example() { } ``` -और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state का प्रबंधन करने देता है: +और [`useReducer`](/docs/hooks-reference.html#usereducer) आपको एक reducer के साथ जटिल कौम्पोनॅन्टस के लोकल state को संभालने देता है: ```js{2} function Todos() {