From 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 20 Mar 2019 13:03:43 -0700 Subject: [PATCH 01/31] Update languages for Simplified Chinese completion (#1854) * Update languages for Simplified Chinese completion * Update languages.yml --- content/languages.yml | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/content/languages.yml b/content/languages.yml index 5e0958260..524c41c73 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -66,11 +66,15 @@ - name: Italian translated_name: Italiano code: it - status: 0 + status: 1 - name: Japanese translated_name: 日本語 code: ja status: 2 +- name: Georgian + translated_name: ქართული + code: ka + status: 0 - name: Central Khmer translated_name: ភាសាខ្មែរ code: km @@ -126,6 +130,7 @@ - name: Swedish translated_name: Svenska code: sv + status: 0 - name: Tamil translated_name: தமிழ் code: ta @@ -134,6 +139,10 @@ translated_name: తెలుగు code: te status: 0 +- name: Thai + translated_name: ไทย + code: th + status: 0 - name: Turkish translated_name: Türkçe code: tr @@ -157,7 +166,7 @@ - name: Simplified Chinese translated_name: 简体中文 code: zh-hans - status: 1 + status: 2 - name: Traditional Chinese translated_name: 繁體中文 code: zh-hant From 30a121c20a5984752d196a3d36265098764c16fd Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Thu, 21 Mar 2019 18:34:22 +0330 Subject: [PATCH 02/31] Translate hello-world.md --- content/docs/hello-world.md | 39 +++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 2fff80254..aeaf5aece 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -1,12 +1,12 @@ --- id: hello-world -title: Hello World +title: سلام دنیا permalink: docs/hello-world.html prev: cdn-links.html next: introducing-jsx.html --- -The smallest React example looks like this: +کوچکترین مثال ری‌اکت به شکل زیر است: ```js ReactDOM.render( @@ -14,37 +14,34 @@ ReactDOM.render( document.getElementById('root') ); ``` +یک عنوان را روی صفحه نمایش می‌دهد که می‌گوید: "Hello, world!" -It displays a heading saying "Hello, world!" on the page. +**[روی CodePen امتحان کنید](codepen://hello-world)** -[](codepen://hello-world) +روی لینک بالا کلیک کنید تا یک ویرایشگر آنلاین باز شود. هر تغییری که می‌خواهید اعمال کنید و تاثیر آن را بر خروجی مشاهده کنید. بیشتر صفحات این راهنما، مثال‌های قابل ویرایشی مانند بالا دارند. -Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one. +## چگونه این راهنما را بخوانیم {#how-to-read-this-guide} -## How to Read This Guide {#how-to-read-this-guide} +در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شدید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده محدد بسازید. -In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces. - ->Tip +>راهنما > ->This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other. - -This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen. +>این راهنما برای افرادی طراحی شده‌است که ترجیح می‌دهند **مفاهیم را گام‌به‌گام بیاموزند**. اگر شما ترجیح می‌دهید انجام دهید و یاد بگیرید، به [آموزش عملی](/tutorial/tutorial.html) ما نگاهی بیاندازید. شاید این راهنما و آن آموزش برای شما مکمل یکدیگر باشند. -Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one. +این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در منوی سمت چپ مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید. -## Knowledge Level Assumptions {#knowledge-level-assumptions} +دانش هر فصل از این راهنما براساس مفاهیم ارائه‌شده در فصل‌های پیشین بنا می‌شود. **شما می‌توانید بیشتر ری‌اکت را با مطالعه سرفصل‌های راهنمای "مفاهیم پایه‌ای" که در منوی سمت چپ آورده‌ شده‌است، یاد بگیرید.** برای مثال، [“مقدمه‌ای بر JSX”](/docs/introducing-jsx.html) فصل بعدی است. -React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. **If you don't feel very confident, we recommend [going through a JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level** and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time. ->Note -> ->This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way. +## تخمین سطح دانش {#knowledge-level-assumptions} +ری‌اکت یک کتابخانه جاوااسکریپت است، و بنابراین ما بر این گمانیم که شما درک پایه‌ای از زبان جاوااسکریپت دارید. **اگر خیلی مطمئن نیستید، ما پیشنهاد می‌کنیم به [آموزش عمیق جاوااسکریپت](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) مراجعه کنید تا سطح دانش خود را بررسی کنید** و همچنین این راهنما را به آسانی دنبال کنید. این کار ممکن است برای شما بین ۳۰ دقیقه تا یک ساعت به طول بیانجامد، اما در نتیجه این حس را نخواهید داشت که [با خواندن این راهنما] ری‌اکت و جاوااسکریپت را همزمان یاد می‌گیرید. -## Let's Get Started! {#lets-get-started} - -Keep scrolling down, and you'll find the link to the [next chapter of this guide](/docs/introducing-jsx.html) right before the website footer. +>نکته +> +>این راهنما در اغلب مثال‌ها از نگارش جدید جاوااسکریپت استفاده می‌کند. اگر در چند سال اخیر با جاوااسکریپت کار نکرده‌اید، این [این سه مورد](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) بیشتر موارد را به شما یاد می‌دهد. +## بیایید شروع کنیم! {#lets-get-started} +به پایین اسکرول کنید و لینک [فصل بعدی این راهنما](/docs/introducing-jsx.html) را پیش از footer وبسایت پیدا می‌کنید. From 0c48554af8e733090d4d381783075e8f784efd27 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Sun, 24 Mar 2019 11:38:45 +0430 Subject: [PATCH 03/31] Fix a spelling error --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index aeaf5aece..fbbf82f68 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -23,7 +23,7 @@ ReactDOM.render( ## چگونه این راهنما را بخوانیم {#how-to-read-this-guide} -در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شدید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده محدد بسازید. +در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شدید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده مجدد بسازید. >راهنما > From e744030ad0c65bcd062b27ca1f442b1dd1c8f1dc Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Mon, 25 Mar 2019 12:41:48 -0700 Subject: [PATCH 04/31] removed line as functions can have state now too (#1783) * removed line as functions can have state now too * removed this.setState line from docs --- content/docs/reference-glossary.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e91fa9eef..bdf3587a5 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -122,7 +122,7 @@ class Welcome extends React.Component { A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state. +The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. From ee4188ba072e349ea04a4884ffc08e65ae0c2b57 Mon Sep 17 00:00:00 2001 From: Jenn Creighton Date: Mon, 25 Mar 2019 17:07:34 -0400 Subject: [PATCH 05/31] remove ReactWeek from Conference list (#1864) --- content/community/conferences.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index ea8613c78..833e44c40 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -52,11 +52,6 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) -### React Week '19 {#RWNY19} -July 15-21, 2019. New York City, USA - -[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek) - ### React Rally 2019 August 22-23, 2019. Salt Lake City, USA. From 448b7f1a2093011279227ca2e5189e4b9228c306 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Mar 2019 22:49:13 -0700 Subject: [PATCH 06/31] Remove ReactNYC meetup from the list --- content/community/meetups.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/community/meetups.md b/content/community/meetups.md index d397a4535..b3f099c81 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -130,7 +130,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/) * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) -* [New York, NY - ReactNYC](https://www.meetup.com/ReactNYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) From a1a7ec3a04617ba00de6169a35a7cb4f84811935 Mon Sep 17 00:00:00 2001 From: pixelyunicorn Date: Mon, 25 Mar 2019 22:56:24 -0700 Subject: [PATCH 07/31] Added RQ React meetup in Philadelphia (#1866) --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index b3f099c81..4c18b1311 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -131,6 +131,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) +* [Philadelphia, PA - ReactJS](https://www.meetup.com/RQ-React/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) * [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) From 6faeeb809f4f27a34575f881038042f4dd97ef54 Mon Sep 17 00:00:00 2001 From: pavan Date: Tue, 26 Mar 2019 11:28:15 +0530 Subject: [PATCH 08/31] Adding immer in the list of immutable libraries (#1839) * Adding immer in the list of immutable libraries * Update optimizing-performance.md --- content/docs/optimizing-performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index e42bad7b7..959332976 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -430,6 +430,6 @@ x === z; // true In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`. -Two other libraries that can help use immutable data are [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) and [immutability-helper](https://github.com/kolodny/immutability-helper). +Other libraries that can help use immutable data include [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), and [seamless-immutable](https://github.com/rtfeldman/seamless-immutable). Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost. From 2304fa1a7c34b719c10cca1023003e22bf0fd137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmad=20Awais=20=E2=9A=A1=EF=B8=8F?= Date: Wed, 27 Mar 2019 00:36:15 +0500 Subject: [PATCH 09/31] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20Add=20React.js=20La?= =?UTF-8?q?hore=20Meetup=20Group=20(#1873)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds a relatively new sub-meetup-group of a Cloud Developers meetup group in the city of Lahore. --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index 4c18b1311..8bd1155d0 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Pakistan {#pakistan} * [Karachi](https://www.facebook.com/groups/902678696597634/) +* [Lahore](https://www.facebook.com/groups/ReactjsLahore/) ## Peru {#peru} * [Lima](https://www.meetup.com/ReactJS-Peru/) From 5b0c1d4dcbf6c240e65525225226e5d279ea5af4 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:14:03 +0430 Subject: [PATCH 10/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index fbbf82f68..e25910796 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -6,7 +6,7 @@ prev: cdn-links.html next: introducing-jsx.html --- -کوچکترین مثال ری‌اکت به شکل زیر است: +کوچکترین مثال ری‌اکت شبیه این است: ```js ReactDOM.render( From c53fbb17815a987d2e54add74562d6312c471c83 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:15:12 +0430 Subject: [PATCH 11/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index e25910796..c4c28af6f 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -14,7 +14,7 @@ ReactDOM.render( document.getElementById('root') ); ``` -یک عنوان را روی صفحه نمایش می‌دهد که می‌گوید: "Hello, world!" +این مثال یک عنوان را روی صفحه نمایش می‌دهد که می‌گوید: "Hello, world!" **[روی CodePen امتحان کنید](codepen://hello-world)** From ab9e0e4dda04c0f24b8cbbdcbcb9ea28a06b9512 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:16:19 +0430 Subject: [PATCH 12/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index c4c28af6f..5c66170b7 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -18,7 +18,7 @@ ReactDOM.render( **[روی CodePen امتحان کنید](codepen://hello-world)** -روی لینک بالا کلیک کنید تا یک ویرایشگر آنلاین باز شود. هر تغییری که می‌خواهید اعمال کنید و تاثیر آن را بر خروجی مشاهده کنید. بیشتر صفحات این راهنما، مثال‌های قابل ویرایشی مانند بالا دارند. +روی لینک بالا کلیک کنید تا یک ویرایشگر آنلاین باز شود. هر تغییری که می‌خواهید اعمال کنید و تاثیر آن را بر خروجی مشاهده کنید. بیشتر صفحات در این راهنما، مثال‌های قابل ویرایشی مانند بالا دارند. ## چگونه این راهنما را بخوانیم {#how-to-read-this-guide} From 06f40f5c76ad70786524a92ccb8a6fd6fa37ecc6 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:16:52 +0430 Subject: [PATCH 13/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 5c66170b7..afd1b9a5d 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -23,7 +23,7 @@ ReactDOM.render( ## چگونه این راهنما را بخوانیم {#how-to-read-this-guide} -در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شدید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده مجدد بسازید. +در این راهنما، ما به بررسی اجزا سازنده برنامه‌های ری‌اکت یعنی: المنت‌ها و کامپوننت‌ها می‌پردازیم. زمانی که شما به آن‌ها مسلط شوید، می‌توانید برنامه‌های پیچیده را از تکه‌های کوچکتر با قابلیت استفاده مجدد بسازید. >راهنما > From 87ebd4b638994af371d4e333d04fe62ac3a11d79 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:17:30 +0430 Subject: [PATCH 14/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index afd1b9a5d..dbb18ab4b 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -27,7 +27,7 @@ ReactDOM.render( >راهنما > ->این راهنما برای افرادی طراحی شده‌است که ترجیح می‌دهند **مفاهیم را گام‌به‌گام بیاموزند**. اگر شما ترجیح می‌دهید انجام دهید و یاد بگیرید، به [آموزش عملی](/tutorial/tutorial.html) ما نگاهی بیاندازید. شاید این راهنما و آن آموزش برای شما مکمل یکدیگر باشند. +>این راهنما برای افرادی طراحی شده‌است که ترجیح می‌دهند **مفاهیم را گام‌به‌گام بیاموزند**. اگر شما ترجیح می‌دهید به وسیله انجام‌دادن یاد بگیرید، به [آموزش عملی](/tutorial/tutorial.html) ما نگاهی بیاندازید. شاید این راهنما و آن آموزش برای شما مکمل یکدیگر باشند. این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در منوی سمت چپ مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید. From 496f2e4625089a0901b23360c4225f30cc282044 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:18:31 +0430 Subject: [PATCH 15/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index dbb18ab4b..913ddbaff 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -29,7 +29,7 @@ ReactDOM.render( > >این راهنما برای افرادی طراحی شده‌است که ترجیح می‌دهند **مفاهیم را گام‌به‌گام بیاموزند**. اگر شما ترجیح می‌دهید به وسیله انجام‌دادن یاد بگیرید، به [آموزش عملی](/tutorial/tutorial.html) ما نگاهی بیاندازید. شاید این راهنما و آن آموزش برای شما مکمل یکدیگر باشند. -این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در منوی سمت چپ مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید. +این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در نوار کناری مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه در گوشه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید. دانش هر فصل از این راهنما براساس مفاهیم ارائه‌شده در فصل‌های پیشین بنا می‌شود. **شما می‌توانید بیشتر ری‌اکت را با مطالعه سرفصل‌های راهنمای "مفاهیم پایه‌ای" که در منوی سمت چپ آورده‌ شده‌است، یاد بگیرید.** برای مثال، [“مقدمه‌ای بر JSX”](/docs/introducing-jsx.html) فصل بعدی است. From 3275589f83552074864eb9af033cee49d1038082 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:19:31 +0430 Subject: [PATCH 16/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 913ddbaff..3036b486f 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -34,7 +34,7 @@ ReactDOM.render( دانش هر فصل از این راهنما براساس مفاهیم ارائه‌شده در فصل‌های پیشین بنا می‌شود. **شما می‌توانید بیشتر ری‌اکت را با مطالعه سرفصل‌های راهنمای "مفاهیم پایه‌ای" که در منوی سمت چپ آورده‌ شده‌است، یاد بگیرید.** برای مثال، [“مقدمه‌ای بر JSX”](/docs/introducing-jsx.html) فصل بعدی است. -## تخمین سطح دانش {#knowledge-level-assumptions} +## فرض‌های سطح دانش {#knowledge-level-assumptions} ری‌اکت یک کتابخانه جاوااسکریپت است، و بنابراین ما بر این گمانیم که شما درک پایه‌ای از زبان جاوااسکریپت دارید. **اگر خیلی مطمئن نیستید، ما پیشنهاد می‌کنیم به [آموزش عمیق جاوااسکریپت](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) مراجعه کنید تا سطح دانش خود را بررسی کنید** و همچنین این راهنما را به آسانی دنبال کنید. این کار ممکن است برای شما بین ۳۰ دقیقه تا یک ساعت به طول بیانجامد، اما در نتیجه این حس را نخواهید داشت که [با خواندن این راهنما] ری‌اکت و جاوااسکریپت را همزمان یاد می‌گیرید. From 96951e06c5f04803c371de30e9065783e590e2ed Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:20:09 +0430 Subject: [PATCH 17/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 3036b486f..67a69f21a 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -40,7 +40,7 @@ ReactDOM.render( >نکته > ->این راهنما در اغلب مثال‌ها از نگارش جدید جاوااسکریپت استفاده می‌کند. اگر در چند سال اخیر با جاوااسکریپت کار نکرده‌اید، این [این سه مورد](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) بیشتر موارد را به شما یاد می‌دهد. +>این راهنما در اغلب مثال‌ها از نگارش جدید جاوااسکریپت استفاده می‌کند. اگر در چند سال اخیر با جاوااسکریپت کار نکرده‌اید، [این سه مورد](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) بیشتر موارد را به شما یاد می‌دهد. ## بیایید شروع کنیم! {#lets-get-started} From 78d3ad00d482738f8bcd6333883b7a9f043f7b78 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:22:12 +0430 Subject: [PATCH 18/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 67a69f21a..2d8cbb457 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -31,7 +31,7 @@ ReactDOM.render( این اولین فصل از راهنمای گام‌به‌گام درباره مفاهیم اصلی ری‌اکت است. شما می‌توانید لیستی از تمام سرفصل‌ها را در نوار کناری مشاهده‌ کنید. اگر با موبایل درحال خواندن این راهنما هستید، با زدن دکمه در گوشه پایین سمت چپ صفحه می‌توانید به منو دسترسی پیدا کنید. -دانش هر فصل از این راهنما براساس مفاهیم ارائه‌شده در فصل‌های پیشین بنا می‌شود. **شما می‌توانید بیشتر ری‌اکت را با مطالعه سرفصل‌های راهنمای "مفاهیم پایه‌ای" که در منوی سمت چپ آورده‌ شده‌است، یاد بگیرید.** برای مثال، [“مقدمه‌ای بر JSX”](/docs/introducing-jsx.html) فصل بعدی است. +هر فصل در این راهنما براساس دانش معرفی‌شده در فصل‌های پیشین بنا می‌شود. **شما می‌توانید بیشتر ری‌اکت را با مطالعه فصل‌های راهنمای "مفاهیم اصلی" به ترتیبی که در نوار کناری آورده‌‌ شده است، یاد بگیرید.** برای مثال، [“مقدمه‌ای بر JSX”](/docs/introducing-jsx.html) فصل بعدی بعد از این فصل است. ## فرض‌های سطح دانش {#knowledge-level-assumptions} From d36d33414d3d3b1b591d680886e869340022db07 Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:23:47 +0430 Subject: [PATCH 19/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 2d8cbb457..4c541c845 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -36,7 +36,7 @@ ReactDOM.render( ## فرض‌های سطح دانش {#knowledge-level-assumptions} -ری‌اکت یک کتابخانه جاوااسکریپت است، و بنابراین ما بر این گمانیم که شما درک پایه‌ای از زبان جاوااسکریپت دارید. **اگر خیلی مطمئن نیستید، ما پیشنهاد می‌کنیم به [آموزش عمیق جاوااسکریپت](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) مراجعه کنید تا سطح دانش خود را بررسی کنید** و همچنین این راهنما را به آسانی دنبال کنید. این کار ممکن است برای شما بین ۳۰ دقیقه تا یک ساعت به طول بیانجامد، اما در نتیجه این حس را نخواهید داشت که [با خواندن این راهنما] ری‌اکت و جاوااسکریپت را همزمان یاد می‌گیرید. +ری‌اکت یک کتابخانه جاوااسکریپت است، و بنابراین ما فرض می‌کنیم که شما درک پایه‌ای از زبان جاوااسکریپت دارید. **اگر خیلی مطمئن نیستید، پیشنهاد می‌کنیم [یک آموزش جاوااسکریپت را طی کنید](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) تا سطح دانش خود را بررسی کنید** و بتوانید این راهنما را بدون گمراهی دنبال کنید. این کار ممکن است برای شما بین ۳۰ دقیقه تا یک ساعت به طول بیانجامد، اما در نتیجه این حس را نخواهید داشت که [با خواندن این راهنما] ری‌اکت و جاوااسکریپت را همزمان یاد می‌گیرید. >نکته > From 7df35ef999c504e835d17943c9c327fa16bcf64b Mon Sep 17 00:00:00 2001 From: sJJdGG <25764288+sJJdGG@users.noreply.github.com> Date: Wed, 27 Mar 2019 19:24:31 +0430 Subject: [PATCH 20/31] Update content/docs/hello-world.md Co-Authored-By: sorousht --- content/docs/hello-world.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md index 4c541c845..a14461e79 100644 --- a/content/docs/hello-world.md +++ b/content/docs/hello-world.md @@ -44,4 +44,4 @@ ReactDOM.render( ## بیایید شروع کنیم! {#lets-get-started} -به پایین اسکرول کنید و لینک [فصل بعدی این راهنما](/docs/introducing-jsx.html) را پیش از footer وبسایت پیدا می‌کنید. +به پایین اسکرول کردن ادامه دهید و لینک [فصل بعدی این راهنما](/docs/introducing-jsx.html) را پیش از footer وبسایت پیدا می‌کنید. From 9080ec3fabac82ce88cd056e890a443686042ee8 Mon Sep 17 00:00:00 2001 From: Mohsen Khanpour Date: Wed, 27 Mar 2019 19:41:12 +0430 Subject: [PATCH 21/31] Update TRANSLATION.md --- TRANSLATION.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index d0f21baaa..db42cae0d 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -61,6 +61,14 @@ داده + + + + element + + + المنت + @@ -243,6 +251,11 @@ RFC + + + + scope + @@ -268,4 +281,4 @@

اگر فکر می‌کنید چیزی فراموش شده‌است یا نیاز به تصحیح دارد، حتما نظر خود را با ما درمیان بگذارید. -

\ No newline at end of file +

From 4541a8ff10f7f95ce1fdde1fbb9ae9280ec30b43 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 27 Mar 2019 19:15:43 -0700 Subject: [PATCH 22/31] Update languages.yml --- content/languages.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/languages.yml b/content/languages.yml index 524c41c73..1660cecb7 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -146,7 +146,7 @@ - name: Turkish translated_name: Türkçe code: tr - status: 1 + status: 2 - name: Ukrainian translated_name: Українська code: uk From c6f99a6d9a7d69138a5ea243b3b83cab710f7769 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 27 Mar 2019 19:16:47 -0700 Subject: [PATCH 23/31] Add kannada to languages --- content/languages.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/languages.yml b/content/languages.yml index 1660cecb7..844607526 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -79,6 +79,10 @@ translated_name: ភាសាខ្មែរ code: km status: 0 +- name: Kannada + translated_name: ಕನ್ನಡ + code: kn + status: 0 - name: Korean translated_name: 한국어 code: ko From 2753191ee2a4fa9a1ecd13fb62aac2a975d9c749 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 28 Mar 2019 00:17:49 -0700 Subject: [PATCH 24/31] Bump React versions --- package.json | 4 ++-- src/site-constants.js | 2 +- yarn.lock | 28 ++++++++++++++-------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f1628e72e..3e255133b 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,8 @@ "normalize.css": "^8.0.0", "prettier": "^1.7.4", "prismjs": "^1.15.0", - "react": "16.8.3", - "react-dom": "16.8.3", + "react": "16.8.6", + "react-dom": "16.8.6", "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1", diff --git a/src/site-constants.js b/src/site-constants.js index f26103279..4618432e0 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -8,7 +8,7 @@ // NOTE: We can't just use `location.toString()` because when we are rendering // the SSR part in node.js we won't have a proper location. const urlRoot = 'https://reactjs.org'; -const version = '16.8.4'; +const version = '16.8.6'; const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js'; export {babelURL, urlRoot, version}; diff --git a/yarn.lock b/yarn.lock index a3859f100..246285339 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10220,15 +10220,15 @@ react-dev-utils@^4.2.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.3.tgz#ae236029e66210783ac81999d3015dfc475b9c32" - integrity sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA== +react-dom@16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" + integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" + scheduler "^0.13.6" react-error-overlay@^3.0.0: version "3.0.0" @@ -10282,15 +10282,15 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9" - integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA== +react@16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" + integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" + scheduler "^0.13.6" read-all-stream@^3.0.0: version "3.1.0" @@ -10964,10 +10964,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.13.3: - version "0.13.3" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896" - integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ== +scheduler@^0.13.6: + version "0.13.6" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" + integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From d0f2db967a38e358bd59c65e981862cdf38f3d0b Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Thu, 28 Mar 2019 15:51:37 -0700 Subject: [PATCH 25/31] removed sentence since functions can have state (#1878) With introduction of hooks, that statement is not valid anymore --- content/docs/state-and-lifecycle.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index cbd8f684a..3967ae7c9 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -72,8 +72,6 @@ To implement this, we need to add "state" to the `Clock` component. State is similar to props, but it is private and fully controlled by the component. -We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes. - ## Converting a Function to a Class {#converting-a-function-to-a-class} You can convert a function component like `Clock` to a class in five steps: From f39fcc8d8ac94134b1a53d087c63e7f1eeade778 Mon Sep 17 00:00:00 2001 From: Soroush Torkzadeh Date: Fri, 29 Mar 2019 20:22:30 +0430 Subject: [PATCH 26/31] Remove a sentece which was originally removed --- content/docs/state-and-lifecycle.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index 1833b6c0d..8c1622598 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -72,13 +72,6 @@ ReactDOM.render( state مشابه props است، اما خصوصی است و کاملا توسط کامپوننت کنترل می‌شود. -<<<<<<< HEAD -ما [قبلا ذکر کردیم](/docs/components-and-props.html#functional-and-class-components) به کامپوننت‌هایی که به صورت کلاس تعریف می‌شوند، قابلیت‌هایی افزوده می‌شود. state داخلی دقیقا همان است: قابلیتی که فقط برای کلاس‌ها موجود است. - -======= -## Converting a Function to a Class {#converting-a-function-to-a-class} ->>>>>>> d0f2db967a38e358bd59c65e981862cdf38f3d0b - ## تبدیل یک تابع به یک کلاس {#converting-a-function-to-a-class} شما می‌توانید یک کامپوننت برپایه تابع را در پنج مرحله به یک کلاس تبدیل کنید: From 59c3c0a1551841cedfc8478524808492289e61f5 Mon Sep 17 00:00:00 2001 From: Wojtek Date: Fri, 29 Mar 2019 20:05:00 +0100 Subject: [PATCH 27/31] Fix explanation of the `useState` example in 'Hooks API Reference' page (#1881) --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 98c2e14c0..24145eac2 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -67,7 +67,7 @@ function Counter({initialCount}) { } ``` -The "+" and "-" buttons use the functional form, because the updated value is based on the previous value. But the "Reset" button uses the normal form, because it always sets the count back to 0. +The "+" and "-" buttons use the functional form, because the updated value is based on the previous value. But the "Reset" button uses the normal form, because it always sets the count back to the initial value. > Note > From 8de5aff111bba0f04ff254aad1a084a2b2f48743 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Mon, 1 Apr 2019 23:53:19 -0700 Subject: [PATCH 28/31] Update languages.yml to show italian finishing --- content/languages.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/languages.yml b/content/languages.yml index 844607526..a7fe36f1f 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -66,7 +66,7 @@ - name: Italian translated_name: Italiano code: it - status: 1 + status: 2 - name: Japanese translated_name: 日本語 code: ja @@ -174,4 +174,4 @@ - name: Traditional Chinese translated_name: 繁體中文 code: zh-hant - status: 0 + status: 1 From c7dde3d237489c86afacc0df62e6b9b1055e023e Mon Sep 17 00:00:00 2001 From: Parker Bond Date: Wed, 3 Apr 2019 13:31:06 -0600 Subject: [PATCH 29/31] Add Chain React to conferences list (#1900) Chain React is a React Native focused conference put on yearly. This will be the 3rd year it has been held. --- content/community/conferences.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index 833e44c40..0c94b6c2a 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -52,6 +52,11 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) +### Chain React 2019 +July 11-12, 2019. Portland, OR, USA. + +[Website](https://infinite.red/ChainReactConf) + ### React Rally 2019 August 22-23, 2019. Salt Lake City, USA. @@ -59,6 +64,7 @@ August 22-23, 2019. Salt Lake City, USA. ### ComponentsConf 2019 {#componentsconf-2019} September 6, 2019 in Melbourne, Australia + [Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf) ### React Native EU 2019 {#react-native-eu-2019} From 2a1b08943c2c65bbf5a6a1e63777488833909f45 Mon Sep 17 00:00:00 2001 From: Camilo Giraldo Date: Wed, 3 Apr 2019 14:51:42 -0500 Subject: [PATCH 30/31] Fix 1640: Formatting for code blocks nested in blockquote (#1899) --- src/theme.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/theme.js b/src/theme.js index a4d445206..8d0c2735f 100644 --- a/src/theme.js +++ b/src/theme.js @@ -405,6 +405,10 @@ const sharedStyles = { marginTop: 0, }, }, + + '& .gatsby-highlight': { + marginLeft: 0, + }, }, '& .gatsby-highlight + blockquote': { From d2484f6473e3888f7a82e84215a0b7ce32bfde93 Mon Sep 17 00:00:00 2001 From: Forough Fallah Date: Wed, 10 Apr 2019 15:37:52 +0430 Subject: [PATCH 31/31] done with translation of conditional-rendering --- content/docs/conditional-rendering.md | 64 ++++++++++++++------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 7df19bb98..b2b3891ec 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -1,6 +1,6 @@ --- id: conditional-rendering -title: Conditional Rendering +title: رندر شرطی permalink: docs/conditional-rendering.html prev: handling-events.html next: lists-and-keys.html @@ -8,11 +8,12 @@ redirect_from: - "tips/false-in-jsx.html" --- -In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. + در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید تا رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید بعضی از این کامپوننت‌ها را، بسته به state برنامه، رندر کنید . -Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them. +رندر شرطی در ری اکت دقیقا مشابه «شرط‌ها» در جاوا‌اسکریپت کار میکند. +از عملگر‌های جاوااسکریپت مثل کلمه کلیدی [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) یا عملگر شرطی [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) برای ایجاد المنت‌هایی که state کنونی را نشان می‌دهند، استفاده کنید و بگذارید ری اکت UI را بروزرسانی کند تا با این شرط ها منطبق شود. -Consider these two components: +این دو کامپوننت را در نظر بگیرید: ```js function UserGreeting(props) { @@ -24,7 +25,7 @@ function GuestGreeting(props) { } ``` -We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in: + در ادامه ما یک کامپوننت تحت عنوان `Greeting` می‌سازیم، که یکی از دو کامپوننت اشاره شده در بالا را بر حسب اینکه یک کاربر لاگین کرده یا خیر، نشان می‌دهد: ```javascript{3-7,11,12} function Greeting(props) { @@ -36,21 +37,21 @@ function Greeting(props) { } ReactDOM.render( - // Try changing to isLoggedIn={true}: + //در خط زیر مقدار isLoggedIn را به true تغییر دهید‌‌(isLoggedIn={true}): , document.getElementById('root') ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) +[**کد بالا را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) -This example renders a different greeting depending on the value of `isLoggedIn` prop. +در مثال بالا، هر بار یک پیام خوش آمد‌گویی متفاوت بر‌اساس مقدارprop ای که `isLoggedIn` نام دارد، رندر می‌شود. -### Element Variables {#element-variables} +### متغیر‌های المان‌ها {#element-variables} -You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change. +برای ذخیره سازی المان‌ها می‌توان از متغیرها کمک گرفت، استفاده از این روش باعث می‌شود تا بتوان بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده در حالیکه بقیه خروجی کامپوننت تغییری نمی‌کند. -Consider these two new components representing Logout and Login buttons: +این دو کامپوننت جدید رو در نظر بگیرید که به ترتیب نمایانگر دکمه ورود (Login) و خروج (Logout) هستند. ```js function LoginButton(props) { @@ -70,9 +71,10 @@ function LogoutButton(props) { } ``` -In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`. +در مثال زیر، یک [ کامپوننتstateful](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) + به نام`LoginControl` می‌سازیم. -It will render either `` or `` depending on its current state. It will also render a `` from the previous example: +این کامپوننت براساس state کنونی اش، یکی از کامپوننت‌های `` یا`` را رندر می‌کند. ```javascript{20-25,29,30} class LoginControl extends React.Component { @@ -116,13 +118,13 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) +[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) -While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below. +در حالیکه روش تعریف یک متغیر و استفاده از عبارت شرطی `if`، یک روش خوب برای رندر شرطی است؛ گاهی ممکن است شما نیاز به یک syntax کوتاه‌تر داشته باشید. چندین روش برای شرط های خطی در JSX وجود دارد که در زیر توضیح داده شده است: -### Inline If with Logical && Operator {#inline-if-with-logical--operator} +### If خطی بااستفاده از اپراتور && منطقی {#inline-if-with-logical--operator} -You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: +شما می‌توانید هر عبارتی (شامل عملگر ‍‍‍‍`&&` منطقی در جاوااسکریپت)‌را در JSX با استفاده از یک جفت `{}`،‌استفاده کنید:‌ر.ک. [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx)؛ استفاده از این روش برای اضافه کردن یک المان به‌صورت شرطی، میتواند مفید باشد: ```js{6-10} function Mailbox(props) { @@ -146,17 +148,16 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) +[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) -It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`. +این روش جواب می‌دهد چرا که در جاوااسکریپت، حاصل `true && عبارت` همیشه برابر است با `عبارت` و همچنین حاصل `false && عبارت` ‍‍ همیشه برابر است با `false`. بنابراین اگر شرط برابر با `true` باشد، المانی که بلافاصله بعد از عملگر `&&` قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر با`false` باشد،‌ری‌اکت این عبارت را نادیده می‌گیرد. -Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it. +### If-Else خطی با عملگر شرطی {#inline-if-else-with-conditional-operator} -### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} +روش دیگری که برای رندر شرطی المان‌ها به‌صورت خطی استفاده می‌شود،‌استفاده از عملگر شرطی جاوااسکریپت [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) + است. -Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). - -In the example below, we use it to conditionally render a small block of text. +در مثال زیر ما از این روش استفاده می‌کنیم تا متن کوتاهی را به‌صورت شرطی رندر کنیم. ```javascript{5} render() { @@ -169,7 +170,7 @@ render() { } ``` -It can also be used for larger expressions although it is less obvious what's going on: +از این روش همچنین می‌توان برای عبارات شرطی طولانی‌تر استفاده نمود، اگرچه که در اینصورت کمتر مشخص است که در کد نوشته شده چه اتفاقی افتاده است: ```js{5,7,9} render() { @@ -186,13 +187,14 @@ render() { } ``` -Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components). +درست مثل زبان جاوااسکریپت،انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است.‌همچنین این نکته را در نظر داشته باشید که هرگاه شرط‌ها بیش از انداره پیچیده شدند،بهتر است که از روش [استخراج یک کامپوننت](/docs/components-and-props.html#extracting-components) استفاده کنید. + +### جلوگیری از رندر شدن یک کامپوننت {#preventing-component-from-rendering} -### Preventing Component from Rendering {#preventing-component-from-rendering} +گاهی پیش می‌آید که بخواهید یک کامپوننت-حتی اگر توسط یک کامپوننت دیگر رندر شده باشد- خودش را مخفی کند. برای انجام این کار، عبارت `null` را به‌جای خروجی تابع رندر کامپوننت برگردانید. -In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output. +در مثال زیر، کامپوننت `` بر‌اساس مقدار prop ای به‌نام `warn` رندر می‌شود. اگر مقدار این prop برابر با`false` باشد، در اینصورت این کامپوننت رندر نخواهد شد. -In the example below, the `` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render: ```javascript{2-4,29} function WarningBanner(props) { @@ -238,6 +240,6 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) +[**این کد را در CodePen امتحان کنید**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) -Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called. +برگرداندن مقدار `null`از متد `render` یک کامپوننت، نحوه فراخوانی و اجرای متد‌های lifecycle کامپونتت را تحت تاثیر قرار نمی‌دهد.‌برای مثال متد `componentDidUpdate` همچنان فراخوانی خواهد شد. \ No newline at end of file