Merge pull request #358 from faeghe-hajiabadi/traslation/fa-thnking-in-react

fixed error in p tag

Author: Abolfazl Rezvani Naraqi

src/content/learn/thinking-in-react.md

@@ -1,14 +1,14 @@
 ---
 title: تفکر به سبک ری‌اکت
 ---
-<Intro dir="rtl">
+<Intro>
 کتابخانه‌ی ری‌اکت می‌تواند نگاه شما به طراحی‌هایی که می بینید و برنامه‌هایی که می‌سازید را٬ تغییر دهد.وقتی یک رابط کاربری را با ری‌اکت می‌سازید، ابتدا آن را به قسمت‌هایی به نام کامپوننت‌ها تقسیم می‌کنید.
  سپس، وضعیت‌های بصری مختلف را برای هر یک از کامپوننت‌هایتان توصیف می‌کنید. در نهایت، کامپوننت‌های خود را به گونه‌ای با یکدیگر ارتباط می‌دهید که داده از طریق آنها جابه‌جا شود. در اینجا ما مراحل ساخت یک جدول با قابلیت سرچ اطلاعات را با شما برای هدف اموزش به اشتراک می‌گذاریم
 </Intro>
 ## Start with the mockup {/*start-with-the-mockup*/}
-<p dir="rtl">
+
 تصور کنید شما همین الان دیتایی از طریق ای پی آی و فایل ماکآپ را از دیزاینر دارید. فایل دیتا٬ اطلاعاتی مثل فایل زیر را شامل می‌شود:
-</p>
+
 
 ```json
 [
@@ -30,30 +30,29 @@ title: تفکر به سبک ری‌اکت
   {"category": "Vegetables", "price": "$1", "stocked": true, "name": "Peas"}
 ]
 ```
-<p dir="rtl">
+
 خروجی فایل شبیه تصویر زیر است:
-</p>
+
 
 <img
-  src="/images/docs/s_thinking-in-react_ui.png"
+  src="/images/docs/s_thinking-in-react_ui_outline.png"
   width="300"
   style={{margin: '0 auto'}}
 />
 برای پیاده سازی هر دیزاینی ما این پنج قدم را  برمی داریم:
 
 ## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/}
-<p dir="rtl">
+
 اول دور هر کامپوننت و زیر کامپوننت در دیزاین خط بکشید و برای آنها اسم بگذارید. اگر با یک طراح همکاری می‌کنید، ممکن است او این کامپوننت‌ها را در ابزار طراحی خود قبلاً نامگذاری کرده باشد. از او بپرسید!
 بسته به بکگراند شما، می‌توانید به روش‌های مختلف درباره‌ی تقسیم یک طراحی به کامپوننت‌ها فکر کنید.
-</p>
+
 - **برنامه‌نویسی**--از تکنیک‌های مشابه برای تصمیم‌گیری در مورد اینکه آیا باید یک تابع یا شیء جدید ایجاد کنید استفاده کنید
   یکی از این تکنیک‌ها اصل single responsibility است، به این معنی که یک کامپوننت بهتر است تنها یک کار را انجام دهد. اگر کامپوننت به طور مداوم بزرگتر شود، باید به زیرکامپوننت‌های کوچکتر تجزیه شود.
   [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle)
 
 - **CSS**--بررسی کنید که برای چه عناصری از کلاس‌ها استفاده خواهید کرد. (با این حال، کامپوننت‌ها کمتر جزئیات ریز دارند.)
 
-- **design**--
-  در نظر بگیرید که چگونه لایه‌های طراحی را سازماندهی خواهید کرد
+- **design**--در نظر بگیرید که چگونه لایه‌های طراحی را سازماندهی خواهید کرد
   اگر فایل جیسون شما ساختار مناسبی داشته باشد، اغلب متوجه می شوید که به طور طبیعی با ساختار کامپوننت‌های رابط کاربری شما همخوانی دارد. این به این دلیل است که مدل‌های رابط کاربری و داده اغلب همان معماری اطلاعاتی را دارند - به اصطلاح، همان شکل. رابط کاربری خود را به
   کامپوننت‌ها تقسیم کنید، به گونه‌ای که هر کامپوننت با یک قسمت از مدل داده شما مطابقت داشته باشد
 
@@ -66,7 +65,7 @@ title: تفکر به سبک ری‌اکت
 <CodeDiagram flip>
 
 <img
-  src="/images/docs/s_thinking-in-react_ui_outline.png"
+  src="/images/docs/s_thinking-in-react_ui.png"
   width="500"
   style={{margin: '0 auto'}}
 />
@@ -80,11 +79,13 @@ title: تفکر به سبک ری‌اکت
 </CodeDiagram>
 
 </FullWidth>
-<p dir="rtl">
-اگر به کامپوننت ۳(جدول محصولات) نگاه کنید، می‌بینید که هدر جدول (شامل برچسب‌های "نام" و "قیمت") قسمت جداگانه‌ای نیست. این مسئله از سلیقه‌ای است و می‌توانید هر دو را انتخاب کنید. در این مثال، این بخش جزء کامپوننت ۳است زیرا داخل لیست کامپوننت ۳ ظاهر می‌شود. با این حال، اگر این هدر به طور پیچیده‌تری رشد کند (مثلاً اگر مرتب‌سازی را اضافه کنید)، می‌توانید آن را به عنوان یک کامپوننت جداگانه با نام(هدر جدول محصولات) جابجا کنید.
+
+
+اگر به کامپوننت ۳(جدول محصولات) نگاه کنید، می‌بینید که هدر جدول (شامل برچسب‌های "نام" و "قیمت") قسمت جداگانه‌ای نیست. این مسئله سلیقه‌ای است و می‌توانید هر دو را انتخاب کنید. در این مثال، این بخش جزء کامپوننت ۳است زیرا داخل لیست کامپوننت ۳ ظاهر می‌شود. با این حال، اگر این هدر به طور پیچیده‌تری رشد کند (مثلاً اگر مرتب‌سازی را اضافه کنید)، می‌توانید آن را به عنوان یک کامپوننت جداگانه با نام(هدر جدول محصولات) جابجا کنید.
+
 
 هم‌اکنون که اجزای ماک‌اپ را شناسایی کرده‌اید، آن‌ها را به صورت سلسله‌مراتبی قرار دهید. کامپوننتی که در داخل یک کامپوننت دیگر در نمونه طراحی ظاهر می‌شوند، باید به عنوان زیرمجموعه در سلسله‌مراتب ظاهر شوند.
-</p>
+
 
 - `FilterableProductTable`
   - `SearchBar`
@@ -100,7 +101,7 @@ title: تفکر به سبک ری‌اکت
 
   [state](/learn/state-a-components-memory) لینک به
 
- </p>
+</p>
 
 <Sandpack>
 
@@ -216,76 +217,77 @@ td {
 <p dir="rtl">
 بعد ساختن کامپوننت‌های خود، شما یک کتابخانه از کامپوننت‌های قابل استفاده مجدد خواهید داشت که مدل داده‌های شما را نمایش می‌دهند. به دلیل اینکه این برنامه از نوع استاتیک است، کامپوننت‌ها فقط JSX را بازمی‌گردانند. کامپوننت‌، در بالای سلسله‌مراتب (FilterableProductTable) مدل داده‌های شما را به عنوان یک ویژگی دریافت می‌کند. این با نام "جریان داده یک‌طرفه" شناخته می‌شود زیرا داده‌ها از کامپوننت‌ه بالاتر در سلسله‌مراتب به کامپوننت‌های پایین‌تر در درخت جریان می‌یابند
 </p>
-<Pitfall dir="rtl">
+<Pitfall>
 در این نقطه، شما نباید از هیچ مقدار وضعیتی استفاده کنید. این مرحله برای مرحله بعدی است!
 </Pitfall>
 
 ## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/}
-<p dir="rtl">
+
 برای ایجاد تعامل در رابط کاربری، باید به کاربران امکان تغییر مدل داده‌های زیرین خود را بدهید. برای این کار از وضعیت (state) استفاده خواهید کرد.
-</p>
+
 <p dir="rtl">
 وضعیت را به عنوان مجموعه حداقلی از داده‌های تغییر پذیری تصور کنید که برنامه شما نیاز دارد که به خاطر بسپارد. مهم‌ترین اصل در ساختاردهی وضعیت، حفظ اصل DRY (Don't Repeat Yourself) است. [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) کمترین حالتی که نیازهای برنامه‌ی شما از state دارد را تعیین کنید و سایر موارد را به صورت درخواستی محاسبه کنید. به عنوان مثال، اگر در حال ساختن یک لیست خرید هستید، می‌توانید موارد را به صورت یک آرایه در state ذخیره کنید. اگر می‌خواهید  تعداد موارد در لیست را نشان دهید، تعداد موارد را به عنوان یک مقدار وضعیت جدید درنظر نگیرید  - در عوض، طول آرایه‌تان را بخوانید.
 </p>
-<p dir="rtl"> حالا به تمام قسمت های دیتا در این اپلیکیشن نگاه کنید:</p>
+ حالا به تمام قسمت های دیتا در این اپلیکیشن نگاه کنید:
+
 1-FilterableProductTable
 2-SearchBar
 3-ProductTable
 4-ProductCategoryRow
 5-ProductRow
-<p dir="rtl">
+
 کدام یکی از این‌ها state هستند؟
 اول آنهایی که نیستند را مشخص میکنیم:
-</p>
-<li dir="rtl">
+
+<li>
 ایا در طول زمان **بدون تغییر** خواهد ماند؟ اگر بله پس استیت نیست-
 آیا **از یک کامپوننت والد** با پراپس پاس داده شده؟ اگر بله پس استیت نیست-
 ایا میتوانید آن را خودتان به دست بیاورید؟ **براساس استیت فعلی یا پراپس کامپوننت** اگر بله پس قطعا استیت نیست!-
 </li>
 
-<p dir="rtl">
+
 هرچه به جز این حالت ها باشد٬  استیت است  
 state 
-</p>
-<p dir="rtl"> یکبار دیگر باهم مرور کنیم:</p>
-<p dir="rtl">
+
+ یکبار دیگر باهم مرور کنیم:
+
 آیا **از یک کامپوننت والد** با پراپس پاس داده شده؟ اگر بله پس استیت نیست-
 ایا میتوانید آن را خودتان به دست بیاورید؟ **براساس استیت فعلی یا پراپس کامپوننت** اگر بله پس قطعا استیت نیست!-
-</p>
-<ol dir="rtl">
+
+<ol>
   <li>اگر اصل لیست محصولات به عنوان پراپس پاس داده شده٬ پس استیت یا وضعیت نیست</li>
   <li>متن جستجو به نظر استیت است چرا که به مرور زمان تغییر میکند و ما نمیتوانیم آن را محاسبه کنیم</li>
   <li>مقدار چک باکس یک استیت است زیرا محاسبه نمیشود و به مرور زمان تغییر میکند</li>
   <li>لیست محصولات فیلتر شده استیت نیست٬ زیرا میتوانیم آن را حساب کنیم! تنها به لیست اولیه و مقداری که کاربر جستجو  کرده به همراه مقدار تکس باکس نیاز داریم  </li>
 </ol>
-<p>
-یعنی ما فقط متن جستجو شده  و مقدار تکست باکس را به عنوان استیت نگه میداریم :)
-</p>
+
+یعنی ما فقط متن جستجو شده  و مقدار تکست باکس را به عنوان استیت نگه میداریم 
+
 <DeepDive>
 
 ### Props vs State {/*props-vs-state*/}
-<div dir="rtl">
-  <p dir="rtl">
+
+ 
   دو نوع مدل دیتا در ری اکت داریم: وضعیت (state) و (props). 
   این دو باهم تفاوت زیادی دارند:
-  </p>
+
 
   [**پراپس** شبیه ارگیومنت هایی که به تایع پاس میدهید](/learn/passing-props-to-a-component) . آنها به کامپوننت والد اجازه می دهند که دیتا را به فرزند خود پاس دهد و ظاهر آن را دستکاری کند. مثلا: یک `form` میتواند رنگ
   را به عنوان پراپس به کامپوننت ‍‍‍`Button` پاس دهد.
   - [**استیت** مثل حافظه ی یک کامپوننت است](/learn/state-a-components-memory) به کامپوننت این امکان را میدهد تا تغییرات اطلاعات را ثبت کند و به آنها پاسخ مناسب دهد. مثلا کامپوننت دکمه میتواند تغییراتی مثل رفتن موس روی خود را در استیت ثبت کند
-  </div>
+
 
 </DeepDive>
-<p dir="rtl">
+
 پراپ‌ها (Props) و استیت‌ها (State) متفاوت هستند، اما با هم کار می‌کنند. یک کامپوننت والد (Parent) اغلب برخی اطلاعات را در استیت نگه می‌دارد (تا بتواند آن‌ها را تغییر دهد) و به عنوان پراپ به کامپوننت‌های فرزند (Child) ارسال می‌کند. اگر هنوز تفاوت بین آن‌ها برای اولین بار کاملاً روشن نشده باشد، مشکلی ندارد. برای کامل شدن درک این موضوع، نیاز به تمرین کمی دارد!
-</p>
-</DeepDive>
+
+
 
 ## Step 4: Identify where your state should live {/* step-4-identify-where-your-state-should-live */}
-<p dir="rtl">
+
 بعد از شناسایی داده‌های حداقلی مرتبط با برنامه‌ی شما، نیاز دارید تعیین کنید که کدام کامپوننت مسئول تغییر این داده‌هاست، یا به عبارتی، مالک (owns) این داده‌ها است. به یاد داشته باشید: ری‌اکت از جریان داده‌ی یک طرفه استفاده می‌کند و داده‌ها را از کامپوننت والد به کامپوننت‌های فرزند در سلسله‌مراتب ارسال می‌کند. ممکن است اولیه‌اش که کدام کامپوننت باید مالک داده‌هایی باشد که در اختیار دارد، به وضوح نباشد. اگر تازه با این مفهوم آشنا شده‌اید، ممکن است چالش برانگیز باشد، اما با دنبال کردن این 
-</p>
-<p dir="rtl">
+
+
 برای هر قطعه از استیت (state) در برنامه‌ی شما:
 
 *تمام* کامپوننت‌هایی که بر اساس آن استیت چیزی را رندر می‌کنند را شناسایی کنید.
@@ -295,21 +297,20 @@ state
 همچنین می‌توانید استیت را در یکی از کامپوننت‌های بالاتر از کامپوننت مشترک آن‌ها قرار دهید.
 اگر نمی‌توانید کامپوننتی پیدا کنید که استیت را به صورت منطقی مدیریت کند، می‌توانید یک کامپوننت جدید را که تنها برای نگه‌داری استیت ایجاد شده باشد بسازید و آن را در جایی در سلسله‌مراتب بالاتر از کامپوننت مشترک قرار دهید.
 در مرحله‌ی قبلی، دو قطعه از استیت را در این برنامه پیدا کردید: متن ورودی جستجو و مقدار چک‌باکس. در این مثال، همیشه همراه یکدیگر ظاهر می‌شوند، بنابراین منطقی است که آن‌ها را در یک جایگاه قرار دهید
-</p>
+
 
 حالا بیایید از راهبرد ما  مسئله را بررسی کنیم
-<p dir="rtl">
+
 شناسایی کامپوننت‌هایی که از استیت استفاده می‌کنند: ***
 
 ProductTable نیاز دارد که لیست محصولات را بر اساس این استیت (متن جستجو و مقدار چک‌باکس) فیلتر کند. ***
 SearchBar نیاز دارد که این استیت (متن جستجو و مقدار چک‌باکس) را نمایش دهد. ***
 یافتن پدر مشترک آن‌ها: اولین کامپوننت والد که هر دو کامپوننت با هم به اشتراک می‌گذارند، FilterableProductTable است. *** 
 تصمیم برای محل قرارگیری استیت: ما مقادیر متن فیلتر و وضعیت چک‌باکس را در FilterableProductTable نگه‌داری خواهیم کرد. ***
 بنابراین مقادیر استیت در FilterableProductTable قرار خواهند گرفت.
-</p>
-<p dir="rtl">
+
 استیت را درون کامپوننتی که [`useState()` Hook.](/reference/react/useState) دارد اضافه کنید. Hookها توابه خاصی هستند که به شما اجازه می‌دهند تا قدرت ری‌اکت را درونشان قلاب کنید. دو متغییر استیت در بالای `FilterableProductTable`تعریف و مقدار پیش‌فرض آنها را مشخص کنید:
-</p>
+
 
 ```js
 function FilterableProductTable({ products }) {
@@ -460,7 +461,9 @@ td {
 
 </Sandpack>
 
-<p dir="rtl"> توجه کنید که هنوز ویرایش فرم کار نمی‌کند. یک خطا در کنسول محیط آزمایشی بالا وجود دارد که دلیل آن را توضیح می‌دهد.</p>
+
+توجه کنید که هنوز ویرایش فرم کار نمی‌کند. یک خطا در کنسول محیط آزمایشی بالا وجود دارد که دلیل آن را توضیح می‌دهد.
+
 <ConsoleBlock level="error">
 
 You provided a \`value\` prop to a form field without an \`onChange\` handler. This will render a read-only field.