Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Translated the adding-form to Hindi #59

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions docs/docs/adding-forms.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,34 @@
---
title: Adding Forms
title: फॉर्म को जोड़ना
---

Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to create React forms can be found in the [React forms documentation](https://reactjs.org/docs/forms.html) (which happens to be built with Gatsby!)

Start with the following page.
Gatsby के ऊपर बनाया गया है React। तो सब कुछ जो React में संभव है वह सब फॉर्म में भी संभव है। अतिरिक्त जानकारि की कैसे बनाएं React फॉर्म, यहाँ पाया जा सकता है [React forms documentation](https://reactjs.org/docs/forms.html) (जो Gatsby! से बनाया गया है)
निम्नलिखित पेज से सुरु करें।

```jsx:title=src/pages/index.js
import React from "react"

export default () => <div>Hello world!</div>
```

This Gatsby page is a React component. When you want to create a form, you need to store the state of the form - what the user has entered. Convert your function (stateless) component to a class (stateful) component.
ये Gatsby पृष्ठ एक React कौम्पोनॅन्ट है| जब आप एक फॉर्म चाहते हैं, आपको फॉर्म की स्टेट स्टोर करने की आवश्यकता है - उपयोगकर्ता ने क्या दर्ज किया है| अपने कृत्य(अवस्थाहीं) कौम्पोनॅन्ट कोह क्लास (स्टेटफुल) कौम्पोनॅन्ट रूपांतरित करो|

```jsx:title=src/pages/index.js
import React from "react"

export default class IndexPage extends React.Component {
export default class IndexPage extends React.कौम्पोनॅन्ट {
render() {
return <div>Hello world!</div>
}
}
```

Now that you have created a class component, you can add `state` to the component.
अब जब आपने क्लास कौम्पोनॅन्ट बना लिया है,अब आप जोड़ सकते हो `state` कौम्पोनॅन्ट में|

```jsx:title=src/pages/index.js
import React from "react"

export default class IndexPage extends React.Component {
export default class IndexPage extends React.कौम्पोनॅन्ट {
state = {
firstName: "",
lastName: "",
Expand All @@ -41,7 +40,7 @@ export default class IndexPage extends React.Component {
}
```

And now you can add a few input fields:
और अब आप कुछ इनपुट फ़ील्ड भी जोड़ सकते हैं :

```jsx:title=src/pages/index.js
import React from "react"
Expand Down Expand Up @@ -70,7 +69,7 @@ export default class IndexPage extends React.Component {
}
```

When a user types into an input box, the state should update. Add an `onChange` prop to update state and add a `value` prop to keep the input up to date with the new state:
जब कोई उपयोगकर्ता एक इनपुट बॉक्स में टाइप करता है, स्टेट को अद्यतन करना चाहिए| एक `onChange` जोड़ें जो स्टेट अद्यतन करेगा और एक `value` प्रोप जोड़ें इनपुट को अद्यतित रखना के लीये नए स्टेट के साथ:

```jsx:title=src/pages/index.js
import React from "react"
Expand Down Expand Up @@ -119,7 +118,7 @@ export default class IndexPage extends React.Component {
}
```

Now that your inputs are working, you want something to happen when you submit the form. Add `onSubmit` props to the form element and add `handleSubmit` to show an alert when the user submits the form:
अब जब कि आपके इनपुट काम कर रहे हैं, आप कुछ फॉर्म जमा करते वक़्त होने वाला बनना चाहते हैं| एक `onSubmit` प्रोप फॉर्म में जोड़ें और एक `handleSubmit` यहाँ दिखाने के लीये जब उपयोगकर्ता फ़ॉर्म सबमिट करे तो अलर्ट दिखे:

```jsx:title=src/pages/index.js
import React from "react"
Expand Down Expand Up @@ -173,6 +172,6 @@ export default class IndexPage extends React.Component {
}
```

This form isn't doing anything besides showing the user information that they just entered. At this point, you may want to move this form to a component, send the form state to a backend server, or add robust validation. You can also use fantastic React form libraries like [Formik](https://github.com/jaredpalmer/formik) or [Final Form](https://github.com/final-form/react-final-form) to speed up your development process.
यह फ़ॉर्म कुछ भी नहीं कर रहा है उपयोगकर्ता द्वारा दर्ज की गई जानकारी प्रदर्शन के अलवा| इस समय, आप फ़ार्म को कौम्पोनॅन्ट चाहते हैं, फ़ार्म स्टेट को बैकएंड सर्वर पर भज सकत है, या मजबूत मान्यकरण जोर सखते है| आप ये भी उपयोग कर सकते हैं विलक्षण React फ़ार्म लाइब्रेरी जैसा [Formik](https://github.com/jaredpalmer/formik) या[Final Form](https://github.com/final-form/react-final-form) अपनी डिविलडेवेलोपमेंट गति बढ़ाने के लिए|

All of this is possible and more by leveraging the power of Gatsby and the React ecosystem!
यह सब और इस्से अधिक भी संभव है Gatsby और React पारिस्थितिकी तंत्र की शक्ति का लाभ उठाकर!