Skip to content

Fix build errors #364

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 28, 2023
Merged

Fix build errors #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a54eec9
remove duplicate id
AhmedBaset Sep 28, 2023
d4feb58
remove useless tag
AhmedBaset Sep 28, 2023
b2e2811
fix errors
AhmedBaset Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/content/community/conferences.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}
Expand Down
3 changes: 1 addition & 2 deletions src/content/learn/state-a-components-memory.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,14 +545,13 @@ It is a good idea to have multiple state variables if their state is unrelated,
<DeepDive>

#### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/}
<p dir='rtl>
شاید متوجه شده باشید که فراخوانی `useState` هیچ اطلاعاتی درباره *کدام* متغیر وضعیت به آن ارجاع داده می‌شود، دریافت نمی‌کند. هیچ "شناسه"‌ای که به `useState` منتقل شود وجود ندارد، پس چگونه می‌داند کدام یک از متغیرهای استیت را برگرداند؟ آیا بر اساس یک جادویی مانند تجزیه و تحلیل توابع عمل می‌کند؟ پاسخ نه است.

بدلاً از آن، برای فعال کردن دستور زبان مختصر آن‌ها، هوک‌ها **بر اعتماد به ترتیب فراخوانی پایدار در هر بار رندر کامپوننت یکسان تکیه می‌کنند.** این در عمل به خوبی کار می‌کند زیرا اگر قانون فوق را رعایت کنید ("تنها در سطح بالایی دستورهای هوک را فراخوانی کنید")، هوک‌ها همیشه به همان ترتیب فراخوانی می‌شوند. علاوه بر این، یک [افزونه لینتر](https://www.npmjs.com/package/eslint-plugin-react-hooks) اکثر اشتباهات را گرفتار می‌کند.
در داخل، React یک آرایه از زوج‌های استیت برای هر کامپوننت نگه می‌دارد. همچنین شاخص زوج فعلی را که قبل از رندر شدن به `0` تنظیم شده است، حفظ می‌کند. هر بار که `useState` را فراخوانی می‌کنید، React زوج وضعیت بعدی را به شما ارائه می‌دهد و شاخص را افزایش می‌دهد. می‌توانید بیشتر در مورد این مکانیزم در [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) مطالعه کنید.

[React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
</p>

This example **doesn't use React** but it gives you an idea of how `useState` works internally:

<Sandpack>
Expand Down
11 changes: 5 additions & 6 deletions src/content/learn/thinking-in-react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,8 +264,7 @@ state
یعنی ما فقط متن جستجو شده و مقدار تکست باکس را به عنوان استیت نگه میداریم

<DeepDive>

### Props vs State {/*props-vs-state*/}
#### Props vs State {/*props-vs-state*/}


دو نوع مدل دیتا در ری اکت داریم: وضعیت (state) و (props).
Expand All @@ -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) این داده‌ها است. به یاد داشته باشید: ری‌اکت از جریان داده‌ی یک طرفه استفاده می‌کند و داده‌ها را از کامپوننت والد به کامپوننت‌های فرزند در سلسله‌مراتب ارسال می‌کند. ممکن است اولیه‌اش که کدام کامپوننت باید مالک داده‌هایی باشد که در اختیار دارد، به وضوح نباشد. اگر تازه با این مفهوم آشنا شده‌اید، ممکن است چالش برانگیز باشد، اما با دنبال کردن این

Expand Down Expand Up @@ -486,11 +485,11 @@ function SearchBar({ filterText, inStockOnly }) {
با این حال، هنوز کدی برای پاسخ به اقدامات کاربر مانند تایپ کردن اضافه نکرده‌اید. این مرحله آخر شما خواهد بود.
</p>

## Step 5: Add inverse data flow {/* step-5-add-inverse-data-flow */}
## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
<p dir="rtl">
در حال حاضر برنامه‌ی شما با پراپ‌ها و استیت‌ها که از بالا به پایین سلسله‌مراتب به‌خوبی رندر می‌شود. اما برای تغییر استیت بر اساس ورودی کاربر، شما نیاز به پشتیبانی از جریان داده به سمت دیگر دارید: کامپوننت‌های فرم (form components) که در عمق سلسله‌مراتب هستند باید استیت را در FilterableProductTable به‌روزرسانی دهنده.

ری‌اکت این جریان داده را صریحاً اعلام می‌کند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چک‌باکس را انتخاب کنید، مشاهده خواهید کرد که ری‌اکت ورودی‌های شما را نادیده می‌گیرد. این عمدی است. با نوشتن <input value={filterText} />، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار داده‌اید که از FilterableProductTable به آن منتقل می‌شود. از آنجایی که استیت filterText هرگز تنظیم نمی‌شود، ورودی هرگز تغییر نمی‌کند.
ری‌اکت این جریان داده را صریحاً اعلام می‌کند، اما نیاز به تایپ کردن بیشتری نسبت به ورودی داده دوطرفه دارد. اگر در مثال بالا سعی کنید در ورودی تایپ کنید یا چک‌باکس را انتخاب کنید، مشاهده خواهید کرد که ری‌اکت ورودی‌های شما را نادیده می‌گیرد. این عمدی است. با نوشتن `<input value={filterText} />`، شما value پراپ ورودی را به طور دائمی برابر با استیت filterText قرار داده‌اید که از FilterableProductTable به آن منتقل می‌شود. از آنجایی که استیت filterText هرگز تنظیم نمی‌شود، ورودی هرگز تغییر نمی‌کند.

شما می‌خواهید طوری عمل کنید که هر زمان کاربر ورودی‌های فرم را تغییر دهد، استیت به‌روزرسانی شود تا تغییرات نمایان شود. استیت توسط FilterableProductTable مدیریت می‌شود، بنابراین تنها این کامپوننت می‌تواند توابع setFilterText و setInStockOnly را فراخوانی کند. برای اجازه دادن به SearchBar برای به‌روزرسانی استیت FilterableProductTable، شما باید این توابع را به SearchBar ارسال کنید.

Expand Down Expand Up @@ -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*/}

این مقدمه‌ای بسیار کوتاه بود برای آشنایی با نحوه‌ی فکر کردن در مورد ساخت کامپوننت‌ها و برنامه‌ها با ری‌اکت. شما می‌توانید همین حالا یک پروژه‌ی ری‌اکت راه‌اندازی کنید یا به عمق بیشتری درباره‌ی تمام دستورالعمل‌ها (سینتکس) استفاده‌شده در این آموزش بپردازید.

Expand Down