From a54eec9b7b699fb443e8c8b47d3d4a419c3a3a2b Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Thu, 28 Sep 2023 11:53:06 +0000 Subject: [PATCH 1/3] remove duplicate id --- src/content/community/conferences.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 19507a9cf..7c90bb892 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -92,9 +92,6 @@ June 16th, 2023. Larvik, Norway [Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/) -### React Summit 2023 {/*react-summit-2023*/} -June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event) - [Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact) ### RemixConf 2023 {/*remixconf-2023*/} From d4feb587ec94dd8a4be7f52f0c8cc4d31dc66ae1 Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Thu, 28 Sep 2023 11:56:36 +0000 Subject: [PATCH 2/3] remove useless tag see https://github.com/reactjs/fa.react.dev/pull/363 --- src/content/learn/state-a-components-memory.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 14e18cdde..cfd2134e5 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -545,14 +545,13 @@ It is a good idea to have multiple state variables if their state is unrelated, #### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/} -

From b2e2811334ba2866cf0513bb7e7a577c1399d642 Mon Sep 17 00:00:00 2001 From: Ahmed Abdelbaset Date: Thu, 28 Sep 2023 11:56:55 +0000 Subject: [PATCH 3/3] fix errors --- src/content/learn/thinking-in-react.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index e5a549e78..995d96c49 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -264,8 +264,7 @@ state یعنی ما فقط متن جستجو شده و مقدار تکست باکس را به عنوان استیت نگه میداریم - -### Props vs State {/*props-vs-state*/} +#### Props vs State {/*props-vs-state*/} دو نوع مدل دیتا در ری اکت داریم: وضعیت (state) و (props). @@ -283,7 +282,7 @@ state -## Step 4: Identify where your state should live {/* step-4-identify-where-your-state-should-live */} +## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} بعد از شناسایی داده‌های حداقلی مرتبط با برنامه‌ی شما، نیاز دارید تعیین کنید که کدام کامپوننت مسئول تغییر این داده‌هاست، یا به عبارتی، مالک (owns) این داده‌ها است. به یاد داشته باشید: ری‌اکت از جریان داده‌ی یک طرفه استفاده می‌کند و داده‌ها را از کامپوننت والد به کامپوننت‌های فرزند در سلسله‌مراتب ارسال می‌کند. ممکن است اولیه‌اش که کدام کامپوننت باید مالک داده‌هایی باشد که در اختیار دارد، به وضوح نباشد. اگر تازه با این مفهوم آشنا شده‌اید، ممکن است چالش برانگیز باشد، اما با دنبال کردن این @@ -486,11 +485,11 @@ function SearchBar({ filterText, inStockOnly }) { با این حال، هنوز کدی برای پاسخ به اقدامات کاربر مانند تایپ کردن اضافه نکرده‌اید. این مرحله آخر شما خواهد بود.

-## Step 5: Add inverse data flow {/* step-5-add-inverse-data-flow */} +## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}

در حال حاضر برنامه‌ی شما با پراپ‌ها و استیت‌ها که از بالا به پایین سلسله‌مراتب به‌خوبی رندر می‌شود. اما برای تغییر استیت بر اساس ورودی کاربر، شما نیاز به پشتیبانی از جریان داده به سمت دیگر دارید: کامپوننت‌های فرم (form components) که در عمق سلسله‌مراتب هستند باید استیت را در FilterableProductTable به‌روزرسانی دهنده. -ری‌اکت این جریان داده را صریحاً اعلام می‌کند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چک‌باکس را انتخاب کنید، مشاهده خواهید کرد که ری‌اکت ورودی‌های شما را نادیده می‌گیرد. این عمدی است. با نوشتن ، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار داده‌اید که از FilterableProductTable به آن منتقل می‌شود. از آنجایی که استیت filterText هرگز تنظیم نمی‌شود، ورودی هرگز تغییر نمی‌کند. +ری‌اکت این جریان داده را صریحاً اعلام می‌کند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چک‌باکس را انتخاب کنید، مشاهده خواهید کرد که ری‌اکت ورودی‌های شما را نادیده می‌گیرد. این عمدی است. با نوشتن ``، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار داده‌اید که از FilterableProductTable به آن منتقل می‌شود. از آنجایی که استیت filterText هرگز تنظیم نمی‌شود، ورودی هرگز تغییر نمی‌کند. شما می‌خواهید طوری عمل کنید که هر زمان کاربر ورودی‌های فرم را تغییر دهد، استیت به‌روزرسانی شود تا تغییرات نمایان شود. استیت توسط FilterableProductTable مدیریت می‌شود، بنابراین تنها این کامپوننت می‌تواند توابع setFilterText و setInStockOnly را فراخوانی کند. برای اجازه دادن به SearchBar برای به‌روزرسانی استیت FilterableProductTable، شما باید این توابع را به SearchBar ارسال کنید. @@ -672,7 +671,7 @@ td { برای کسب اطلاعات بیشتر در مورد کنترل روی‌داد‌ها و به روز‌رسانی استیت متوانید به قسمت [افزودن تعاملات](/learn/adding-interactivity) مراجعه کنید. -## Where to go from here {/* where-to-go-from-here */} +## Where to go from here {/*where-to-go-from-here*/} این مقدمه‌ای بسیار کوتاه بود برای آشنایی با نحوه‌ی فکر کردن در مورد ساخت کامپوننت‌ها و برنامه‌ها با ری‌اکت. شما می‌توانید همین حالا یک پروژه‌ی ری‌اکت راه‌اندازی کنید یا به عمق بیشتری درباره‌ی تمام دستورالعمل‌ها (سینتکس) استفاده‌شده در این آموزش بپردازید.