From da72216089a90cc55d305375798ed0743275e441 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Fri, 1 Mar 2019 17:35:25 +0330 Subject: [PATCH 01/25] Translate page "rendering-elements.md" --- content/docs/rendering-elements.md | 56 ++++++++++++++++-------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 34bb62b7c..2843e4bd6 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -1,6 +1,6 @@ --- id: rendering-elements -title: Rendering Elements +title: رندر شدن المان‌ها permalink: docs/rendering-elements.html redirect_from: - "docs/displaying-data.html" @@ -8,68 +8,70 @@ prev: introducing-jsx.html next: components-and-props.html --- -Elements are the smallest building blocks of React apps. +المان‌ها (elements) کوچک‌ترین جزء تشکیل‌دهنده برنامه‌های ری‌اکتی هستند. -An element describes what you want to see on the screen: +یک المان آن‌ چیزی را که شما می‌خواهید روی صفحه ببینید نمایش می‌دهد: ```js const element =

Hello, world

; ``` -Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements. +برخلاف المان‌های ‌DOM مرورگر، المان‌های ری‌اکت اشیاء ساده‌ای هستند که ایجاد آن‌ها هزینه چندانی ندارد. وظیفه DOM ری‌اکت به‌روز رسانی DOM [مرورگر] است و اطمینان از این‌که دقیقا با المان‌های ری‌اکت یکسان باشد. ->**Note:** +>**یادداشت:** > ->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead. +>ممکن است بعضی‌ها المان‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المان‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما اینجا را مطالعه کنید. -## Rendering an Element into the DOM {#rendering-an-element-into-the-dom} +## رندر شدن یک المان درون DOM {#rendering-an-element-into-the-dom} -Let's say there is a `
` somewhere in your HTML file: +فرض کنید یک `
` جایی در فایل HTML شما قرار دارد: ```html
``` -We call this a "root" DOM node because everything inside it will be managed by React DOM. +ما این المان‌ را یک DOM node "ریشه" نامگذاری می‌کنیم، به این دلیل‌ که هر چیزی که داخل آن قرار گیرد، توسط ری‌اکت DOM مدیریت می‌شود. -Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. +برنامه‌هایی که با فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node که بخواهید داشته‌باشید. + +تابع `ReactDOM.render()` یک المان ری‌اکت را درون یک DOM node رندر می‌کند: -To render a React element into a root DOM node, pass both to `ReactDOM.render()`: `embed:rendering-elements/render-an-element.js` -[](codepen://rendering-elements/render-an-element) +[با CodePen امتحان کنید](codepen://rendering-elements/render-an-element) + +این کد توی صفحه "Hello, world" را نمایش می‌دهد. -It displays "Hello, world" on the page. +## به‌روز‌رسانی المان رندر شده {#updating-the-rendered-element} -## Updating the Rendered Element {#updating-the-rendered-element} +المان‌های ری‌اکت [تغییر ناپدیر](https://en.wikipedia.org/wiki/Immutable_object) هستند. زمانی که یک المان ری‌اکت را ایجاد می‌کنید، دیگر قادر به تغییر فرزندان و خصوصیات آن نخواهید بود. یک المان را مانند یک فریم از یک فیلم تصور کنید که UI را در یک نقطه زمانی مشخص نشان می‌دهد. -React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. +با اطلاعاتی که تا این‌جا به‌دست آورده‌ایم، تنها راه به‌روز رسانی UI این است که یک المان جدید ساخته و آن را به تابع `ReactDOM.render()` بدهیم. -With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`. -Consider this ticking clock example: +این مثال ساعت را درنظر بگیرید: `embed:rendering-elements/update-rendered-element.js` -[](codepen://rendering-elements/update-rendered-element) +[با CodePen امتحان کنید](codepen://rendering-elements/update-rendered-element) -It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback. +در این مثال تابع `ReactDOM.render()` هربار توسط callback تابع [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) فراخوانی می‌شود. ->**Note:** +>**یادداشت:** > ->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html). +> در عمل، بیشتر برنامه‌های ری‌اکت فقط یک دفعه `ReactDOM.render()` را فراخوانی می‌کنند. در بخش‌های بعدی یاد می‌گیریم که چگونه چنین کد‌هایی به صورت [کامپوننت‌های دارای state](/docs/state-and-lifecycle.html) کپسوله می‌شوند. > ->We recommend that you don't skip topics because they build on each other. +> از آن‌جا که هر بخش با استناد به موضوع‌های پیشین نوشته‌ شده‌است، پیشنهاد می‌کنیم به‌ترتیب پیش بروید. -## React Only Updates What's Necessary {#react-only-updates-whats-necessary} +## ری‌اکت تنها چیز‌هایی که نیاز‌ هست را به‌روز رسانی می‌کند {#react-only-updates-whats-necessary} -React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. +DOM ری‌اکت المان موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. -You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools: +برای اطمینان، [مثال قبلی](codepen://rendering-elements/update-rendered-element) را با استفاده از ابزار توسعه‌دهندگان مرورگر بررسی کنید: ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) -Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. +با وجود این‌که ما هر ثانیه یک المان جدید که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط متن nodeی که تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. -In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. +براساس تجربه ما، تفکر درباره این‌که UI در یک زمان مشخص چگونه باشد، به جای این‌که چگونه آن را تغییر دهیم، از دسته‌ای از خطا‌ها پیش‌گیری می‌کند. From 3103ea89d0a7caf470b668660d5db9b678fc0b9b Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Sun, 3 Mar 2019 14:29:40 +0330 Subject: [PATCH 02/25] Improve translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 2843e4bd6..35faa790f 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -18,7 +18,7 @@ const element =

Hello, world

; برخلاف المان‌های ‌DOM مرورگر، المان‌های ری‌اکت اشیاء ساده‌ای هستند که ایجاد آن‌ها هزینه چندانی ندارد. وظیفه DOM ری‌اکت به‌روز رسانی DOM [مرورگر] است و اطمینان از این‌که دقیقا با المان‌های ری‌اکت یکسان باشد. ->**یادداشت:** +>**نکته:** > >ممکن است بعضی‌ها المان‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المان‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما اینجا را مطالعه کنید. From 49f03348c64161523ec84b5dcd2d669cf33e6f0e Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Sun, 3 Mar 2019 14:32:18 +0330 Subject: [PATCH 03/25] Improve translation of content/docs/rendering-elements.md Use a batter word for **Note** Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 35faa790f..7ba83aa21 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -58,7 +58,7 @@ const element =

Hello, world

; در این مثال تابع `ReactDOM.render()` هربار توسط callback تابع [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) فراخوانی می‌شود. ->**یادداشت:** +>**نکته:** > > در عمل، بیشتر برنامه‌های ری‌اکت فقط یک دفعه `ReactDOM.render()` را فراخوانی می‌کنند. در بخش‌های بعدی یاد می‌گیریم که چگونه چنین کد‌هایی به صورت [کامپوننت‌های دارای state](/docs/state-and-lifecycle.html) کپسوله می‌شوند. > From 4df2796a95185da1b04d21b736542753e5deb388 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Sun, 3 Mar 2019 14:38:16 +0330 Subject: [PATCH 04/25] Improve the translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 7ba83aa21..5032c3984 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -68,7 +68,7 @@ const element =

Hello, world

; DOM ری‌اکت المان موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. -برای اطمینان، [مثال قبلی](codepen://rendering-elements/update-rendered-element) را با استفاده از ابزار توسعه‌دهندگان مرورگر بررسی کنید: +برای اطمینان، [مثال قبلی](codepen://rendering-elements/update-rendered-element) را با استفاده از ابزارهای مرورگر بررسی کنید: ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) From 9c818207c22c7c5606339157dc58a117ef95798b Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Sun, 3 Mar 2019 14:40:05 +0330 Subject: [PATCH 05/25] Apply @sJJdGG comment on content/docs/rendering-elements.md page Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 5032c3984..1beaa3aa0 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -41,7 +41,7 @@ const element =

Hello, world

; [با CodePen امتحان کنید](codepen://rendering-elements/render-an-element) -این کد توی صفحه "Hello, world" را نمایش می‌دهد. +این کد روی صفحه "Hello, world" را نمایش می‌دهد. ## به‌روز‌رسانی المان رندر شده {#updating-the-rendered-element} From 8e821adacf4aa90f83e64ab7a8423f33f31bd463 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Sun, 3 Mar 2019 14:42:19 +0330 Subject: [PATCH 06/25] Fix a translation issue in content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 1beaa3aa0..e2632b95b 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -72,6 +72,6 @@ DOM ری‌اکت المان موردنظر و فرزندانش را با حال ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) -با وجود این‌که ما هر ثانیه یک المان جدید که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط متن nodeی که تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. +با وجود این‌که ما هر ثانیه یک المان که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط متن nodeی که تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. براساس تجربه ما، تفکر درباره این‌که UI در یک زمان مشخص چگونه باشد، به جای این‌که چگونه آن را تغییر دهیم، از دسته‌ای از خطا‌ها پیش‌گیری می‌کند. From 50c09fd3442a949ca9568d4508ef2bee3f4b5a1c Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 14:18:35 +0330 Subject: [PATCH 07/25] Fix a mistake in translating content/docs/rendering-elements.md Thanks to @sJJdGG Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index e2632b95b..cb25e51e1 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -10,7 +10,7 @@ next: components-and-props.html المان‌ها (elements) کوچک‌ترین جزء تشکیل‌دهنده برنامه‌های ری‌اکتی هستند. -یک المان آن‌ چیزی را که شما می‌خواهید روی صفحه ببینید نمایش می‌دهد: +یک المان آن‌ چیزی را که شما می‌خواهید روی صفحه ببینید توصیف میکند: ```js const element =

Hello, world

; From 7c2dab14114fb1b819ba8080c330d6231b1a6bbc Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 14:21:17 +0330 Subject: [PATCH 08/25] Fix a mistake in translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index cb25e51e1..e7688c640 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -20,7 +20,7 @@ const element =

Hello, world

; >**نکته:** > ->ممکن است بعضی‌ها المان‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المان‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما اینجا را مطالعه کنید. +>ممکن است بعضی‌ها المان‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المان‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما این بخش را مطالعه کنید. ## رندر شدن یک المان درون DOM {#rendering-an-element-into-the-dom} From 4c39503c24ab6c8ec357b21b65df3ab19549f0ac Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 14:26:23 +0330 Subject: [PATCH 09/25] Improve translation of content/docs/rendering-elements.md Thanks to @sJJdGG Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index e7688c640..c806f7531 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -32,7 +32,7 @@ const element =

Hello, world

; ما این المان‌ را یک DOM node "ریشه" نامگذاری می‌کنیم، به این دلیل‌ که هر چیزی که داخل آن قرار گیرد، توسط ری‌اکت DOM مدیریت می‌شود. -برنامه‌هایی که با فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node که بخواهید داشته‌باشید. +برنامه‌هایی که با فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. تابع `ReactDOM.render()` یک المان ری‌اکت را درون یک DOM node رندر می‌کند: From 511730cc60121ebd45872cec2a093acc64c12b6b Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 14:45:34 +0330 Subject: [PATCH 10/25] Improve translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index c806f7531..511305959 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -74,4 +74,4 @@ DOM ری‌اکت المان موردنظر و فرزندانش را با حال با وجود این‌که ما هر ثانیه یک المان که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط متن nodeی که تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. -براساس تجربه ما، تفکر درباره این‌که UI در یک زمان مشخص چگونه باشد، به جای این‌که چگونه آن را تغییر دهیم، از دسته‌ای از خطا‌ها پیش‌گیری می‌کند. +براساس تجربه ما، تفکر درباره این‌که UI در یک زمان مشخص چگونه به نظر بیاید، به جای این‌که چگونه آن را در طول زمان تغییر دهیم، یک دسته کامل از باگ‌ها را از بین می‌برد. From ca5a0a48cd1385d721051a6fbd246529ee653110 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 14:46:23 +0330 Subject: [PATCH 11/25] Fix some issues in translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 511305959..eb484f8fe 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -72,6 +72,6 @@ DOM ری‌اکت المان موردنظر و فرزندانش را با حال ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) -با وجود این‌که ما هر ثانیه یک المان که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط متن nodeی که تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. +با وجود این‌که ما هر ثانیه یک المان که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط node متنی که محتویاتش تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. براساس تجربه ما، تفکر درباره این‌که UI در یک زمان مشخص چگونه به نظر بیاید، به جای این‌که چگونه آن را در طول زمان تغییر دهیم، یک دسته کامل از باگ‌ها را از بین می‌برد. From 4f3aff423951614292cd43f1cbc113576b3c7585 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 14:47:23 +0330 Subject: [PATCH 12/25] Enhance the translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index eb484f8fe..7a12a99be 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -16,7 +16,7 @@ next: components-and-props.html const element =

Hello, world

; ``` -برخلاف المان‌های ‌DOM مرورگر، المان‌های ری‌اکت اشیاء ساده‌ای هستند که ایجاد آن‌ها هزینه چندانی ندارد. وظیفه DOM ری‌اکت به‌روز رسانی DOM [مرورگر] است و اطمینان از این‌که دقیقا با المان‌های ری‌اکت یکسان باشد. +برخلاف المان‌های ‌DOM مرورگر، المان‌های ری‌اکت اشیاء ساده‌ای هستند که ایجاد آن‌ها هزینه چندانی ندارد. وظیفه ری‌اکت DOM به‌روز رسانی DOM است و اطمینان از این‌که دقیقا با المان‌های ری‌اکت یکسان باشد. >**نکته:** > From fd7bf42b05076de4e442b6d86d2ed0b3e2ec1a09 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:15:14 +0330 Subject: [PATCH 13/25] Apply a fix to improve translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 7a12a99be..d32339f2b 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -60,7 +60,7 @@ const element =

Hello, world

; >**نکته:** > -> در عمل، بیشتر برنامه‌های ری‌اکت فقط یک دفعه `ReactDOM.render()` را فراخوانی می‌کنند. در بخش‌های بعدی یاد می‌گیریم که چگونه چنین کد‌هایی به صورت [کامپوننت‌های دارای state](/docs/state-and-lifecycle.html) کپسوله می‌شوند. +> در عمل، بیشتر برنامه‌های ری‌اکت تنها یک بار `ReactDOM.render()` را فراخوانی می‌کنند. در بخش‌های بعدی یاد می‌گیریم که چگونه چنین کد‌هایی به صورت [کامپوننت‌های دارای state](/docs/state-and-lifecycle.html) کپسوله می‌شوند. > > از آن‌جا که هر بخش با استناد به موضوع‌های پیشین نوشته‌ شده‌است، پیشنهاد می‌کنیم به‌ترتیب پیش بروید. From 9f3e4d42bf44f2c70e6aa241bcd9eaea57eaed59 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:15:44 +0330 Subject: [PATCH 14/25] Improve translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index d32339f2b..6aad8bee5 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -32,7 +32,7 @@ const element =

Hello, world

; ما این المان‌ را یک DOM node "ریشه" نامگذاری می‌کنیم، به این دلیل‌ که هر چیزی که داخل آن قرار گیرد، توسط ری‌اکت DOM مدیریت می‌شود. -برنامه‌هایی که با فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. +برنامه‌هایی که فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. تابع `ReactDOM.render()` یک المان ری‌اکت را درون یک DOM node رندر می‌کند: From 782b2f80670f1f08d8f878d28d6091672fbe3b8c Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:16:36 +0330 Subject: [PATCH 15/25] Enhance translation of content/docs/rendering-elements.md page Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 6aad8bee5..9ffd56a61 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -62,7 +62,7 @@ const element =

Hello, world

; > > در عمل، بیشتر برنامه‌های ری‌اکت تنها یک بار `ReactDOM.render()` را فراخوانی می‌کنند. در بخش‌های بعدی یاد می‌گیریم که چگونه چنین کد‌هایی به صورت [کامپوننت‌های دارای state](/docs/state-and-lifecycle.html) کپسوله می‌شوند. > -> از آن‌جا که هر بخش با استناد به موضوع‌های پیشین نوشته‌ شده‌است، پیشنهاد می‌کنیم به‌ترتیب پیش بروید. +> از آن‌جا که هر بخش با استناد به موضوع‌های پیشین نوشته‌ شده‌است، پیشنهاد می‌کنیم هیچ موضوعی را از قلم نیندازید. ## ری‌اکت تنها چیز‌هایی که نیاز‌ هست را به‌روز رسانی می‌کند {#react-only-updates-whats-necessary} From 6bb920bffa9a8ac205e59fadc730e241998c7c95 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:17:48 +0330 Subject: [PATCH 16/25] Update content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 9ffd56a61..227c18038 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -66,7 +66,7 @@ const element =

Hello, world

; ## ری‌اکت تنها چیز‌هایی که نیاز‌ هست را به‌روز رسانی می‌کند {#react-only-updates-whats-necessary} -DOM ری‌اکت المان موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. +DOM ری‌اکت المان موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های DOM مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. برای اطمینان، [مثال قبلی](codepen://rendering-elements/update-rendered-element) را با استفاده از ابزارهای مرورگر بررسی کنید: From 2a9bd676b1b8387ea12253cefb168fe82e824ad4 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:19:28 +0330 Subject: [PATCH 17/25] Apply a fix suggested by @sJJdGG in translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 227c18038..91e7f794a 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -34,7 +34,7 @@ const element =

Hello, world

; برنامه‌هایی که فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. -تابع `ReactDOM.render()` یک المان ری‌اکت را درون یک DOM node رندر می‌کند: +برای رندر کردن یه المان ری‌اکت درون یه DOM node ریشه، هر دو را به `ReactDOM.render()` بدهید `embed:rendering-elements/render-an-element.js` From d6e041edff950f420d458e5109edcaa586e9da0a Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:20:03 +0330 Subject: [PATCH 18/25] Update content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 91e7f794a..9fbf817a9 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -45,7 +45,7 @@ const element =

Hello, world

; ## به‌روز‌رسانی المان رندر شده {#updating-the-rendered-element} -المان‌های ری‌اکت [تغییر ناپدیر](https://en.wikipedia.org/wiki/Immutable_object) هستند. زمانی که یک المان ری‌اکت را ایجاد می‌کنید، دیگر قادر به تغییر فرزندان و خصوصیات آن نخواهید بود. یک المان را مانند یک فریم از یک فیلم تصور کنید که UI را در یک نقطه زمانی مشخص نشان می‌دهد. +المان‌های ری‌اکت [تغییر ناپدیر](https://en.wikipedia.org/wiki/Immutable_object) هستند. زمانی که یک المان را ایجاد می‌کنید، دیگر قادر به تغییر فرزندان یا خصوصیات آن نخواهید بود. یک المان را مانند یک فریم از یک فیلم تصور کنید که UI را در یک نقطه زمانی مشخص نشان می‌دهد. با اطلاعاتی که تا این‌جا به‌دست آورده‌ایم، تنها راه به‌روز رسانی UI این است که یک المان جدید ساخته و آن را به تابع `ReactDOM.render()` بدهیم. From d52f2f818ec294c50ef4c7e931d99b2383edf3da Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Mon, 4 Mar 2019 19:21:45 +0330 Subject: [PATCH 19/25] Fix a mistake in content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 9fbf817a9..0b7540bb8 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -56,7 +56,7 @@ const element =

Hello, world

; [با CodePen امتحان کنید](codepen://rendering-elements/update-rendered-element) -در این مثال تابع `ReactDOM.render()` هربار توسط callback تابع [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) فراخوانی می‌شود. +در این مثال تابع `ReactDOM.render()` هربار توسط callback تابع [`()setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) فراخوانی می‌شود. >**نکته:** > From 79cb224b7b7b7fbf3a4d906516564bc42941f409 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Tue, 5 Mar 2019 16:29:51 +0330 Subject: [PATCH 20/25] Use a better word for "element" --- content/docs/rendering-elements.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 0b7540bb8..73332a131 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -1,6 +1,6 @@ --- id: rendering-elements -title: رندر شدن المان‌ها +title: رندر شدن المنت‌ها permalink: docs/rendering-elements.html redirect_from: - "docs/displaying-data.html" @@ -8,21 +8,21 @@ prev: introducing-jsx.html next: components-and-props.html --- -المان‌ها (elements) کوچک‌ترین جزء تشکیل‌دهنده برنامه‌های ری‌اکتی هستند. +المنت‌ها (elements) کوچک‌ترین جزء تشکیل‌دهنده برنامه‌های ری‌اکتی هستند. -یک المان آن‌ چیزی را که شما می‌خواهید روی صفحه ببینید توصیف میکند: +یک المنت آن‌ چیزی را که شما می‌خواهید روی صفحه ببینید توصیف میکند: ```js const element =

Hello, world

; ``` -برخلاف المان‌های ‌DOM مرورگر، المان‌های ری‌اکت اشیاء ساده‌ای هستند که ایجاد آن‌ها هزینه چندانی ندارد. وظیفه ری‌اکت DOM به‌روز رسانی DOM است و اطمینان از این‌که دقیقا با المان‌های ری‌اکت یکسان باشد. +برخلاف المنت‌های ‌DOM مرورگر، المنت‌های ری‌اکت اشیاء ساده‌ای هستند که ایجاد آن‌ها هزینه چندانی ندارد. وظیفه ری‌اکت DOM به‌روز رسانی DOM است و اطمینان از این‌که دقیقا با المنت‌های ری‌اکت یکسان باشد. >**نکته:** > ->ممکن است بعضی‌ها المان‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المان‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما این بخش را مطالعه کنید. +>ممکن است بعضی‌ها المنت‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المنت‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما این بخش را مطالعه کنید. -## رندر شدن یک المان درون DOM {#rendering-an-element-into-the-dom} +## رندر شدن یک المنت درون DOM {#rendering-an-element-into-the-dom} فرض کنید یک `
` جایی در فایل HTML شما قرار دارد: @@ -30,11 +30,11 @@ const element =

Hello, world

;
``` -ما این المان‌ را یک DOM node "ریشه" نامگذاری می‌کنیم، به این دلیل‌ که هر چیزی که داخل آن قرار گیرد، توسط ری‌اکت DOM مدیریت می‌شود. +ما این المنت‌ را یک DOM node "ریشه" نامگذاری می‌کنیم، به این دلیل‌ که هر چیزی که داخل آن قرار گیرد، توسط ری‌اکت DOM مدیریت می‌شود. برنامه‌هایی که فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. -برای رندر کردن یه المان ری‌اکت درون یه DOM node ریشه، هر دو را به `ReactDOM.render()` بدهید +برای رندر کردن یه المنت ری‌اکت درون یه DOM node ریشه، هر دو را به `ReactDOM.render()` بدهید `embed:rendering-elements/render-an-element.js` @@ -43,11 +43,11 @@ const element =

Hello, world

; این کد روی صفحه "Hello, world" را نمایش می‌دهد. -## به‌روز‌رسانی المان رندر شده {#updating-the-rendered-element} +## به‌روز‌رسانی المنت رندر شده {#updating-the-rendered-element} -المان‌های ری‌اکت [تغییر ناپدیر](https://en.wikipedia.org/wiki/Immutable_object) هستند. زمانی که یک المان را ایجاد می‌کنید، دیگر قادر به تغییر فرزندان یا خصوصیات آن نخواهید بود. یک المان را مانند یک فریم از یک فیلم تصور کنید که UI را در یک نقطه زمانی مشخص نشان می‌دهد. +المنت‌های ری‌اکت [تغییر ناپدیر](https://en.wikipedia.org/wiki/Immutable_object) هستند. زمانی که یک المنت را ایجاد می‌کنید، دیگر قادر به تغییر فرزندان یا خصوصیات آن نخواهید بود. یک المنت را مانند یک فریم از یک فیلم تصور کنید که UI را در یک نقطه زمانی مشخص نشان می‌دهد. -با اطلاعاتی که تا این‌جا به‌دست آورده‌ایم، تنها راه به‌روز رسانی UI این است که یک المان جدید ساخته و آن را به تابع `ReactDOM.render()` بدهیم. +با اطلاعاتی که تا این‌جا به‌دست آورده‌ایم، تنها راه به‌روز رسانی UI این است که یک المنت جدید ساخته و آن را به تابع `ReactDOM.render()` بدهیم. این مثال ساعت را درنظر بگیرید: @@ -66,12 +66,12 @@ const element =

Hello, world

; ## ری‌اکت تنها چیز‌هایی که نیاز‌ هست را به‌روز رسانی می‌کند {#react-only-updates-whats-necessary} -DOM ری‌اکت المان موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های DOM مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. +DOM ری‌اکت المنت موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های DOM مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. برای اطمینان، [مثال قبلی](codepen://rendering-elements/update-rendered-element) را با استفاده از ابزارهای مرورگر بررسی کنید: ![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif) -با وجود این‌که ما هر ثانیه یک المان که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط node متنی که محتویاتش تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. +با وجود این‌که ما هر ثانیه یک المنت که توصیف‌کننده کل UI است را ایجاد می‌کنیم، فقط node متنی که محتویاتش تغییر کرده‌است توسط ری‌اکت DOM به‌روز‌رسانی می‌شود. براساس تجربه ما، تفکر درباره این‌که UI در یک زمان مشخص چگونه به نظر بیاید، به جای این‌که چگونه آن را در طول زمان تغییر دهیم، یک دسته کامل از باگ‌ها را از بین می‌برد. From ac5dd4fa5475e2a6a0d493891dfc0c6c13706184 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 6 Mar 2019 12:04:28 +0330 Subject: [PATCH 21/25] Enhance translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 73332a131..6af0cac8e 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -1,6 +1,6 @@ --- id: rendering-elements -title: رندر شدن المنت‌ها +title: رندر کردن المنت‌ها permalink: docs/rendering-elements.html redirect_from: - "docs/displaying-data.html" From 614a32d0dd2880ae05aed53dd55c877bdc6f7c06 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 6 Mar 2019 12:04:46 +0330 Subject: [PATCH 22/25] Enhance translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 6af0cac8e..7796d0578 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -22,7 +22,7 @@ const element =

Hello, world

; > >ممکن است بعضی‌ها المنت‌ها را با "کامپوننت‌ها" (مفهومی که بیشتر جا افتاده‌است.) اشتباه بگیرند. ما کامپوننت‌ها را در [بخش بعدی](/docs/components-and-props.html) معرفی خواهیم‌کرد. المنت‌ها اجزائی هستند که کامپوننت‌ها از آن ساخته می‌شوند و ما به شما پیشنهاد می‌کنیم که پیش از رفتن به بخش بعدی، حتما این بخش را مطالعه کنید. -## رندر شدن یک المنت درون DOM {#rendering-an-element-into-the-dom} +## رندر کردن یک المنت درون DOM {#rendering-an-element-into-the-dom} فرض کنید یک `
` جایی در فایل HTML شما قرار دارد: From 4e2ce4e91cc5c7d82db24dd1cfec5acd444b6c4a Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 6 Mar 2019 12:08:20 +0330 Subject: [PATCH 23/25] Update content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index 7796d0578..ddadad3f7 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -34,7 +34,7 @@ const element =

Hello, world

; برنامه‌هایی که فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. -برای رندر کردن یه المنت ری‌اکت درون یه DOM node ریشه، هر دو را به `ReactDOM.render()` بدهید +برای رندر کردن یک المنت ری‌اکت درون یک DOM node ریشه، هر دو را به `ReactDOM.render()` بدهید `embed:rendering-elements/render-an-element.js` From 426f597d971f8d8bafd3e81dc4729ddef7204859 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 6 Mar 2019 12:10:56 +0330 Subject: [PATCH 24/25] Improve translation of content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index ddadad3f7..e01804d15 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -32,7 +32,7 @@ const element =

Hello, world

; ما این المنت‌ را یک DOM node "ریشه" نامگذاری می‌کنیم، به این دلیل‌ که هر چیزی که داخل آن قرار گیرد، توسط ری‌اکت DOM مدیریت می‌شود. -برنامه‌هایی که فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. +برنامه‌هایی که فقط با ری‌اکت ساخته می‌شوند، معمولا فقط یک DOM node ریشه دارند. اگر ری‌اکت را به یک برنامه موجود اضافه کنید، می‌توانید هر تعدادی از DOM node های ریشه‌ی ایزوله که بخواهید داشته‌باشید. برای رندر کردن یک المنت ری‌اکت درون یک DOM node ریشه، هر دو را به `ReactDOM.render()` بدهید From b06a454acf880d1e27eb3f676f1dfdbde242ab4c Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Thu, 7 Mar 2019 13:41:59 +0330 Subject: [PATCH 25/25] Fix a minor word replacement in content/docs/rendering-elements.md Co-Authored-By: sorousht --- content/docs/rendering-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md index e01804d15..4815442cd 100644 --- a/content/docs/rendering-elements.md +++ b/content/docs/rendering-elements.md @@ -66,7 +66,7 @@ const element =

Hello, world

; ## ری‌اکت تنها چیز‌هایی که نیاز‌ هست را به‌روز رسانی می‌کند {#react-only-updates-whats-necessary} -DOM ری‌اکت المنت موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های DOM مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. +ری‌اکت DOM المنت موردنظر و فرزندانش را با حالت پیشین آن مقایسه می‌کند و تنها به‌روز رسانی‌های DOM مورد نیاز را اعمال می‌کند تا ‌DOM را به وضعیت موردنظر برساند. برای اطمینان، [مثال قبلی](codepen://rendering-elements/update-rendered-element) را با استفاده از ابزارهای مرورگر بررسی کنید: