From 75a259881d3b3c241ddd12bc9c299a40aefaa047 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 1 Mar 2019 17:27:47 -0800
Subject: [PATCH 01/18] Update tutorial.md

---
 content/tutorial/tutorial.md | 64 +++++++++++++-----------------------
 1 file changed, 22 insertions(+), 42 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 9e1e58872..1c69ae99f 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -31,8 +31,6 @@ The tutorial is divided into several sections:
 
 You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections.
 
-It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding.
-
 ### What Are We Building? {#what-are-we-building}
 
 In this tutorial, we'll show how to build an interactive tic-tac-toe game with React.
@@ -188,7 +186,9 @@ The Square component renders a single `<button>` and the Board renders 9 squares
 
 ### Passing Data Through Props {#passing-data-through-props}
 
-Just to get our feet wet, let's try passing some data from our Board component to our Square component.
+To get our feet wet, let's try passing some data from our Board component to our Square component.
+
+We strongly recommend typing code by hand as you're working through the tutorial and not using copy/paste. This will help you develop muscle memory and a stronger understanding.
 
 In Board's `renderSquare` method, change the code to pass a prop called `value` to the Square:
 
@@ -242,7 +242,7 @@ class Square extends React.Component {
 }
 ```
 
-If we click on a Square now, we should get an alert in our browser.
+If you click on a Square now, you should see an alert in your browser.
 
 >Note
 >
@@ -260,7 +260,7 @@ If we click on a Square now, we should get an alert in our browser.
 >}
 >```
 >
->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. It only fires after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
+>Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
 
 As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**.
 
@@ -294,7 +294,7 @@ class Square extends React.Component {
 Now we'll change the Square's `render` method to display the current state's value when clicked:
 
 * Replace `this.props.value` with `this.state.value` inside the `<button>` tag.
-* Replace the `() => alert()` event handler with `() => this.setState({value: 'X'})`.
+* Replace the `onClick={...}` event handler with `onClick={() => this.setState({value: 'X'})}`.
 * Put the `className` and `onClick` props on separate lines for better readability.
 
 After these changes, the `<button>` tag that is returned by the Square's `render` method looks like this:
@@ -356,7 +356,9 @@ We may think that Board should just ask each Square for the Square's state. Alth
 
 **To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.**
 
-Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out. We'll add a constructor to the Board and set the Board's initial state to contain an array with 9 nulls. These 9 nulls correspond to the 9 squares:
+Lifting state into a parent component is common when React components are refactored -- let's take this opportunity to try it out.
+
+Add a constructor to the Board and set the Board's initial state to contain an array of 9 nulls corresponding to the 9 squares:
 
 ```javascript{2-7}
 class Board extends React.Component {
@@ -370,35 +372,9 @@ class Board extends React.Component {
   renderSquare(i) {
     return <Square value={i} />;
   }
-
-  render() {
-    const status = 'Next player: X';
-
-    return (
-      <div>
-        <div className="status">{status}</div>
-        <div className="board-row">
-          {this.renderSquare(0)}
-          {this.renderSquare(1)}
-          {this.renderSquare(2)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(3)}
-          {this.renderSquare(4)}
-          {this.renderSquare(5)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(6)}
-          {this.renderSquare(7)}
-          {this.renderSquare(8)}
-        </div>
-      </div>
-    );
-  }
-}
 ```
 
-When we fill the board in later, the board will look something like this:
+When we fill the board in later, the `this.state.squares` array will look something like this:
 
 ```javascript
 [
@@ -432,7 +408,7 @@ Each Square will now receive a `value` prop that will either be `'X'`, `'O'`, or
 
 Next, we need to change what happens when a Square is clicked. The Board component now maintains which squares are filled. We need to create a way for the Square to update the Board's state. Since state is considered to be private to a component that defines it, we cannot update the Board's state directly from Square.
 
-To maintain the Board's state's privacy, we'll pass down a function from the Board to the Square. This function will get called when a Square is clicked. We'll change the `renderSquare` method in Board to:
+Instead, we'll pass down a function from the Board to the Square, and we'll have Square call that function when a square is clicked. We'll change the `renderSquare` method in Board to:
 
 ```javascript{5}
   renderSquare(i) {
@@ -478,11 +454,11 @@ When a Square is clicked, the `onClick` function provided by the Board is called
 2. When the button is clicked, React will call the `onClick` event handler that is defined in Square's `render()` method.
 3. This event handler calls `this.props.onClick()`. The Square's `onClick` prop was specified by the Board.
 4. Since the Board passed `onClick={() => this.handleClick(i)}` to Square, the Square calls `this.handleClick(i)` when clicked.
-5. We have not defined the `handleClick()` method yet, so our code crashes.
+5. We have not defined the `handleClick()` method yet, so our code crashes. If you click a square now, you should see a red error screen saying something like "this.handleClick is not a function".
 
 >Note
 >
->The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could name the Square's `onClick` prop or Board's `handleClick` method differently. In React, however, it is a convention to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
+>The DOM `<button>` element's `onClick` attribute has a special meaning to React because it is a built-in component. For custom components like Square, the naming is up to you. We could give any name to the Square's `onClick` prop or Board's `handleClick` method, and the code would work the same. In React, it's conventional to use `on[Event]` names for props which represent events and `handle[Event]` for the methods which handle the events.
 
 When we try to click a Square, we should get an error because we haven't defined `handleClick` yet. We'll now add `handleClick` to the Board class:
 
@@ -539,7 +515,7 @@ class Board extends React.Component {
 
 **[View the full code at this point](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
 
-After these changes, we're again able to click on the Squares to fill them. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
+After these changes, we're again able to click on the Squares to fill them, the same as we had before. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.
 
 Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they're clicked. In React terms, the Square components are now **controlled components**. The Board has full control over them.
 
@@ -581,7 +557,7 @@ Detecting changes in mutable objects is difficult because they are modified dire
 
 Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed.
 
-#### Determining When to Re-render in React {#determining-when-to-re-render-in-react}
+#### Determining When to Re-Render in React {#determining-when-to-re-render-in-react}
 
 The main benefit of immutability is that it helps you build _pure components_ in React. Immutable data can easily determine if changes have been made which helps to determine when a component requires re-rendering.
 
@@ -611,7 +587,7 @@ We have changed `this.props` to `props` both times it appears.
 
 >Note
 >
->When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides). In a class, we used an arrow function to access the correct `this` value, but in a function component we don't need to worry about `this`.
+>When we modified the Square to be a function component, we also changed `onClick={() => this.props.onClick()}` to a shorter `onClick={props.onClick}` (note the lack of parentheses on *both* sides).
 
 ### Taking Turns {#taking-turns}
 
@@ -643,7 +619,9 @@ Each time a player moves, `xIsNext` (a boolean) will be flipped to determine whi
   }
 ```
 
-With this change, "X"s and "O"s can take turns. Let's also change the "status" text in Board's `render` so that it displays which player has the next turn:
+With this change, "X"s and "O"s can take turns. Try it!
+
+Let's also change the "status" text in Board's `render` so that it displays which player has the next turn:
 
 ```javascript{2}
   render() {
@@ -714,7 +692,7 @@ class Board extends React.Component {
 
 ### Declaring a Winner {#declaring-a-winner}
 
-Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. We can determine a winner by adding this helper function to the end of the file:
+Now that we show which player's turn is next, we should also show when the game is won and there are no more turns to make. Copy this helper function and paste it at the end of the file:
 
 ```javascript
 function calculateWinner(squares) {
@@ -738,6 +716,8 @@ function calculateWinner(squares) {
 }
 ```
 
+Given an array of 9 squares, this function will check for a winner and return `'X'`, `'O'`, or `null` as appropriate.
+
 We will call `calculateWinner(squares)` in the Board's `render` function to check if a player has won. If a player has won, we can display text such as "Winner: X" or "Winner: O". We'll replace the `status` declaration in Board's `render` function with this code:
 
 ```javascript{2-8}

From 9e20211214b6e02c4178d5e123abe6dbd1a4bea5 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Sat, 2 Mar 2019 21:46:01 -0800
Subject: [PATCH 02/18] Update languages page (#1771)

* update languages page

* reset languages.yml

* whoops
---
 content/languages.yml | 40 ++++++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/content/languages.yml b/content/languages.yml
index 7790945a8..ee7aa00c0 100644
--- a/content/languages.yml
+++ b/content/languages.yml
@@ -1,7 +1,7 @@
 # Status enums indicate what percentage of "core" content has been translated:
-# 0: Incomplete (0–49%)
-# 1: Partially complete (50–94%)
-# 2: Complete (95–100%)
+# 0: Incomplete (0-49%)
+# 1: Partially complete (50-99%)
+# 2: Complete (100%)
 
 - name: English
   translated_name: English
@@ -27,6 +27,10 @@
   translated_name: Deutsch
   code: de
   status: 0
+- name: Greek
+  translated_name: Ελληνικά
+  code: el
+  status: 0
 - name: Spanish
   translated_name: Español
   code: es
@@ -38,6 +42,10 @@
 - name: French
   translated_name: Français
   code: fr
+  status: 1
+- name: Gujarati
+  translated_name: ગુજરાતી
+  code: gu
   status: 0
 - name: Hebrew
   translated_name: עברית
@@ -62,11 +70,23 @@
 - name: Japanese
   translated_name: 日本語
   code: ja
-  status: 1
+  status: 2
+- name: Central Khmer
+  translated_name: ភាសាខ្មែរ
+  code: km
+  status: 0
 - name: Korean
   translated_name: 한국어
   code: ko
   status: 0
+- name: Kurdish
+  translated_name: کوردی‎
+  code: ku
+  status: 0
+- name: Lithuanian
+  translated_name: Lietuvių kalba
+  code: lt
+  status: 0
 - name: Malayalam
   translated_name: മലയാളം
   code: ml
@@ -98,7 +118,7 @@
 - name: Russian
   translated_name: Русский
   code: ru
-  status: 0
+  status: 1
 - name: Sinhala
   translated_name: සිංහල
   code: si
@@ -107,6 +127,10 @@
   translated_name: தமிழ்
   code: ta
   status: 0
+- name: Telugu
+  translated_name: తెలుగు
+  code: te
+  status: 0
 - name: Turkish
   translated_name: Türkçe
   code: tr
@@ -114,6 +138,10 @@
 - name: Ukrainian
   translated_name: Українська
   code: uk
+  status: 1
+- name: Urdu
+  translated_name: اردو
+  code: ur
   status: 0
 - name: Uzbek
   translated_name: Oʻzbekcha
@@ -126,7 +154,7 @@
 - name: Simplified Chinese
   translated_name: 简体中文
   code: zh-hans
-  status: 0
+  status: 1
 - name: Traditional Chinese
   translated_name: 繁體中文
   code: zh-hant

From 8803c6375b153af39a850822d844db94ea4c9b0a Mon Sep 17 00:00:00 2001
From: Raed CHAMMAM <RaedsLab@users.noreply.github.com>
Date: Sun, 3 Mar 2019 08:21:23 +0100
Subject: [PATCH 03/18] Fix CRA code splitting link (#1765)

---
 content/docs/code-splitting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index c0985e92c..32483c5f2 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -102,7 +102,7 @@ import("./math").then(math => {
 
 When Webpack comes across this syntax, it automatically starts code-splitting
 your app. If you're using Create React App, this is already configured for you
-and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
+and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
 out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
 
 If you're setting up Webpack yourself, you'll probably want to read Webpack's

From c4277f85fcd64529b747db8a19c9a70b0ccea4c9 Mon Sep 17 00:00:00 2001
From: Soroush Torkzadeh <soroush.torkzadeh@gmail.com>
Date: Mon, 4 Mar 2019 00:46:29 +0330
Subject: [PATCH 04/18] Add some notes about picking a page in CONTRIBUTING.md

---
 CONTRIBUTING.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 95b6c2b39..836ae72da 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -3,6 +3,19 @@
 از علاقه شما برای توسعه اسناد ری‌اکت به زبان فارسی سپاسگذاریم و این برای ما ارزشمند است. برای شروع آماده‌اید؟
 </p>
 <h2 dir="rtl">
+یک صفحه را انتخاب کنید
+</h2>
+<p dir="rtl">
+در توضیحات <a href="https://github.com/reactjs/fa.reactjs.org/issues/1">موضوع 1#</a> لیست صفحاتی که نیاز به ترجمه دارد آورده‌ شده‌است. اولویت ما شروع از صفحات Core Pages، با ترتیبی است که مشخص شده‌است. یکی از صفحاتی را که به موضوع آن علاقه‌مند هستید را برای شروع انتخاب کنید.
+</p>
+<p dir="rtl">
+<b>نکته:</b>&nbsp;ترجمه صفحاتی که ✅ دارند انجام شده‌‌است.
+اگر شناسه کاربری گیت‌هاب شخصی کنار عنوان صفحه درج شده‌است، ترجمه آن صفحه به عهده اوست.
+</p>
+<p dir="rtl">
+با نوشتن یک کامنت روی <a href="https://github.com/reactjs/fa.reactjs.org/issues/1">موضوع 1#</a>، به نگاه‌دارندگان اطلاع دهید که تمایل دارید روی ترجمه چه صفحه‌ای کار کنید. پس از تایید، نام‌کاربری گیت‌هاب شما روبروی آن درج و به ترجمه آن صفحه به شما واگذار می‌شود.
+</p>
+<h2 dir="rtl">
 یک شاخه بسازید
 </h2>
 <p dir="rtl">

From 04c85939bfde0ad49c86702971926a8fd3489ac7 Mon Sep 17 00:00:00 2001
From: Soroush Torkzadeh <soroush.torkzadeh@gmail.com>
Date: Mon, 4 Mar 2019 19:10:26 +0330
Subject: [PATCH 05/18] Apply the two fixes suggested by @masoud-bahrami

---
 CONTRIBUTING.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 836ae72da..61c9be73c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -9,11 +9,11 @@
 در توضیحات <a href="https://github.com/reactjs/fa.reactjs.org/issues/1">موضوع 1#</a> لیست صفحاتی که نیاز به ترجمه دارد آورده‌ شده‌است. اولویت ما شروع از صفحات Core Pages، با ترتیبی است که مشخص شده‌است. یکی از صفحاتی را که به موضوع آن علاقه‌مند هستید را برای شروع انتخاب کنید.
 </p>
 <p dir="rtl">
-<b>نکته:</b>&nbsp;ترجمه صفحاتی که ✅ دارند انجام شده‌‌است.
+<b>نکته:</b>&nbsp;ترجمه صفحاتی که با علامت ✅ مشخص شده‌اند، انجام شده‌‌است.
 اگر شناسه کاربری گیت‌هاب شخصی کنار عنوان صفحه درج شده‌است، ترجمه آن صفحه به عهده اوست.
 </p>
 <p dir="rtl">
-با نوشتن یک کامنت روی <a href="https://github.com/reactjs/fa.reactjs.org/issues/1">موضوع 1#</a>، به نگاه‌دارندگان اطلاع دهید که تمایل دارید روی ترجمه چه صفحه‌ای کار کنید. پس از تایید، نام‌کاربری گیت‌هاب شما روبروی آن درج و به ترجمه آن صفحه به شما واگذار می‌شود.
+با نوشتن یک کامنت روی <a href="https://github.com/reactjs/fa.reactjs.org/issues/1">موضوع 1#</a>، به نگاه‌دارندگان اطلاع دهید که تمایل دارید روی ترجمه چه صفحه‌ای کار کنید. پس از تایید، نام‌کاربری گیت‌هاب شما روبروی آن درج و ترجمه آن صفحه به شما واگذار می‌شود.
 </p>
 <h2 dir="rtl">
 یک شاخه بسازید

From 03cb324bd9aab11b97bda874ea703b1b2b0e5ba0 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Thu, 7 Mar 2019 18:01:30 +0330
Subject: [PATCH 06/18] initial persian translation - first draft

---
 content/docs/forms.md | 77 +++++++++++++++++++++----------------------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1a8b599d5..da771c57c 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 id: forms
-title: Forms
+title: کار با فرم ها
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
+المان های فرم HTML در نحوه ی کارکرد با المان های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المان ها وضعیت ورودی خود را به صورت داخلی نگه داری می کنند. برای مثال، این کد فرم که به صورت HTML ساده نوشته شده است از کاربر یک نام دریافت می کند:
 
 ```html
 <form>
@@ -21,15 +21,15 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 </form>
 ```
 
-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
+عملکرد این فرم به صورت رفتار پیش فرض فرم HTML می باشد که کاربر پس از ثبت فرم به صفحه ی جدید انتقال پیدا می کند. اگر این رفتار را در ری اکت می خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه حل مناسب تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت های کنترل شده" می باشد.
 
-## Controlled Components {#controlled-components}
+## کامپوننت های کنترل شده {#controlled-components}
 
-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
+در HTML، المان های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه می دارند و بر اساس ورودی کاربر آن را به روز رسانی می کنند. در ری اکت، به طور معمول وضعیت قابل تغییر در state کامپوننت ها نگه داری می شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) می توان مقادیر ذخیره شده آن را بروز رسانی کرد.
 
-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
+ما می توانیم با قرار دادن قابلیت state کامپوننت در ری اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر می باشد. المان ورودی داده در فرم که مقادیر وارد شده آن توسط ری اکت به این صورت کنترل می شود را "کامپوننت کنترل شده" می نامند.
 
-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
+به عنوان مثال، اگر بخواهیم در کد بالا پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، می توانیم فرم را به صورت یک کامپوننت کنترل شده به این صورت بنویسیم:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,11 +64,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
+از آنجایی که خصوصیت `value` در المان فرم ما ست شده است، مقداری که نمایش داده می شود همیشه مقداری که در `this.state.value` نگه داشته می شود خواهد بود، که باعث می شود state کامپوننت در ری اکت به عنوان منبع نگه داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر اجرا می شود و مقدار ذخیره شده در state ری اکت را بروز رسانی می کند، مقدار نمایش داده شده در المان هم به همراه تایپ کردن کاربر بروز رسانی می شود.
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
+در کامپوننت های کنترل شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف می کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان می کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت می نویسیم:
 
 ```javascript{2}
 handleChange(event) {
@@ -76,9 +76,9 @@ handleChange(event) {
 }
 ```
 
-## The textarea Tag {#the-textarea-tag}
+## تگ textarea {#the-textarea-tag}
 
-In HTML, a `<textarea>` element defines its text by its children:
+در HTML، متنی که در المان `<textarea>` نمایش داده می شود، بین تگ باز و بسته این المان تعریف می شود:
 
 ```html
 <textarea>
@@ -86,7 +86,7 @@ In HTML, a `<textarea>` element defines its text by its children:
 </textarea>
 ```
 
-In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
+در ری اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده می کند. از این رو، فرمی که دارای المان `<textarea>` هست را می توان خیلی شبیه به فرم با ورودی های تک خطی نوشت: 
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
+توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه می شود، بنابراین المان متن چند خطی، حاوی متن در رندر اولیه می باشد.
 
-## The select Tag {#the-select-tag}
+## تگ select {#the-select-tag}
 
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
+در HTML، تگ `<select>` یک منو کشویی نمایش می دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم های مختلف نمایش می دهد:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 </select>
 ```
 
-Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
+توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المان تعریف شده است. ری اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده می کند. این روش در کامپوننت های کنترل شده کار را راحت تر می کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -178,33 +178,33 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
+در کل، این نوع ساختار باعث می شود که تمام المان های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت می کنند که می توان با آن عملکرد کامپوننت کنترل شده را پیاده سازی کنید.
 
-> Note
+> نکته
 >
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> شما می توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه می دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
 
-## The file input Tag {#the-file-input-tag}
+## تگ file input {#the-file-input-tag}
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+در HTML، کد `<input type="file">` فیلد ورودی می سازد که به کاربر اجازه می دهد یک یا چند فایل را از محل ذخیره سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوااسکریپت بر روی فایل های انتخابی عملیاتی انجام شود.
 
 ```html
 <input type="file" />
 ```
 
-Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
+به دلیل اینکه مقدار این المان فقط قابل خواندن می باشد، این المان در ری اکت یک کامپوننت **کنترل نشده** می باشد. در مورد این کامپوننت و دیگر کامپوننت های کنترل نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
 
-## Handling Multiple Inputs {#handling-multiple-inputs}
+## به کار بردن چند فیلد ورودی {#handling-multiple-inputs}
 
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
+زمانی که نیاز دارید چند فیلد ورودی `input` کنترل شده به کار ببرید، می توانید یک خصوصیت `name` برای هر یک از المان ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد می توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به روز شود.
 
-For example:
+برای مثال:
 
 ```javascript{15,18,28,37}
 class Reservation extends React.Component {
@@ -254,9 +254,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
+توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) نحوه نگارش ES6 جهت به روز کردن مقدار ذخیره شده مرتبط با کلید هم نام با فیلد ورودی استفاده شده است:
 
 ```js{2}
 this.setState({
@@ -264,21 +264,20 @@ this.setState({
 });
 ```
 
-It is equivalent to this ES5 code:
+معادل عملیات بالا به صورت کد ES5 به این صورت می باشد:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
+همچنین از آن جایی که تابع `setState()` به صورت خودکار می تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت های به روز شده را زمان صدا زدن این تابع ارسال کنیم.
 
-Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
+## فیلد ورودی کنترل شده با مقدار Null {#controlled-input-null-value}
 
-## Controlled Input Null Value {#controlled-input-null-value}
+تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر می شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل تغییر توسط کاربر می باشد، ممکن است مقدار خصوصیت `value` را به صورت تصادفی `undefined` و یا `null` ست کرده باشید.
 
-Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
-
-The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
+نمونه کد زیر این رفتار را نمایش می دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل تغییر نمی باشد، اما پس از گذشت زمان کوتاه قابل تغییر می شود.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);
@@ -289,10 +288,10 @@ setTimeout(function() {
 
 ```
 
-## Alternatives to Controlled Components {#alternatives-to-controlled-components}
+## راه حل های جایگزین کامپوننت های کنترل شده {#alternatives-to-controlled-components}
 
-It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
+در بعضی مواقع استفاده از کامپوننت های کنترل شده ممکن است خسته کننده باشد، چون که شما باید به ازای هر event که به هر شکل داده ها را تغییر می دهد یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه دارنده وضعیت فیلد های ورودی در ری اکت ارسال کنید. پیاده سازی این رفتار به مرور می تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری اکت تبدیل کنید و یا برنامه توسعه یافته با ری اکت را با یک برنامه غیر ری اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت های کنترل نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد های ورودی فرم می باشد.
 
-## Fully-Fledged Solutions {#fully-fledged-solutions}
+## راه حل تمام عیار {#fully-fledged-solutions}
 
-If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
+اگر به دنبال یک راه حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت کردن بر فیلد های طی شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب ترین گزینه ها می باشد. با این حال این راه حل بر اساس اصول کامپوننت های کنترل شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.

From 296e208fddc2643b2645a37422dae72e7c101cf5 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Sat, 9 Mar 2019 19:25:36 +0330
Subject: [PATCH 07/18] fixed issues regarding visual formatting and
 translation

---
 content/docs/forms.md | 64 +++++++++++++++++++++----------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index da771c57c..25fa6a42e 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 id: forms
-title: کار با فرم ها
+title: فرم‌ها
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-المان های فرم HTML در نحوه ی کارکرد با المان های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المان ها وضعیت ورودی خود را به صورت داخلی نگه داری می کنند. برای مثال، این کد فرم که به صورت HTML ساده نوشته شده است از کاربر یک نام دریافت می کند:
+المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت ورودی خود را ‌به‌صورت داخلی ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
 
 ```html
 <form>
@@ -21,15 +21,15 @@ redirect_from:
 </form>
 ```
 
-عملکرد این فرم به صورت رفتار پیش فرض فرم HTML می باشد که کاربر پس از ثبت فرم به صفحه ی جدید انتقال پیدا می کند. اگر این رفتار را در ری اکت می خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه حل مناسب تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت های کنترل شده" می باشد.
+عملکرد این فرم ‌به‌صورت رفتار پیش فرض فرم HTML ‌می‌باشد که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند. اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه‌حل مناسب‌تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
 
-## کامپوننت های کنترل شده {#controlled-components}
+## کامپوننت‌های کنترل‌شده {#controlled-components}
 
-در HTML، المان های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه می دارند و بر اساس ورودی کاربر آن را به روز رسانی می کنند. در ری اکت، به طور معمول وضعیت قابل تغییر در state کامپوننت ها نگه داری می شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) می توان مقادیر ذخیره شده آن را بروز رسانی کرد.
+در HTML، المنت‌های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه ‌می‌دارند و بر اساس ورودی کاربر آن را به‌روز رسانی ‌می‌کنند. در ری‌اکت، به طور معمول وضعیت قابل‌تغییر در state کامپوننت‌ها ‌نگه‌داری ‌می‌شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) ‌می‌توان مقادیر ذخیره‌شده آن را بروز رسانی کرد.
 
-ما می توانیم با قرار دادن قابلیت state کامپوننت در ری اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر می باشد. المان ورودی داده در فرم که مقادیر وارد شده آن توسط ری اکت به این صورت کنترل می شود را "کامپوننت کنترل شده" می نامند.
+ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری‌اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر ‌می‌باشد. المنت ورودی داده در فرم که مقادیر وارد شده آن توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
 
-به عنوان مثال، اگر بخواهیم در کد بالا پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، می توانیم فرم را به صورت یک کامپوننت کنترل شده به این صورت بنویسیم:
+به عنوان مثال، اگر بخواهیم در کد پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده به این صورت بنویسیم:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,11 +64,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-از آنجایی که خصوصیت `value` در المان فرم ما ست شده است، مقداری که نمایش داده می شود همیشه مقداری که در `this.state.value` نگه داشته می شود خواهد بود، که باعث می شود state کامپوننت در ری اکت به عنوان منبع نگه داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر اجرا می شود و مقدار ذخیره شده در state ری اکت را بروز رسانی می کند، مقدار نمایش داده شده در المان هم به همراه تایپ کردن کاربر بروز رسانی می شود.
+از آنجایی که خصوصیت `value` در المنت فرم ما ست شده است، مقداری که نمایش داده ‌می‌شود همیشه مقداری که در `this.state.value` نگه داشته ‌می‌شود خواهد بود، که باعث ‌می‌شود state کامپوننت در ری‌اکت به عنوان منبع ‌نگه‌داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر، اجرا ‌می‌شود و مقدار ذخیره‌شده در state ری‌اکت را بروز رسانی ‌می‌کند، مقدار نمایش داده شده در المنت هم به همراه تایپ کردن کاربر بروز رسانی ‌می‌شود.
 
-در کامپوننت های کنترل شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف می کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان می کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت می نویسیم:
+در کامپوننت‌های کنترل‌شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف ‌می‌کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان ‌می‌کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت ‌می‌نویسیم:
 
 ```javascript{2}
 handleChange(event) {
@@ -78,7 +78,7 @@ handleChange(event) {
 
 ## تگ textarea {#the-textarea-tag}
 
-در HTML، متنی که در المان `<textarea>` نمایش داده می شود، بین تگ باز و بسته این المان تعریف می شود:
+در HTML، متنی که در المنت `<textarea>` نمایش داده ‌می‌شود، بین تگ باز و بسته این المنت تعریف ‌می‌شود:
 
 ```html
 <textarea>
@@ -86,7 +86,7 @@ handleChange(event) {
 </textarea>
 ```
 
-در ری اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده می کند. از این رو، فرمی که دارای المان `<textarea>` هست را می توان خیلی شبیه به فرم با ورودی های تک خطی نوشت: 
+در ری‌اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده ‌می‌کند. از این رو، فر‌می‌که دارای المنت `<textarea>` هست را ‌می‌توان خیلی شبیه به فرم با ورودی‌های تک‌خطی نوشت: 
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه می شود، بنابراین المان متن چند خطی، حاوی متن در رندر اولیه می باشد.
+توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه ‌می‌شود، بنابراین المنت متن چند خطی، حاوی متن در رندر اولیه ‌می‌باشد.
 
 ## تگ select {#the-select-tag}
 
-در HTML، تگ `<select>` یک منو کشویی نمایش می دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم های مختلف نمایش می دهد:
+در HTML، تگ `<select>` یک منو کشویی نمایش ‌می‌دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم‌های مختلف نمایش ‌می‌دهد:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المان تعریف شده است. ری اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده می کند. این روش در کامپوننت های کنترل شده کار را راحت تر می کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
+توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -178,13 +178,13 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-در کل، این نوع ساختار باعث می شود که تمام المان های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت می کنند که می توان با آن عملکرد کامپوننت کنترل شده را پیاده سازی کنید.
+در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن عملکرد کامپوننت کنترل‌شده را پیاده سازی کنید.
 
 > نکته
 >
-> شما می توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه می دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
+> شما ‌می‌توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه ‌می‌دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
@@ -192,17 +192,17 @@ class FlavorForm extends React.Component {
 
 ## تگ file input {#the-file-input-tag}
 
-در HTML، کد `<input type="file">` فیلد ورودی می سازد که به کاربر اجازه می دهد یک یا چند فایل را از محل ذخیره سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوااسکریپت بر روی فایل های انتخابی عملیاتی انجام شود.
+در HTML، کد `<input type="file">` فیلد ورودی ‌می‌سازد که به کاربر اجازه ‌می‌دهد یک یا چند فایل را از محل ذخیره‌سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوا اسکریپت بر روی فایل‌های انتخابی عملیاتی انجام شود.
 
 ```html
 <input type="file" />
 ```
 
-به دلیل اینکه مقدار این المان فقط قابل خواندن می باشد، این المان در ری اکت یک کامپوننت **کنترل نشده** می باشد. در مورد این کامپوننت و دیگر کامپوننت های کنترل نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
+به دلیل اینکه مقدار این المنت فقط قابل‌خواندن ‌می‌باشد، این المنت در ری‌اکت یک کامپوننت **کنترل‌نشده** ‌می‌باشد. در مورد این کامپوننت و دیگر کامپوننت‌های کنترل‌نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
 
 ## به کار بردن چند فیلد ورودی {#handling-multiple-inputs}
 
-زمانی که نیاز دارید چند فیلد ورودی `input` کنترل شده به کار ببرید، می توانید یک خصوصیت `name` برای هر یک از المان ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد می توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به روز شود.
+زمانی که نیاز دارید چند فیلد ورودی `input` کنترل‌شده به کار ببرید، ‌می‌توانید یک خصوصیت `name` برای هر یک از المنت‌ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد ‌می‌توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به‌روز شود.
 
 برای مثال:
 
@@ -254,9 +254,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) نحوه نگارش ES6 جهت به روز کردن مقدار ذخیره شده مرتبط با کلید هم نام با فیلد ورودی استفاده شده است:
+توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) شیوه‌نگارش ES6 جهت به‌روز کردن مقدار ذخیره‌شده مرتبط با کلید هم‌نام با فیلد ورودی استفاده شده است:
 
 ```js{2}
 this.setState({
@@ -264,20 +264,20 @@ this.setState({
 });
 ```
 
-معادل عملیات بالا به صورت کد ES5 به این صورت می باشد:
+معادل عملیات بالا ‌به‌صورت کد ES5 به این صورت ‌می‌باشد:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
-همچنین از آن جایی که تابع `setState()` به صورت خودکار می تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت های به روز شده را زمان صدا زدن این تابع ارسال کنیم.
+همچنین از آن جایی که تابع `setState()` ‌به‌صورت خودکار ‌می‌تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت‌های به‌روز شده را زمان صدا زدن این تابع ارسال کنیم.
 
-## فیلد ورودی کنترل شده با مقدار Null {#controlled-input-null-value}
+## فیلد ورودی کنترل‌شده با مقدار Null {#controlled-input-null-value}
 
-تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر می شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل تغییر توسط کاربر می باشد، ممکن است مقدار خصوصیت `value` را به صورت تصادفی `undefined` و یا `null` ست کرده باشید.
+تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر ‌می‌شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل‌تغییر توسط کاربر ‌می‌باشد، ممکن است مقدار خصوصیت `value` را ‌به‌صورت تصادفی `undefined` و یا `null` ست کرده باشید.
 
-نمونه کد زیر این رفتار را نمایش می دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل تغییر نمی باشد، اما پس از گذشت زمان کوتاه قابل تغییر می شود.)
+نمونه کد زیر این رفتار را نمایش ‌می‌دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل‌تغییر نمی‌باشد، اما پس از گذشت زمان کوتاه قابل‌تغییر ‌می‌شود.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);
@@ -288,10 +288,10 @@ setTimeout(function() {
 
 ```
 
-## راه حل های جایگزین کامپوننت های کنترل شده {#alternatives-to-controlled-components}
+## راه‌حل‌های جایگزین کامپوننت‌های کنترل‌شده {#alternatives-to-controlled-components}
 
-در بعضی مواقع استفاده از کامپوننت های کنترل شده ممکن است خسته کننده باشد، چون که شما باید به ازای هر event که به هر شکل داده ها را تغییر می دهد یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه دارنده وضعیت فیلد های ورودی در ری اکت ارسال کنید. پیاده سازی این رفتار به مرور می تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری اکت تبدیل کنید و یا برنامه توسعه یافته با ری اکت را با یک برنامه غیر ری اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت های کنترل نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد های ورودی فرم می باشد.
+در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده ممکن است خسته‌کننده باشد، چون که شما باید به ازای هر (event) که به هر شکل داده‌ها را تغییر ‌می‌دهد، یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه‌دارنده وضعیت فیلد‌های ورودی در ری‌اکت ارسال کنید. پیاده سازی این رفتار به مرور ‌می‌تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری‌اکت تبدیل کنید و یا برنامه توسعه یافته با ری‌اکت را با یک برنامه غیر ری‌اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد‌های ورودی فرم ‌می‌باشد.
 
-## راه حل تمام عیار {#fully-fledged-solutions}
+## راه‌حل تمام‌عیار {#fully-fledged-solutions}
 
-اگر به دنبال یک راه حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت کردن بر فیلد های طی شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب ترین گزینه ها می باشد. با این حال این راه حل بر اساس اصول کامپوننت های کنترل شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.
+اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.

From b84384e772a49d0127fb6846ddbe3ea5991f629a Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 16:34:48 +0330
Subject: [PATCH 08/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 25fa6a42e..f0df9e1c0 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -21,7 +21,7 @@ redirect_from:
 </form>
 ```
 
-عملکرد این فرم ‌به‌صورت رفتار پیش فرض فرم HTML ‌می‌باشد که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند. اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از مواقع راه‌حل مناسب‌تر این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
+این فرم رفتار پیش فرض فرم HTML  که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند را داراست . اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از موارد راه‌حل مناسب‌ این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
 
 ## کامپوننت‌های کنترل‌شده {#controlled-components}
 

From bdc71f5b5d03ec7ca81a950ccb3f75955e98809b Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:11:44 +0330
Subject: [PATCH 09/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f0df9e1c0..b59a43d31 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -29,7 +29,7 @@ redirect_from:
 
 ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری‌اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر ‌می‌باشد. المنت ورودی داده در فرم که مقادیر وارد شده آن توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
 
-به عنوان مثال، اگر بخواهیم در کد پس از ثبت فرم توسط کاربر، نام وارد شده در محیط کنسول نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده به این صورت بنویسیم:
+به عنوان مثال، اگر بخواهیم در مثال قبل در زمان ثبت فرم، نام نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده بنویسیم:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {

From 954bf4392c0e151272302c31069490e91a91f678 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:39:03 +0330
Subject: [PATCH 10/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index b59a43d31..310c09987 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -86,7 +86,7 @@ handleChange(event) {
 </textarea>
 ```
 
-در ری‌اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده ‌می‌کند. از این رو، فر‌می‌که دارای المنت `<textarea>` هست را ‌می‌توان خیلی شبیه به فرم با ورودی‌های تک‌خطی نوشت: 
+در عوض در ری‌اکت، تگ `<textarea>` از خصوصیت `value` برای این کار استفاده ‌می‌کند. با این روش، فر‌می‌ که دارای المنت `<textarea>` هست را ‌می‌توان خیلی شبیه به یک فرم با ورودی‌های تک‌خطی نوشت: 
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {

From b5146bde8ef1272812feb02020af94cc440be465 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:44:16 +0330
Subject: [PATCH 11/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 310c09987..fb643efee 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -127,7 +127,7 @@ class EssayForm extends React.Component {
 
 ## تگ select {#the-select-tag}
 
-در HTML، تگ `<select>` یک منو کشویی نمایش ‌می‌دهد. برای مثال، کد HTML زیر یک منو کشویی از طعم‌های مختلف نمایش ‌می‌دهد:
+در HTML، تگ `<select>` یک لیست کشویی می‌سازد. برای مثال، کد HTML زیر یک لیست کشویی از طعم‌ها می‌سازد:
 
 ```html
 <select>

From 90043ada53f0e7a3db810fc2bd8100cd48db6bc6 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 17:59:51 +0330
Subject: [PATCH 12/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index fb643efee..1dd13b547 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -292,6 +292,6 @@ setTimeout(function() {
 
 در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده ممکن است خسته‌کننده باشد، چون که شما باید به ازای هر (event) که به هر شکل داده‌ها را تغییر ‌می‌دهد، یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه‌دارنده وضعیت فیلد‌های ورودی در ری‌اکت ارسال کنید. پیاده سازی این رفتار به مرور ‌می‌تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری‌اکت تبدیل کنید و یا برنامه توسعه یافته با ری‌اکت را با یک برنامه غیر ری‌اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد‌های ورودی فرم ‌می‌باشد.
 
-## راه‌حل تمام‌عیار {#fully-fledged-solutions}
+## راه‌حل‌های تمام‌عیار {#fully-fledged-solutions}
 
 اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.

From d39a976202dcc4b23443b0c38b0d55ec21bd1403 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 18:00:39 +0330
Subject: [PATCH 13/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1dd13b547..610453776 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -277,7 +277,7 @@ this.setState(partialState);
 
 تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر ‌می‌شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل‌تغییر توسط کاربر ‌می‌باشد، ممکن است مقدار خصوصیت `value` را ‌به‌صورت تصادفی `undefined` و یا `null` ست کرده باشید.
 
-نمونه کد زیر این رفتار را نمایش ‌می‌دهد. (در ابتدا فیلد ورودی قفل است و مقدار آن قابل‌تغییر نمی‌باشد، اما پس از گذشت زمان کوتاه قابل‌تغییر ‌می‌شود.)
+نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);

From 1a06bf4d275bb8208f2d1527bb597d58feb4165f Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 18:02:13 +0330
Subject: [PATCH 14/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 610453776..0b9dbd813 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -275,7 +275,7 @@ this.setState(partialState);
 
 ## فیلد ورودی کنترل‌شده با مقدار Null {#controlled-input-null-value}
 
-تعریف خصوصیت `value` با رشته ای از متن در یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری از تغییر مقدار نمایش داده شده فیلد ورودی توسط کاربر ‌می‌شود مگر اینکه خودتان این عملکرد را نخواهید. اگر خصوصیت `value` را تعریف کرده باشید و فیلد ورودی هنوز قابل‌تغییر توسط کاربر ‌می‌باشد، ممکن است مقدار خصوصیت `value` را ‌به‌صورت تصادفی `undefined` و یا `null` ست کرده باشید.
+تعریف value روی prop یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری کاربر از تغییر ورودی ‌می‌شود مگر این که خودتان بخواهید. اگر خصوصیت `value` را تعریف کرده‌اید اما ورودی هنوز قابل‌ ویرایش است، ممکن است مقدار `value` را ‌به‌صورت تصادفی به `undefined` و یا `null` قرار داده باشید.
 
 نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)
 

From 20127c72511410485ff175c351678c87ad980b5b Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 20:45:27 +0330
Subject: [PATCH 15/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 0b9dbd813..f23c9038c 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
+توجه کنید که ابتدا گزینه Coconut  به خاطر خصوصیت `selected` انتخاب شده است. ری‌اکت به جای استفاده از خصوصیت `selected`، از خصوصیت `value` در تگ `select` ریشه استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده راحت‌تر است زیرا شما تنها نیاز به به‌روزرسانی آن در یک مکان دارید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {

From d5ff4209fff34c8e006168ba508c99d9c3a72d20 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Sun, 10 Mar 2019 20:55:25 +0330
Subject: [PATCH 16/18] Update content/docs/forms.md

Co-Authored-By: mjraadi <raadi@bitsnbytes.ir>
---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f23c9038c..6582509a9 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -180,7 +180,7 @@ class FlavorForm extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن عملکرد کامپوننت کنترل‌شده را پیاده سازی کنید.
+در کل، این نوع ساختار باعث ‌می‌شود که `<input type="text">`, `<textarea>` و `<select>`، همگی بسیار مشابه کار کنند. همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توانید با استفاده از آن کامپوننت کنترل‌شده را پیاده سازی کنید.
 
 > نکته
 >

From 75db61196e3b2f23bd6078b76e112523ba60f5f8 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Sun, 10 Mar 2019 21:28:36 +0330
Subject: [PATCH 17/18] updated translation locally

---
 content/docs/forms.md | 46 +++++++++++++++++++++----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 0b9dbd813..0718f4c68 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت ورودی خود را ‌به‌صورت داخلی ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
+المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت [ورودی] را در خود ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
 
 ```html
 <form>
@@ -21,13 +21,13 @@ redirect_from:
 </form>
 ```
 
-این فرم رفتار پیش فرض فرم HTML  که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند را داراست . اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بسیاری از موارد راه‌حل مناسب‌ این است که یک تابع جاوا اسکریپت به مقادیر وارد شده توسط کاربر دسترسی داشته باشد و به عملیات ثبت فرم رسیدگی کند. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
+این فرم رفتار پیش فرض فرم HTML  که کاربر پس از ثبت فرم به صفحه‌‌ی جدید انتقال پیدا ‌می‌کند را داراست . اگر این رفتار را در ری‌اکت ‌می‌خواهید نیاز به انجام هیچ تغییری ندارید. اما در بیشتر موارد، مناسب است که یک تابع جاوااسکریپت داشته‌باشیم که ثبت فرم را انجام می‌دهد و به داده‌هایی که کاربر در فرم وارد کرده است دسترسی دارد. روش استاندارد پیاده سازی این رفتار تکنیکی به نام "کامپوننت‌های کنترل‌شده" ‌می‌باشد.
 
 ## کامپوننت‌های کنترل‌شده {#controlled-components}
 
-در HTML، المنت‌های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه ‌می‌دارند و بر اساس ورودی کاربر آن را به‌روز رسانی ‌می‌کنند. در ری‌اکت، به طور معمول وضعیت قابل‌تغییر در state کامپوننت‌ها ‌نگه‌داری ‌می‌شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) ‌می‌توان مقادیر ذخیره‌شده آن را بروز رسانی کرد.
+در HTML، المنت‌های فرم مانند `<input>`, `<textarea>` و `<select>` , معمولا وضعیت داده وارد شده را در خود نگه ‌می‌دارند و بر اساس ورودی کاربر آن را به‌روز رسانی ‌می‌کنند. در ری‌اکت، معمولا وضعیت قابل‌تغییر در state کامپوننت‌ها ‌نگه‌داری ‌می‌شود، و فقط از طریق متد [`setState()`](/docs/react-component.html#setstate) به‌روز رسانی می‌شود.
 
-ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع مرجع وضعیت" این دو قابلیت را با هم ترکیب کنیم. سپس کامپوننت ری‌اکتی که وظیفه رندر کردن یک فرم را دارد، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر ‌می‌باشد. المنت ورودی داده در فرم که مقادیر وارد شده آن توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
+ما ‌می‌توانیم با قرار دادن قابلیت state کامپوننت در ری‌اکت به عنوان "تنها منبع حقیقت" [single source of truth] این دو را با هم ترکیب کنیم. آنگاه کامپوننت ری‌اکتی که فرم را رندر می‌کند، مشخص کننده نحوه عملکرد فرم در قبال ورودی کاربر نیز ‌می‌باشد. یک المنت فرم ورودی داده که مقدارش توسط ری‌اکت به این صورت کنترل ‌می‌شود را "کامپوننت کنترل‌شده" ‌می‌نامند.
 
 به عنوان مثال، اگر بخواهیم در مثال قبل در زمان ثبت فرم، نام نمایش داده شود، ‌می‌توانیم فرم را ‌به‌صورت یک کامپوننت کنترل‌شده بنویسیم:
 
@@ -66,9 +66,9 @@ class NameForm extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-از آنجایی که خصوصیت `value` در المنت فرم ما ست شده است، مقداری که نمایش داده ‌می‌شود همیشه مقداری که در `this.state.value` نگه داشته ‌می‌شود خواهد بود، که باعث ‌می‌شود state کامپوننت در ری‌اکت به عنوان منبع ‌نگه‌داری داده و وضعیت کامپوننت شود. همچنین به دلیل اینکه تابع `handleChange` پس از ورود هر کاراکتر توسط کاربر، اجرا ‌می‌شود و مقدار ذخیره‌شده در state ری‌اکت را بروز رسانی ‌می‌کند، مقدار نمایش داده شده در المنت هم به همراه تایپ کردن کاربر بروز رسانی ‌می‌شود.
+از آن‌جایی که خصوصیت value روی المنت فرم ما قرار گرفته‌است، مقدار نمایش داده‌شده همیشه `this.state.value` که باعث ‌می‌شود state ری‌اکت به عنوان منبع ‌نگه‌داری داده و وضعیت ‌باشد. از آن‌جایی که `handleChange` با هر فشردن کلید برای به‌روز رسانی state ری‌اکت اجرا می‌شود، مقدار نمایش داده‌شده هم با تایپ کردن کاربر به‌روز‌رسانی خواهد شد.
 
-در کامپوننت‌های کنترل‌شده، هر گونه عملیات تغییر و بروز رسانی state با یک تابع که چگونگی انجام این عملیات را تعریف ‌می‌کند در ارتباط است. این تابع روند تغییر و یا اعتبار سنجی ورودی کاربر را آسان ‌می‌کند. به عنوان مثال، اگر بخواهیم فیلد نام فقط با حروف بزرگ نمایش داده شود، تابع `handleChange` را به این صورت ‌می‌نویسیم:
+در یک کامپوننت کنترل‌شده، هر تغییر state یک تابع handler مرتبط خواهد داشت. این باعث سر راست شدن تغییر یا اعتبارسنجی ورودی کاربر خواهد شد. به عنوان مثال، اگر ما می‌خواستیم نوشتن نام‌ها را با حروف بزرگ اجباری کنیم، می توانستیم `handleChange` را به این صورت بنویسیم:
 
 ```javascript{2}
 handleChange(event) {
@@ -78,7 +78,7 @@ handleChange(event) {
 
 ## تگ textarea {#the-textarea-tag}
 
-در HTML، متنی که در المنت `<textarea>` نمایش داده ‌می‌شود، بین تگ باز و بسته این المنت تعریف ‌می‌شود:
+در HTML، یک المنت `<textarea>` مقدارش را بر اساس فرزندانش [متن بین تگ باز و بسته این المنت] تعریف می‌کند:
 
 ```html
 <textarea>
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-توجه کنید که `this.state.value` در تابع سازنده کلاس(constructor) مقدار دهی اولیه ‌می‌شود، بنابراین المنت متن چند خطی، حاوی متن در رندر اولیه ‌می‌باشد.
+توجه کنید که `this.state.value` در تابع سازنده کلاس (constructor) مقدار دهی اولیه ‌می‌شود، بنابراین در ابتدا textarea با متنی درون آن نمایش داده می‌شود.
 
 ## تگ select {#the-select-tag}
 
-در HTML، تگ `<select>` یک لیست کشویی می‌سازد. برای مثال، کد HTML زیر یک لیست کشویی از طعم‌ها می‌سازد:
+در HTML، تگ `<select>` یک لیست کشویی می‌سازد. برای مثال، این HTML یک لیست کشویی از طعم‌ها را می‌سازد:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک مکان به کار ببرید. برای مثال:
+توجه کنید که گزینه Coconut در رندر اولیه انتخاب شده است، چون که خصوصیت `selected` برای این المنت تعریف شده است. ری‌اکت به جای استفاده از خصوصیت `selected` در تگ `<option>`، از خصوصیت `value` در تگ `select` والد استفاده ‌می‌کند. این روش در کامپوننت‌های کنترل‌شده کار را راحت‌تر ‌می‌کند زیرا شما فقط باید آن را در یک جا به‌روز رسانی کنید. برای مثال:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -180,11 +180,11 @@ class FlavorForm extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن عملکرد کامپوننت کنترل‌شده را پیاده سازی کنید.
+در کل، این نوع ساختار باعث ‌می‌شود که تمام المنت‌های `<input type="text">`, `<textarea>` و `<select>`، عملکرد بسیار مشابهی داشته باشند. به این صورت که همگی یک خصوصیت `value` دریافت ‌می‌کنند که ‌می‌توان با آن یک کامپوننت کنترل‌شده را پیاده سازی کنید.
 
 > نکته
 >
-> شما ‌می‌توانید یک آرایه از مقادیر به خصوصیت `value` ارسال کنید که به شما اجازه ‌می‌دهد لیست کشویی `select` بسازید که قابلیت انتخاب چند گزینه را دارد:
+> شما ‌می‌توانید یک آرایه را به خصوصیت value پاس دهید که به شما اجازه انتخاب چندین گزینه در یک تگ select را می‌دهد:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
@@ -192,17 +192,17 @@ class FlavorForm extends React.Component {
 
 ## تگ file input {#the-file-input-tag}
 
-در HTML، کد `<input type="file">` فیلد ورودی ‌می‌سازد که به کاربر اجازه ‌می‌دهد یک یا چند فایل را از محل ذخیره‌سازی دستگاه کاربر انتخاب کند که پس از آن به یک سرور آپلود شود و یا از طریق  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوا اسکریپت بر روی فایل‌های انتخابی عملیاتی انجام شود.
+در HTML، یک `<input type="file">`  به کاربر اجازه می‌دهد که یک یا چند فایل را از محل ذخیره‌سازی دستگاه خود انتخاب کند تا روی سرور بارگذاری شود یا توسط  [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) جاوااسکریپت روی آن کار شود.
 
 ```html
 <input type="file" />
 ```
 
-به دلیل اینکه مقدار این المنت فقط قابل‌خواندن ‌می‌باشد، این المنت در ری‌اکت یک کامپوننت **کنترل‌نشده** ‌می‌باشد. در مورد این کامپوننت و دیگر کامپوننت‌های کنترل‌نشده توضیحاتی در [بخش دیگری از این اسناد ](/docs/uncontrolled-components.html#the-file-input-tag) داده شده است.
+به دلیل اینکه مقدار این المنت فقط قابل‌خواندن ‌می‌باشد، این المنت در ری‌اکت یک کامپوننت **کنترل‌نشده** ‌می‌باشد. در مورد این کامپوننت همراه با دیگر کامپوننت‌های کنترل‌نشده [در بخش دیگری از این اسناد](/docs/uncontrolled-components.html#the-file-input-tag) درباره آن بحث شده‌است.
 
-## به کار بردن چند فیلد ورودی {#handling-multiple-inputs}
+## کار با چندین ورودی {#handling-multiple-inputs}
 
-زمانی که نیاز دارید چند فیلد ورودی `input` کنترل‌شده به کار ببرید، ‌می‌توانید یک خصوصیت `name` برای هر یک از المنت‌ها تعریف کنید. سپس در تابعی که وظیفه بروز رسانی مقادیر و وضعیت را دارد ‌می‌توانید با بررسی مقدار `event.target.name` مشخص کنید کدام فیلد به‌روز شود.
+زمانی که نیاز دارید چند فیلد ورودی `input` کنترل‌شده به کار ببرید، ‌می‌توانید یک خصوصیت `name` برای هر یک از المنت‌ها تعریف کنید و اجازه دهید که تابع handler بر اساس مقدار event.target.name تصمیم بگیرد که چه کاری انجام دهد.
 
 برای مثال:
 
@@ -256,7 +256,7 @@ class Reservation extends React.Component {
 
 [**کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-توجه داشته باشید که چگونه از قابلیت [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) شیوه‌نگارش ES6 جهت به‌روز کردن مقدار ذخیره‌شده مرتبط با کلید هم‌نام با فیلد ورودی استفاده شده است:
+توجه داشته‌باشید که ما چگونه از قاعده نوشتن [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) در ES6 برای به‌روز رسانی state با کلید مرتبط با نام ورودی داده‌شده استفاده کرده‌ایم:
 
 ```js{2}
 this.setState({
@@ -264,18 +264,18 @@ this.setState({
 });
 ```
 
-معادل عملیات بالا ‌به‌صورت کد ES5 به این صورت ‌می‌باشد:
+معادل با این کد در ES5 است:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
-همچنین از آن جایی که تابع `setState()` ‌به‌صورت خودکار ‌می‌تواند [تغییرات جزیی در وضعیت را با کل state ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), فقط لازم است قسمت‌های به‌روز شده را زمان صدا زدن این تابع ارسال کنیم.
+همچنین از آن جایی که `setState()` ‌به‌صورت خودکار ‌می‌تواند [تغییرات جزیی state را به درون state فعلی ادغام کند](/docs/state-and-lifecycle.html#state-updates-are-merged), ما فقط نیاز داریم آن را با بخشی که تغییر کرده‌است فراخوانی کنیم.
 
-## فیلد ورودی کنترل‌شده با مقدار Null {#controlled-input-null-value}
+## مقدار Null ورودی کنترل‌شده {#controlled-input-null-value}
 
-تعریف value روی prop یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) باعث جلوگیری کاربر از تغییر ورودی ‌می‌شود مگر این که خودتان بخواهید. اگر خصوصیت `value` را تعریف کرده‌اید اما ورودی هنوز قابل‌ ویرایش است، ممکن است مقدار `value` را ‌به‌صورت تصادفی به `undefined` و یا `null` قرار داده باشید.
+قراردادن prop value روی یک [کامپوننت کنترل‌شده](/docs/forms.html#controlled-components) از تغییر ورودی توسط کاربر جلوگیری می‌کند، مگر اینکه شما بخواهید. اگر یک `value` روی ورودی قرار داده‌اید، اما هنوز قابل‌ ویرایش است، ممکن است `value` را تصادفا با `undefined` و یا `null` مقدار‌دهی کرده باشید.
 
 نمونه کد زیر این [رفتار] را نشان ‌می‌دهد. (در ابتدا فیلد ورودی قفل است اما پس از زمانی کوتاه قابل‌تغییر ‌می‌شود.)
 
@@ -290,8 +290,8 @@ setTimeout(function() {
 
 ## راه‌حل‌های جایگزین کامپوننت‌های کنترل‌شده {#alternatives-to-controlled-components}
 
-در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده ممکن است خسته‌کننده باشد، چون که شما باید به ازای هر (event) که به هر شکل داده‌ها را تغییر ‌می‌دهد، یک تابع که وظیفه رسیدگی به این تغییرات را دارد بنویسید و به state نگه‌دارنده وضعیت فیلد‌های ورودی در ری‌اکت ارسال کنید. پیاده سازی این رفتار به مرور ‌می‌تواند آزار دهنده شود مخصوصا زمانی که قصد دارید کد پروژه موجودتان را به معادل ری‌اکت تبدیل کنید و یا برنامه توسعه یافته با ری‌اکت را با یک برنامه غیر ری‌اکتی ادغام کنید. در چنین مواردی شاید بهتر باشد از [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) استفاده کنید که یک تکنیک جایگزین برای پیاده سازی فیلد‌های ورودی فرم ‌می‌باشد.
+در بعضی مواقع استفاده از کامپوننت‌های کنترل‌شده میتواند خسته‌کننده باشد، چون شما می‌بایست برای هر شکلی که داده‌ها تغییر می‌کنند یک event handler بنویسید و تمام وضعیت ورودی را به یک کامپوننت ری‌اکتی انتقال دهید. این می‌تواند مخصوصا زمانی که قصد دارید کد موجودتان را به ری‌اکت تبدیل کنید، یا برنامه ری‌اکتی را با یک کتابخانه غیرری‌اکتی ادغام کنید آزار دهنده شود. در چنین شرایطی شاید بهتر باشد به [کامپوننت‌های کنترل‌نشده](/docs/uncontrolled-components.html) نگاهی بیاندازید که یک تکنیک جایگزین برای پیاده سازی فرم های ورودی ‌می‌باشد.
 
 ## راه‌حل‌های تمام‌عیار {#fully-fledged-solutions}
 
-اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت وضعیت state ساخته شده است. پس از یادگیری اون غفلت نکنید.
+اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال، این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت state ساخته شده است، پس از یادگیری آن غفلت نکنید.

From 0242b716003f6cbc144e74833f0b7f54795345c4 Mon Sep 17 00:00:00 2001
From: Mohammad Raadi <raadi@bitsnbytes.ir>
Date: Mon, 11 Mar 2019 09:46:35 +0330
Subject: [PATCH 18/18] updated translation

---
 content/docs/forms.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index f15e50c18..8edb3c898 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که در حالت طبیعی این المنت‌ها وضعیت [ورودی] را در خود ‌نگه‌داری ‌می‌کنند. برای مثال، این کد فرم که ‌به‌صورت HTML ساده نوشته شده است از کاربر یک نام دریافت ‌می‌کند:
+المنت‌های فرم HTML در نحوه‌ی کارکرد با المنت‌های دیگر DOM در ری‌اکت تفاوت جزیی دارند، به این دلیل که المنت‌های فرم به صورت طبیعی مقداری state درونی ‌نگه‌داری ‌می‌کنند. برای مثال، این فرم که ‌به‌صورت HTML ساده نوشته شده است تنها یک نام دریافت ‌می‌کند:
 
 ```html
 <form>
@@ -294,4 +294,4 @@ setTimeout(function() {
 
 ## راه‌حل‌های تمام‌عیار {#fully-fledged-solutions}
 
-اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های طی‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال، این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت state ساخته شده است، پس از یادگیری آن غفلت نکنید.
+اگر به دنبال یک راه‌حل کامل که شامل مواردی از قبیل اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های مشاهده‌شده و کنترل نحوه ثبت فرم باشد، [Formik](https://jaredpalmer.com/formik) یکی از محبوب‌ترین گزینه‌ها ‌می‌باشد. با این حال، این راه‌حل بر اساس اصول کامپوننت‌های کنترل‌شده و مدیریت state ساخته شده است، پس از یادگیری آن غفلت نکنید.