From 60aadfbadcc78f40bf5f7cc318cf980ac2609580 Mon Sep 17 00:00:00 2001 From: Abolfazl Rezvani Naraqi Date: Wed, 12 Jul 2023 22:37:37 +0330 Subject: [PATCH 001/559] Update README.md remove one line --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index d2498783a..8d44ea483 100644 --- a/README.md +++ b/README.md @@ -106,12 +106,6 @@ yarn dev مرورگر دلخواه خود باز کنید و تمام!

-

- عزیزان بعد از ترجمه کار خود را کامیت و سپس پوش کنید. بعد از این کار یک PR در - فروفایل گیت شما مشخص می‌شود. و اینگونه ما PR شما رو بررسی و در صورت لازم به - پروژه اصلی اضافه می‌کنیم -

-

سوالی دارید؟

From be8b6ef475e58d6e7cc64764c172e42a6c6c4720 Mon Sep 17 00:00:00 2001 From: Nafas Ebrahimi Date: Thu, 21 Sep 2023 09:44:50 +0330 Subject: [PATCH 002/559] translate first 3 line of you-first-component file --- src/content/learn/your-first-component.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 343823aa4..6088c0a15 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -1,24 +1,24 @@ --- -title: Your First Component +title: اولین کامپوننت شما --- -*Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +*کامپوننت ها* یکی از مهمترین مباحث اصلی در ریکت است. آنها پایه و اساس رابط های کاربری هستند که مکان خوبی را برای سفر ریکتی شما فراهم میکند! -* What a component is -* What role components play in a React application -* How to write your first React component +* کامپوننت چیست +* قوانین اجرا و پیاده سازی کامپوننت در ریکت به چه صورت است +* چطور اولین کامپوننت خود را بنویسید -## Components: UI building blocks {/*components-ui-building-blocks*/} +## کامپوننت ها: بلوک های تشکیل دهنده یک UI {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +در وب, HTML به ما اجازه میدهد تا یک سند پیشرفته ای را توسط تگ هایی مانند `

    ` و`
  • ` بسازیم: ```html
    @@ -31,11 +31,11 @@ On the Web, HTML lets us create rich structured documents with its built-in set
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +در این بخش ما یک بخشی را با تگ `article` مشخص کردیم و یک تگ `h1` داریم که داخل آن متن داریم. یک لیست بعد از آن داریم که با تگ `ol` مشخص کردیم و این لیست دارای سه آیتم است. کد مانند بالا مسلما دارای یکسری کد CSS برای استایل دهی و کد Javascript برای داینامیک بودن هست. مثل منو ها, لیست های کشویی و آکاردئونی, مودال ها یا هرآن چیزی که در صفحات وب مشاهده میکنید. -React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
      `, `

      `, etc. +ریکت به شما اجازه میدهد بخش های سایتتان را داختل یک "کامپوننت" همراه با استایل و اسکریپت های مربوطه ذخیره کنید. در فهرست **reusable UI elements for your app.** شما خواهید دید که یک کامپوننتی مانند `` را میتوانید در هر صفحه ای از آن استفاده کنید و سپس در پشت صفحه همین کامپوننت تبدیل به تگ هایی مانند `

      ` و `
      ` شده است. -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +درست مانند تگ های HTML, شما میتوانید کامپوننت هارا برای همه صفحات بسازید, سفارشی سازی و ذخیره کنید. مانند همین داکیومنتی که الان درحال خواندن آن هستید متشکل از کامپوننت های React است. ```js From 7f14ac58db262cb7fda886dd995554b5ef39edae Mon Sep 17 00:00:00 2001 From: Nafas Ebrahimi Date: Fri, 22 Sep 2023 10:44:20 +0330 Subject: [PATCH 003/559] second edition on your-first-component file --- src/content/learn/your-first-component.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 6088c0a15..7ce71a7bb 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -1,5 +1,5 @@ --- -title: اولین کامپوننت شما +title: Your First Component --- @@ -51,11 +51,11 @@ title: اولین کامپوننت شما ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI.](https://material-ui.com/) +همانطور که پروژه شما بزرگ و بزرگتر میشود, توجه خواهید کرد که بسیاری از دیزاین هایی که تبدیل به کامپوننت شدند را میتوانید در هرجایی از صفحات پروژه استفاده کنید و سرعت توسعه را بالا ببرید. همچنین میتوانید در پروژه های خود از کامپوننت یا کتابخانه های آماده ای که تیم React منتشر کرده اند مثل [Material UI.](https://material-ui.com/) و [Chakra UI](https://chakra-ui.com/) استفاده کنید. -## Defining a component {/*defining-a-component*/} +## تعریف یک کامپوونت {/*defining-a-component*/} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_.** Here's what that looks like (you can edit the example below): +قبلا برای ساخت صفحات وب از تگ های HTML استفاده و برای داینامیک کردن آنها کد های جاوااسکریپتی نوشته میشد, که در زمان خود راه خوبی بود. ولی امروزه چون توی صفحات وب میخواهیم اینتراکشن و پویای بیشتری داشته باشند باید اسکریپت های بیشتری اضافه کنیم. که React تعامل را اولویت قرار میدهد ولی هنوز از همان تکنولوژی استفاده میکند: **یک کامپوننت React تابع جاوااسکریپتی است که شما میتوانید تگ های HTML را در آن بنویسید**که به این صورت نوشته میشود (میتوانید مثال زیر را تغییر دهید) @@ -76,15 +76,15 @@ img { height: 200px; } -And here's how to build a component: +نحوه ساخت کامپوننت: -### Step 1: Export the component {/*step-1-export-the-component*/} +### قدم اول: خروجی گرفتن (Export) یک کامپوننت {/*step-1-export-the-component*/} + +دستور `export default` یک پیشوند در زبان جاوااسکریپت است [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (نه فقط در React), به شما اجازه میدهد که تابع اصلی خود را در فایل مشخص کنید و در فایل دیگر import کنید. (درباره Import بدانید [Importing and Exporting Components](/learn/importing-and-exporting-components)!) -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +### Step 2: تعریف و ایجاد تابع {/*step-2-define-the-function*/} -### Step 2: Define the function {/*step-2-define-the-function*/} - -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +با دستور `function Profile() { }` شما میتوانید یک تابع جاوااسکریپتی با نام `Profile` تعریف کنید. From c3199de71d8f933086f2df5bb916b9cac6c22d70 Mon Sep 17 00:00:00 2001 From: Nafas Ebrahimi Date: Mon, 25 Sep 2023 12:46:11 +0330 Subject: [PATCH 004/559] translate some lines on your-first-component file --- src/content/learn/your-first-component.md | 28 +++++++++++------------ 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 7ce71a7bb..8baea99e4 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -82,27 +82,27 @@ img { height: 200px; } دستور `export default` یک پیشوند در زبان جاوااسکریپت است [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (نه فقط در React), به شما اجازه میدهد که تابع اصلی خود را در فایل مشخص کنید و در فایل دیگر import کنید. (درباره Import بدانید [Importing and Exporting Components](/learn/importing-and-exporting-components)!) -### Step 2: تعریف و ایجاد تابع {/*step-2-define-the-function*/} +### قدم دوم: ساخت و تعریف توابع {/*step-2-define-the-function*/} با دستور `function Profile() { }` شما میتوانید یک تابع جاوااسکریپتی با نام `Profile` تعریف کنید. -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +کامپوننت های React همان توابع معمولی در جاوااسکریپت هستند, با این تفاوت که باید **حرف اول اسم آن از حروف بزرگ باشد** وگرنه ارور میدهد! -### Step 3: Add markup {/*step-3-add-markup*/} +### قدم سوم: اضافه کردن تگ HTML {/*step-3-add-markup*/} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +کامپوننت زیر یک تگ `` را به همراه اتریبیوت های `src` و `alt` برمیگرداند. `` مانند HTML نوشته میشود ولی این یک دستور جاوااسکریپتی است! این سینتکس [JSX](/learn/writing-markup-with-jsx) نام دارد, و به شما اجازه میدهد تا تگ های HTML را مستقیما در یک فایل جاوااسکریپت بنویسید. -Return statements can be written all on one line, as in this component: +دستور return را هم میتوان به این صورت در یک خط نوشت: ```js return Katherine Johnson; ``` -But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: +اما اگر نمیتوانید کل تگ های HTML را در یک خط بنویسید فقط کافیست بعد از دستور return یک جفت پرانتز قرار بدهید و تگ هارا داخل آن بنویسید: ```js return ( @@ -114,13 +114,13 @@ return ( -Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +بدون پرانتز, خط های بعد از دستور `return` [نادیده گرفته میشوند](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! -## Using a component {/*using-a-component*/} +## استفاده از یک کامپوننت {/*using-a-component*/} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: +بعد از اینکه کامپونت `Profile` خود را ساخته اید, الان وقت آن است که همان کامپوننت را در میان کامپوننت های دیگر قرار بدهید. به عنوان مثال شما میتوانید کامپوننت `Gallery` را به همراه چند کامپوننت `Profile` که داخل آن استفاده شده است را export بگیرید: @@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; } -### What the browser sees {/*what-the-browser-sees*/} +### از دید مرورگر ها چه میگذرد {/*what-the-browser-sees*/} -Notice the difference in casing: +به تفاوت های زیر توجه کنید: -* `
      ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +* `
      ` با حرف کوچک شروع شده پس React میداند که این یک تگ HTML است. +* `` با حرف بزرگ `P` شروع شده پس ریکت متوجه میشود که ما کامپوننتی به نام `Profile` داریم. پس باید رندر شود. -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +و کامپوننت Profile شامل یکسری تگ HTML است: ``. و درآخر, کد زیر چیزی هست که مرورگر میبیند: ```html
      From af6ab5911b3be173cc8249c88d6ddc9666832f04 Mon Sep 17 00:00:00 2001 From: jam Date: Fri, 29 Sep 2023 20:33:35 +0330 Subject: [PATCH 005/559] translate editor-setup to persian --- src/content/learn/editor-setup.md | 70 +++++++++++++++++-------------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 94dbbbaef..f0cd00a10 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -1,62 +1,68 @@ --- -title: Editor Setup +title: برپایی ویرایشگر متن --- -A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations. +
      +اگر یک ویرایشگر متن به درستی پیکربندی شده باشد، می‌تواند باعث تمیزتر خوانده شدن کد و سریع‌تر نوشته شدن آن شود. حتی می‌تواند به شما در پیدا کردن خطاهایی که خودتان باعث شده‌اید کمک کند! اگر دفعه‌ی اول است که راه‌اندازی ویراشگر انجام می‌دهید یا قصد تنظیم کردن آنرا دارید، ما چند توصیه داریم: +
      - + -* What the most popular editors are -* How to format your code automatically +
      +* محبوب ترین ویرایشگرها کدام است +* چطور به صورت خودکار کد خودتان را قالب‌بندی کنید +
      -## Your editor {/*your-editor*/} +
      +## ویرایشگر شما {/*your-editor*/} -[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! +امروزه [VS Code](https://code.visualstudio.com/) یکی از محبوب‌ترین ویرایشگرهای مورد استفاده است. بازار بزرگی از افزونه‌ها دارد و به خوبی با سرویس های محبوبی مثل Github ادغام میشود. بسیاری از قابلیت های لیست شده‌ی ذیل می‌توانند به عنوان افزونه به VS Code اضافه شوند و آن را بسیار قابل تنظیم کند. -Other popular text editors used in the React community include: +ویرایشگرهای محبوب دیگری که در جامعه‌ی ری‌اکت استفاده می‌شوند شامل: -* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript. -* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in. -* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. +* [WebStorm](https://www.jetbrains.com/webstorm/) یک محیط توسعه‌ی یکپارچه که مخصوص جاوااسکریپت طراحی شده است. +* [Sublime Text](https://www.sublimetext.com/) از JSX و تایپ‌اسکریپت پشتیبانی میکند، دارای [برجسته‌ساز syntax](https://stackoverflow.com/a/70960574/458193) و تکمیل خودکار داخلی است. +* [Vim](https://www.vim.org/) یک ویرایشگر متن با قابلیت تنظیم بالا است که به منظور ایجاد و تغییر هر نوع متن، بسیار کارآمد ساخته شده است. در اکثر سیستم‌های یونیکس و با Apple OS X به‌عنوان «vi» گنجانده شده‌است. -## Recommended text editor features {/*recommended-text-editor-features*/} +## قابلیت های پیشنهادی برای ویرایشگر متن {/*recommended-text-editor-features*/} -Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure! +بعضی ویرایشگرها به صورت داخلی این قابلیت ها را دارند، اما بعضی دیگر نیاز به اضافه کردن افزونه هستند. بررسی کنید تا ببینید ویرایشگر انتخابی شما چه پشتیبانی ارائه می‌دهد تا مطمئن شوید! ### Linting {/*linting*/} -Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. +بی شک linter های کد به شما در پیدا کردن خطاهایی که در کد ایجاد کرده‌اید و برطرف کردن آن‌ها کمک میکنند. [ESLint](https://eslint.org/) یک linter متن باز و محبوب برای جاوااسکریپت است. -* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/)) -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +* [ESLint را با پیکربندی پیشنهادی برای ری‌اکت نصب کنید](https://www.npmjs.com/package/eslint-config-react-app) (مطمعن شوید که [Node نصب است!](https://nodejs.org/en/download/current/)) +* [ESLint را با افزونه‌ی رسمی به VSCode اضافه کنید](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them. +**از فعال بودن تمام قوانین [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) در پروژه‌ی خود اطمینان حاصل کنید.** این قوانین ضروری بوده و از اکثر خطاهای بزرگ جلوگیری میکند. تنظیمات پیشنهادی [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) از پیش تعیین شده و شامل آنها می شود. -### Formatting {/*formatting*/} +### قالب‌بندی {/*formatting*/} -The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. +آخرین کاری که می‌خواهید هنگام اشتراک‌گذاری کد خود با مشارکت‌کننده دیگری انجام دهید، وارد شدن به بحث در مورد [tab‌ها در مقابل space‌ها](https://www.google.com/search?q=tabs+vs+spaces) است! خوشبختانه، [Prettier](https://prettier.io/) کد شما را با فرمت مجدد آن برای مطابقت با قوانین از پیش تعیین شده و قابل تنظیم، تمیز می کند. Prettier را اجرا کنید، و همه tab های شما به space تبدیل می‌شوند - و تورفتگی، نقل قول‌ها و غیره نیز برای مطابقت با پیکربندی تغییر می‌کنند. در تنظیمات ایده‌آل، وقتی فایل خود را ذخیره می‌کنید، Prettier اجرا می‌شود و به سرعت این ویرایش‌ها را برای شما انجام می‌دهد. -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: +شما می‌توانید با دنبال کردن مراحل ذیل [افزونه‌ی Prettier را در VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) نصب کنید. -1. Launch VS Code -2. Use Quick Open (press Ctrl/Cmd+P) -3. Paste in `ext install esbenp.prettier-vscode` -4. Press Enter +1. اجرای VSCode +2. استفاده از کلیدهای ترکیبی (Ctrl/Cmd+P) +3. چسباندن عبارت `ext install esbenp.prettier-vscode` +4. زدن کلید Enter -#### Formatting on save {/*formatting-on-save*/} +#### قالب‌بندی هنگام ذخیره‌سازی {/*formatting-on-save*/} -Ideally, you should format your code on every save. VS Code has settings for this! +در حالت ایده آل، باید کد خود را در هر ذخیره‌سازی قالب‌بندی کنید. VS Code تنظیماتی برای این کار دارد! -1. In VS Code, press `CTRL/CMD + SHIFT + P`. -2. Type "settings" -3. Hit Enter -4. In the search bar, type "format on save" -5. Be sure the "format on save" option is ticked! +1. استفاده از کلیدهای ترکیبی `CTRL/CMD + SHIFT + P` داخل VSCode. +2. بنویسید "settings" +3. کلید Enter را بزنید +4. در نوار جستجو، "format on save" را بنویسید +5. مطمعن شوید قابلیت "format on save" تیک خورده باشد! -> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration. +> اگر ESLint شما دارای قوانین قالب‌بندی از پیش تنظیم شده باشد، ممکن است با Prettier در تضاد باشند. توصیه می‌کنیم با استفاده از [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) تمام قوانین قالب‌بندی از پیش تنظیم شده را در ESLint غیرفعال کنید. بنابراین ESLint *فقط* برای پیدا کردن خطاهای منطقی استفاده می‌شود. اگر می‌خواهید قالب‌بندی فایل‌ها را قبل از ادغام درخواست pull انجام دهید، از [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) برای یکپارچه‌سازی مداوم خود استفاده کنید. +
      From 7dc96706cb3777558f576f0f96b97994585eef55 Mon Sep 17 00:00:00 2001 From: jam Date: Fri, 29 Sep 2023 21:55:37 +0330 Subject: [PATCH 006/559] fix: delete redundant tags and directions --- src/content/learn/editor-setup.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index f0cd00a10..b59f95ad3 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -4,22 +4,17 @@ title: برپایی ویرایشگر متن -
      اگر یک ویرایشگر متن به درستی پیکربندی شده باشد، می‌تواند باعث تمیزتر خوانده شدن کد و سریع‌تر نوشته شدن آن شود. حتی می‌تواند به شما در پیدا کردن خطاهایی که خودتان باعث شده‌اید کمک کند! اگر دفعه‌ی اول است که راه‌اندازی ویراشگر انجام می‌دهید یا قصد تنظیم کردن آنرا دارید، ما چند توصیه داریم: -
      - + -
      * محبوب ترین ویرایشگرها کدام است * چطور به صورت خودکار کد خودتان را قالب‌بندی کنید -
      -
      ## ویرایشگر شما {/*your-editor*/} امروزه [VS Code](https://code.visualstudio.com/) یکی از محبوب‌ترین ویرایشگرهای مورد استفاده است. بازار بزرگی از افزونه‌ها دارد و به خوبی با سرویس های محبوبی مثل Github ادغام میشود. بسیاری از قابلیت های لیست شده‌ی ذیل می‌توانند به عنوان افزونه به VS Code اضافه شوند و آن را بسیار قابل تنظیم کند. @@ -65,4 +60,3 @@ title: برپایی ویرایشگر متن 5. مطمعن شوید قابلیت "format on save" تیک خورده باشد! > اگر ESLint شما دارای قوانین قالب‌بندی از پیش تنظیم شده باشد، ممکن است با Prettier در تضاد باشند. توصیه می‌کنیم با استفاده از [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) تمام قوانین قالب‌بندی از پیش تنظیم شده را در ESLint غیرفعال کنید. بنابراین ESLint *فقط* برای پیدا کردن خطاهای منطقی استفاده می‌شود. اگر می‌خواهید قالب‌بندی فایل‌ها را قبل از ادغام درخواست pull انجام دهید، از [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) برای یکپارچه‌سازی مداوم خود استفاده کنید. -
      From c7f0217efcd8e90218f01401000d2134fd1f4f70 Mon Sep 17 00:00:00 2001 From: Behrouz Shafaati Date: Wed, 4 Oct 2023 01:01:43 +0330 Subject: [PATCH 007/559] End of translation --- .../queueing-a-series-of-state-updates.md | 185 +++++++++--------- 1 file changed, 92 insertions(+), 93 deletions(-) diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index a63b7205b..f6b8b14fd 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -1,23 +1,23 @@ --- -title: Queueing a Series of State Updates +title: صف بندی مجموعه ای از بروزرسانی های State --- -Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. +مقداردهی یک متغیر state، باعث ارسال درخواست برای رندر شدن صفحه می‌شود. اما گاهی اوقات ممکن است بخواهید قبل از اینکه رندر بعدی را در صف قرار دهید چندین عملیات روی مقدار یک متغیر state انجام دهید. برای انجام این کار درک مفهوم بروزرسانی‌های دسته‌ای یک متغیر state به شما کمک خواهد کرد. - + -* What "batching" is and how React uses it to process multiple state updates -* How to apply several updates to the same state variable in a row +* مفهوم "دسته‌بندی" چیست و چطور ری‌اکت با استفاده از آن چندین بروزرسانی state را پردازش می‌کند +* چطور می‌توان چند بروزرسانی یک متغییر state را طی یک رندر انجام داد -## React batches state updates {/*react-batches-state-updates*/} +## بروزرسانی‌های دسته‌ای state در ری‌اکت {/*react-batches-state-updates*/} -You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times: +ممکن است انتظار داشته باشید که با کلیک بر روی دکمه "+3" شمارنده سه واحد افزایش یابد زیرا `setNumber(number + 1)` را سه بار فراخوانی می‌کند: @@ -47,7 +47,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`: +با این حال، همانطور که ممکن است از بخش قبل به خاطر داشته باشید، [در هر رندر مقدار state ثابت است](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time)، بنابراین مقدار `number` همیشه در اولین رندرِ حاصل از اجرای کنترل رویداد کلیک `0` است، فارغ از این که چند بار `setNumber(1)` را فراخوانی کنید: ```js setNumber(0 + 1); @@ -55,21 +55,21 @@ setNumber(0 + 1); setNumber(0 + 1); ``` -But there is one other factor at play here. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls. +اما لازم است در اینجا به یک نکته‌ی دیگر توجه داشته باشیم. **ری‌اکت پردازش بروزرسانی state را بعد از اجرای *تمام* کدهای داخل کنترل کننده‌ی رویداد انجام می‌دهد.** به همین دلیل است که رندر مجدد تنها *بعد از* تمام فراخوانی‌های `setNumber()` اتفاق می‌افتد. -This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table. +این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کند. -This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated. +این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث خیلی سریع‌تر اجرا شدن برنامه‌ی ری‌اکت شما می‌گردد. همچنین از مواجه شدن با بروزرسانده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند.ی‌های "نیمه کاره‌ی" گیج کنن -**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again. +**ری‌اکت مدیریت *چند رویداد* مانند چند بار کلیک کردن عمدی و پشت سر هم را دسته‌بندی نمی‌کند**--مدیریت هر رویداد به صورت جداگانه انجام می‌شود. مطمئن باشید ری‌اکت تنها زمانی دسته‌بندی را انجام می‌دهد که استفاده از آن کاملا ایمن باشد. این به عنوان مثال تضمین می‌کند که اگر اولین کلیک یک فرم را غیر فعال کرد، کلیک دوم آن را دوباره ارسال نکند. -## Updating the same state multiple times before the next render {/*updating-the-same-state-multiple-times-before-the-next-render*/} +## انجام چند بروزرسانی روی یک state قبل از رندر بعدی {/*updating-the-same-state-multiple-times-before-the-next-render*/} -It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the *next state value* like `setNumber(number + 1)`, you can pass a *function* that calculates the next state based on the previous one in the queue, like `setNumber(n => n + 1)`. It is a way to tell React to "do something with the state value" instead of just replacing it. +این یک استفاده‌ی غیر معمول است، اما اگر می‌خواهید یک متغییر state را قبل از رندر بعدی، چند بار بروزرسانی کنید، به جای ارسال *مقدار بعدی state* مثل `setNumber(number + 1)`، می‌توانید *تابعی* را ارسال کنید تا مقدار بعدی state را بر اساس مقدار قبلی آن که در صف هست محاسبه کند، مثل `setNumber(n => n + 1)`. این راهی است تا به ری‌اکت بگوییم "با مقدار state کاری انجام بده" به جای آن که جایگزینش کنی. -Try incrementing the counter now: +حالا شمارنده را افزایش دهید: @@ -99,10 +99,10 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter: +در اینجا `n => n + 1` یک **تابع بروزرسانی** نامیده می‌شود. زمانی که شما آن را به یک تنظیم کننده‌ی state ارسال می‌کنید: -1. React queues this function to be processed after all the other code in the event handler has run. -2. During the next render, React goes through the queue and gives you the final updated state. +1. ری‌اکت این تابع را در صف قرار می‌دهد تا پس از اجرای سایر کدهای کنترل کننده‌ی رویداد پردازش شود. +2. در رندر بعدی ری‌اکت صف را تا اتنها پیمایش می‌کند و state آپدیت شده‌ی نهایی را به شما می‌دهد. ```js setNumber(n => n + 1); @@ -110,13 +110,13 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -Here's how React works through these lines of code while executing the event handler: +در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است: -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. +1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. +1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. +1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. -When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on: +زمانی که شما `useState` را فراخوانی می‌کنید، در رندر بعدی، ری‌اکت به صف مراجعه می‌کند. مقدار قبلی `number` برابر `0` است، پس این همان چیزی است که ری‌اکت به عنوان اولین مقدار به عنوان آرگومان `n` به تابع بروزرسانی ارسال می‌کند. سپس ری‌اکت مقدار بازگشتی از تابع بروزرسانی را دریافت می‌کند و آن را به عنوان آرگومان `n`به تابع بروزرسانی بعدی ارسال می‌کند، و به همین ترتیب تا اتنها ادامه می‌دهد: | queued update | `n` | returns | |--------------|---------|-----| @@ -124,12 +124,12 @@ When you call `useState` during the next render, React goes through the queue. T | `n => n + 1` | `1` | `1 + 1 = 2` | | `n => n + 1` | `2` | `2 + 1 = 3` | -React stores `3` as the final result and returns it from `useState`. +ری‌اکت `3` را به عنوان مقدار نهایی ذخیره می‌کند و آن را از `useState` برمی‌گرداند. -This is why clicking "+3" in the above example correctly increments the value by 3. -### What happens if you update state after replacing it {/*what-happens-if-you-update-state-after-replacing-it*/} +به همین دلیل است که کلیک کردن روی دکمه‌ی "+3" در مثال بالا مقدار را به درستی 3 واحد افزایش می‌دهد. +### چه اتفاقی خواهد افتاد اگر state را بعد از جایگزینی بروزرسانی کنید {/*what-happens-if-you-update-state-after-replacing-it*/} -What about this event handler? What do you think `number` will be in the next render? +در مورد کنترل کننده‌ی زیر چطور؟ به نظر شما در رندر بعدی `number` چه مقداری خواهد داشت؟ ```js - + ); } @@ -322,7 +321,7 @@ function delay(ms) { -Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions: +در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص از توابع بروزرسانی استفاده کنید: @@ -341,17 +340,17 @@ export default function RequestTracker() { } return ( - <> +

      - Pending: {pending} + در انتظار: {pending}

      - Completed: {completed} + کامل شده: {completed}

      - +
      ); } @@ -364,23 +363,23 @@ function delay(ms) {
      -This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click. +این تضمین می‌کند که وقتی یک شمارنده را افزایش یا کاهش می‌دهید، این کار را در رابطه با آخرین مقدار state آن انجام دهید، نه مقداری که در زمان کلیک داشته است.
      -#### Implement the state queue yourself {/*implement-the-state-queue-yourself*/} +#### صف state را خودتان پیاده‌سازی کنید {/*implement-the-state-queue-yourself*/} -In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds. +در این چالش، بخش کوچکی از ری‌اکت را دوباره از ابتدا پیاده‌سازی خواهید کرد! آنقدر‌ها هم که به نظر می‌رسد سخت نیست. -Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass. +اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هریک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد. -You will receive two arguments: `baseState` is the initial state (like `0`), and the `queue` is an array which contains a mix of numbers (like `5`) and updater functions (like `n => n + 1`) in the order they were added. +شما دو آرگومان دریافت خواهید کرد: `baseState` که مقدار اولیه state است (مثل `0`)، و `queue` که آرایه‌ای است شامل ترکیبی از اعداد (مثلا `5`) و توابع بروزرسانی (مثل `n => n + 1`) با همان ترتیبی که به صف اضافه شده‌اند. -Your task is to return the final state, just like the tables on this page show! +کار شما این است که state نهایی را برگردانید، درست مانند جداولی که قبل‌تر در این صفحه دیدید! -If you're feeling stuck, start with this code structure: +اگر احساس می‌کنید گیر کردید، با ساختار زیر شروع کنید: ```js export function getFinalState(baseState, queue) { @@ -398,7 +397,7 @@ export function getFinalState(baseState, queue) { } ``` -Fill out the missing lines! +کد‌های از قلم افتاده را شما بنویسید! @@ -470,23 +469,23 @@ function TestCase({ }) { const actual = getFinalState(baseState, queue); return ( - <> -

      Base state: {baseState}

      -

      Queue: [{queue.join(', ')}]

      -

      Expected result: {expected}

      +
      +

      مقدار اولیه state: {baseState}

      +

      صف: [{queue.join(', ')}]

      +

      نتیجه‌ی مورد انتظار: {expected}

      - Your result: {actual} + نتیجه‌ی کار شما: {actual} {' '} ({actual === expected ? - 'correct' : - 'wrong' + 'صحیح' : + 'اشتباه' })

      - +
      ); } ``` @@ -495,7 +494,7 @@ function TestCase({ -This is the exact algorithm described on this page that React uses to calculate the final state: +این همان الگوریتم دقیقی است که در این صفحه توضیح داده شد و ری‌اکت برای محاسبه‌ی مقدار نهایی state از آن استفاده می‌کند: @@ -573,30 +572,30 @@ function TestCase({ }) { const actual = getFinalState(baseState, queue); return ( - <> -

      Base state: {baseState}

      -

      Queue: [{queue.join(', ')}]

      -

      Expected result: {expected}

      +
      +

      مقدار اولیه state: {baseState}

      +

      صف: [{queue.join(', ')}]

      +

      نتیجه‌ی مورد انتظار: {expected}

      - Your result: {actual} + نتیجه‌ی کار شما: {actual} {' '} ({actual === expected ? - 'correct' : - 'wrong' + 'صحیح' : + 'اشتباه' })

      - +
      ); } ```
      -Now you know how this part of React works! +اکنون می‌دانید که این بخش از ری‌اکت چطور کار می‌کند!
      From cf44f0eb4d147827300cf416eb6fd093b017f381 Mon Sep 17 00:00:00 2001 From: Behrouz Shafaati Date: Wed, 4 Oct 2023 01:28:19 +0330 Subject: [PATCH 008/559] Remove div tags and text translations in the code --- .../queueing-a-series-of-state-updates.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index f6b8b14fd..e061663c5 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -296,17 +296,17 @@ export default function RequestTracker() { } return ( -
      + <>

      - در انتظار: {pending} + Pending: {pending}

      - کامل شده: {completed} + Completed: {completed}

      -
      + ); } @@ -340,17 +340,17 @@ export default function RequestTracker() { } return ( -
      + <>

      - در انتظار: {pending} + Pending: {pending}

      - کامل شده: {completed} + Completed: {completed}

      -
      + ); } @@ -469,10 +469,10 @@ function TestCase({ }) { const actual = getFinalState(baseState, queue); return ( -
      -

      مقدار اولیه state: {baseState}

      -

      صف: [{queue.join(', ')}]

      -

      نتیجه‌ی مورد انتظار: {expected}

      + <> +

      Base state: {baseState}

      +

      Queue: [{queue.join(', ')}]

      +

      Expected result: {expected}

      {actual} {' '} ({actual === expected ? - 'صحیح' : - 'اشتباه' + 'correct' : + 'wrong' })

      -
      + ); } ``` @@ -573,19 +573,19 @@ function TestCase({ const actual = getFinalState(baseState, queue); return (
      -

      مقدار اولیه state: {baseState}

      -

      صف: [{queue.join(', ')}]

      -

      نتیجه‌ی مورد انتظار: {expected}

      +

      Base state: {baseState}

      +

      Queue: [{queue.join(', ')}]

      +

      Expected result: {expected}

      - نتیجه‌ی کار شما: {actual} + Expected result: {actual} {' '} ({actual === expected ? - 'صحیح' : - 'اشتباه' + 'correct' : + 'wrong' })

      From 2b4491a9532b0fd28ed5443896bc139bcea3a85b Mon Sep 17 00:00:00 2001 From: Behrouz Shafaati Date: Sun, 8 Oct 2023 16:02:17 +0330 Subject: [PATCH 009/559] correct some mistakes. --- .../learn/queueing-a-series-of-state-updates.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index e061663c5..3a96526eb 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -57,11 +57,11 @@ setNumber(0 + 1); اما لازم است در اینجا به یک نکته‌ی دیگر توجه داشته باشیم. **ری‌اکت پردازش بروزرسانی state را بعد از اجرای *تمام* کدهای داخل کنترل کننده‌ی رویداد انجام می‌دهد.** به همین دلیل است که رندر مجدد تنها *بعد از* تمام فراخوانی‌های `setNumber()` اتفاق می‌افتد. -این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کند. +این ممکن است شما را به یاد گارسونی بیاندازد که در رستوران در حال گرفتن یک سفارش است. گارسون با ذکر اولین غذا توسط شما به سمت آشپزخانه نمی‌دود! در عوض، آن‌ها به شما اجازه می‌دهند که شفارشتان را تمام کنید، آن را تغییر دهید، و حتی سفارش سایر افراد حاضر در میز را نیز دریافت می‌کنند. -این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث خیلی سریع‌تر اجرا شدن برنامه‌ی ری‌اکت شما می‌گردد. همچنین از مواجه شدن با بروزرسانده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند.ی‌های "نیمه کاره‌ی" گیج کنن +این به شما این امکان را می‌دهد که چندین متغییر state را بدون انجام [رندرهای مجدد](/learn/render-and-commit#re-renders-when-state-updates) زیاد بروزرسانی کنید--حتی از چندین کامپوننت متفاوت--. اما باعث این هم می‌شود که UI تا _بعد_ از اجرای کامل کنترل کننده رویداد، و تمام کدهای داخل آن بروزرسانی نشود. این رفتار، که به عنوان **دسته‌بندی** نیز شناخته می‌شود، باعث می‌شود برنامه‌ی ری‌اکت شما خیلی سریع‌تر اجرا شود. همچنین از مواجه شدن با بروزرسانی‌های "نیمه کاره‌ی" گیج کننده که در آن‌ها فقط برخی متغییر‌ها بروزرسانی می‌شوند جلوگیری می‌کند. **ری‌اکت مدیریت *چند رویداد* مانند چند بار کلیک کردن عمدی و پشت سر هم را دسته‌بندی نمی‌کند**--مدیریت هر رویداد به صورت جداگانه انجام می‌شود. مطمئن باشید ری‌اکت تنها زمانی دسته‌بندی را انجام می‌دهد که استفاده از آن کاملا ایمن باشد. این به عنوان مثال تضمین می‌کند که اگر اولین کلیک یک فرم را غیر فعال کرد، کلیک دوم آن را دوباره ارسال نکند. @@ -110,7 +110,7 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است: +در اینجا نحوه‌ی عملکرد ری‌اکت، هنگام پیمایش این خطوط کد که در کنترل کننده‌ی رویداد اجرا می‌شوند آمده است: 1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. 1. `setNumber(n => n + 1)`: `n => n + 1` یک تابع است. ری‌اکت آن را به یک صف اضافه می‌کند. @@ -321,7 +321,7 @@ function delay(ms) { -در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص از توابع بروزرسانی استفاده کنید: +در تابع کنترل رویداد `handleClick` مقادیر `pending` و `completed` برابر با زمانی است که رویداد کلیک اتفاق افتاده است. در اولین رندر، `pending` برابر `0` است، در نتیجه `setPending(pending - 1)` معادل `setPending(-1)` خواهد بود، که اشتباه است. از آنجایی که می‌خواهید شمارنده‌ها را *زیاد* یا *کم* کنید، هنگام کلیک می‌توانید به جای بروزرسانی متغییر state با مقدار مشخص، از توابع بروزرسانی استفاده کنید: @@ -371,7 +371,7 @@ function delay(ms) { در این چالش، بخش کوچکی از ری‌اکت را دوباره از ابتدا پیاده‌سازی خواهید کرد! آنقدر‌ها هم که به نظر می‌رسد سخت نیست. -اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هریک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد. +اگر به قسمت ویرایشگر کد که کمی پایین‌تر است بروید، متوجه خواهید شده که **چهار تست موردی** در آنجا وجود دارد. آن‌ها با مثال‌هایی که در این صفحه دیدم مطابقت دارند. وظیفه شما این است که تابع `getFinalState` را طوری پیاده‌سازی کنید که مقدار بازگشت داده شده برای هر یک از موارد تست منجر به نتیجه‌ی صحیح شود. اگر آن را به درستی پیاده سازی کنید، هر چهار تست عبارت صحیح را نشان خواهند داد. شما دو آرگومان دریافت خواهید کرد: `baseState` که مقدار اولیه state است (مثل `0`)، و `queue` که آرایه‌ای است شامل ترکیبی از اعداد (مثلا `5`) و توابع بروزرسانی (مثل `n => n + 1`) با همان ترتیبی که به صف اضافه شده‌اند. @@ -478,7 +478,7 @@ function TestCase({ 'green' : 'red' }}> - نتیجه‌ی کار شما: {actual} + Your result: {actual} {' '} ({actual === expected ? 'correct' : @@ -581,7 +581,7 @@ function TestCase({ 'green' : 'red' }}> - Expected result: {actual} + Your result: {actual} {' '} ({actual === expected ? 'correct' : From fdad54db4c16633ef3b0a896047037d3585e8aab Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Oct 2023 11:06:26 -0700 Subject: [PATCH 010/559] Explain limitations of useSyncExternalStore with concurrency (#6339) * Explain limitations of useSyncExternalStore with concurrency Doesn't seem like we have this noted anywhere. * Pull out example to code block --- .../reference/react/useSyncExternalStore.md | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 4169e231e..955b751f8 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -57,6 +57,26 @@ The current snapshot of the store which you can use in your rendering logic. * If a different `subscribe` function is passed during a re-render, React will re-subscribe to the store using the newly passed `subscribe` function. You can prevent this by declaring `subscribe` outside the component. +* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the transition update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store. + +* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be [marked as non-blocking transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX. + + For example, the following are discouraged: + + ```js + const LazyProductDetailPage = lazy(() => import('./ProductDetailPage.js')); + + function ShoppingApp() { + const selectedProductId = useSyncExternalStore(...); + + // ❌ Calling `use` with a Promise dependent on `selectedProductId` + const data = use(fetchItem(selectedProductId)) + + // ❌ Conditionally rendering a lazy component based on `selectedProductId` + return selectedProductId != null ? : ; + } + ``` + --- ## Usage {/*usage*/} @@ -425,4 +445,4 @@ function ChatIndicator({ userId }) { // ... } -``` \ No newline at end of file +``` From 88af66dbd1243594ad983e8463f9785c6e0a1450 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Oct 2023 11:23:04 -0700 Subject: [PATCH 011/559] Fix comma splice --- .../reference/react/experimental_taintObjectReference.md | 2 +- src/content/reference/react/experimental_taintUniqueValue.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md index ce91c3d0c..e3fd35a48 100644 --- a/src/content/reference/react/experimental_taintObjectReference.md +++ b/src/content/reference/react/experimental_taintObjectReference.md @@ -68,7 +68,7 @@ experimental_taintObjectReference( -**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. +**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index eab73df5b..a67eebf77 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -130,7 +130,7 @@ In this example, the constant `password` is tainted. Then `password` is used to Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values. -Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. +Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. From f2c45ea17f60285316055e3dfe339f473f8ca85b Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Oct 2023 11:57:24 -0700 Subject: [PATCH 012/559] Add labs icon to experimental APIs (#6346) --- src/sidebarReference.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/sidebarReference.json b/src/sidebarReference.json index d1de30620..f9049956f 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -130,11 +130,13 @@ }, { "title": "experimental_taintObjectReference", - "path": "/reference/react/experimental_taintObjectReference" + "path": "/reference/react/experimental_taintObjectReference", + "canary": true }, { "title": "experimental_taintUniqueValue", - "path": "/reference/react/experimental_taintUniqueValue" + "path": "/reference/react/experimental_taintUniqueValue", + "canary": true } ] }, From 43f4702f7897fa824833435107b68b7d7acf5203 Mon Sep 17 00:00:00 2001 From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com> Date: Tue, 10 Oct 2023 18:19:58 -0700 Subject: [PATCH 013/559] Fix typo in typescript.md (#6347) --- src/content/learn/typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 56fa5be5b..727974b1c 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -284,7 +284,7 @@ export default App = AppTSX; -This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present: @@ -460,4 +460,4 @@ We recommend the following resources: - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. \ No newline at end of file + - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. From 900a6693ef20cbcb59430fa45b7cc079735d0522 Mon Sep 17 00:00:00 2001 From: Rogin Farrer Date: Tue, 10 Oct 2023 18:50:12 -0700 Subject: [PATCH 014/559] Upgrade react-collapsed (#5893) * Upgrade react-collapsed * 4.0.4 --------- Co-authored-by: Rogin Farrer --- package.json | 2 +- .../Layout/Sidebar/SidebarRouteTree.tsx | 2 +- yarn.lock | 21 ++++--------------- 3 files changed, 6 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 5ff6adbab..472ef79c9 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", "react": "^0.0.0-experimental-16d053d59-20230506", - "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1", + "react-collapsed": "4.0.4", "react-dom": "^0.0.0-experimental-16d053d59-20230506", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 9a0dd23f5..a9fa575b5 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react'; import cn from 'classnames'; import {useRouter} from 'next/router'; import {SidebarLink} from './SidebarLink'; -import useCollapse from 'react-collapsed'; +import {useCollapse} from 'react-collapsed'; import usePendingRoute from 'hooks/usePendingRoute'; import type {RouteItem} from 'components/Layout/getRouteMeta'; diff --git a/yarn.lock b/yarn.lock index 5819fa4fa..8a3183cd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4797,11 +4797,6 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -performance-now@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" - integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= - periscopic@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.0.4.tgz#b3fbed0d1bc844976b977173ca2cd4a0ef4fa8d1" @@ -5284,13 +5279,6 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== -raf@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" - integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== - dependencies: - performance-now "^2.1.0" - range-parser@~1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" @@ -5306,12 +5294,11 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" -"react-collapsed@npm:@gaearon/react-collapsed@3.1.0-forked.1": - version "3.1.0-forked.1" - resolved "https://registry.yarnpkg.com/@gaearon/react-collapsed/-/react-collapsed-3.1.0-forked.1.tgz#b287b81fc2af2971d7d7b523dc40b6cf116822ac" - integrity sha512-QkW55Upl4eeOtnDMOxasafDtDwaF+DpYKvHq8KZoNz9P477iUH8Ik1YFYuqtI7UA8mHm1/z66LD678dZCXwEEg== +react-collapsed@4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-4.0.4.tgz#4c6bce3a15286d43e95b6730ad70ec387a54caa9" + integrity sha512-8avvmnQxDYTgGZYVP9+3Z7doomxVEBoCkukpTmUHEIrAYvELZ5jNNfYCt/hCpHB6GmQbzZoDmnDupjsnQVgcCQ== dependencies: - raf "^3.4.1" tiny-warning "^1.0.3" react-devtools-inline@4.4.0: From e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Fri, 13 Oct 2023 20:21:15 +0900 Subject: [PATCH 015/559] Add 'ja' to deployedTranslations (#6351) --- src/components/Seo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index d0dcaab75..79f19f87c 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -22,6 +22,7 @@ const deployedTranslations = [ 'zh-hans', 'es', 'fr', + 'ja', // We'll add more languages when they have enough content. // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo. // It must be the same between all translations. From 2d0a7a231924f4c1c65bf3265ca328bdc6bdfd8f Mon Sep 17 00:00:00 2001 From: faeghehajiabadi Date: Mon, 16 Oct 2023 11:49:15 +0800 Subject: [PATCH 016/559] translation of stateAsSnapshot --- src/content/learn/state-as-a-snapshot.md | 126 +++++++++++------------ 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index adf61e807..f378e7bdf 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -1,27 +1,27 @@ --- -title: State as a Snapshot +title: استیت به عنوان یک عکس --- -State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. +متغیرهای استیت ممکن است مانند متغیرهای معمولی جاوااسکریپت به نظر بیایند که شما میتوانید از آنها بخوانید یا آنها را تغییر دهید.اما متغیرهای استیت بیشتر شبیه یک عکس گرفته شده عمل میکنند. ست کردن آنها لزومااستیت متغیرهایی که داشتید را عوض نخواهد کرد بلکه به جای این باعث ریرندر می شود. -* How setting state triggers re-renders -* When and how state updates -* Why state does not update immediately after you set it -* How event handlers access a "snapshot" of the state +*چطور ست کردن استیت باعث تریگر دوباره رندر شدن می شود +*چه زمانی و چطور استیت تغییر می‌کند +*چرا استیت بالافاصله اپدیت نمیشود وقتی آن را ست میکنید +*چطور هندل کننده های ایونت به اسنپ شات یا عکسی از استیت دسترسی دارند ## Setting state triggers renders {/*setting-state-triggers-renders*/} -You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*. +ممکن است تصور کنید که رابط کاربری شما به صورت مستقیم به واکنش به رویداد کاربر مثل یک کلیک تغییر می‌کند. در ری‌اکت این یکمی متفاوت از این مدل ذهنی عمل می‌کند. در صفحه قبل، دیدید که [تنظیم وضعیت درخواستی برای رندر مجدد](/learn/render-and-commit#step-1-trigger-a-render) از سوی ری اکت دارد. این بدان معناست که برای واکنش رابط به رویداد، شما باید *وضعیت را به‌روز کنید*. -In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI: +در این مثال، زمانی که دکمه "ارسال" را فشار می‌دهید، `setIsSent(true)` به ری‌اکت می‌گوید که واسط کاربری را مجدداً رندر کند: @@ -61,25 +61,25 @@ label, textarea { margin-bottom: 10px; display: block; } -Here's what happens when you click the button: +در زیر توضیح داده شده است چه اتفاقی رخ می‌دهد زمانی که دکمه را کلیک می‌کنید: -1. The `onSubmit` event handler executes. -2. `setIsSent(true)` sets `isSent` to `true` and queues a new render. -3. React re-renders the component according to the new `isSent` value. + 1. `onSubmit` اجرا می‌شود. +2. `setIsSent(true)` مقدار `isSent` را به `true` تنظیم می‌کند و یک رندر جدید در صف قرار می‌دهد. +3. ری‌اکت مؤلفه را بر اساس مقدار جدید `isSent` مجدداً رندر می‌کند. -Let's take a closer look at the relationship between state and rendering. +بیایید نگاه نزدیک‌تری به رابطه بین وضعیت و رندر کردن بیندازیم. ## Rendering takes a snapshot in time {/*rendering-takes-a-snapshot-in-time*/} -["Rendering"](/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function. The JSX you return from that function is like a snapshot of the UI in time. Its props, event handlers, and local variables were all calculated **using its state at the time of the render.** +["رندر کردن"](/learn/render-and-commit#step-2-react-renders-your-components) به معنای فراخوانی React از مؤلفه شما است، که یک تابع است. JSX که از آن تابع بازمی‌گردانید، مانند یک نمای کلی از رابط کاربری در زمان است. ویژگی‌ها، کنترل‌گرهای رویداد و متغیرهای محلی آن همگی **با استفاده از وضعیت آن در زمان رندر، محاسبه شده‌اند.** -Unlike a photograph or a movie frame, the UI "snapshot" you return is interactive. It includes logic like event handlers that specify what happens in response to inputs. React updates the screen to match this snapshot and connects the event handlers. As a result, pressing a button will trigger the click handler from your JSX. +برخلاف یک عکس یا قطعه فیلم، "نمای کلی" رابط کاربری که شما باز می‌گردانید، تعاملی است. این شامل منطقی مانند کنترل‌گرهای رویداد می‌شود که مشخص می‌کنند واکنش به ورودی‌ها چگونه خواهد بود. React صفحه را برای تطابق با این نمای کلی به‌روز می‌کند و کنترل‌گرهای رویداد را متصل می‌کند. به عبارت دیگر، فشار دادن یک دکمه باعث فعال‌سازی کنترل‌گر کلیک از JSX شما می‌شود. -When React re-renders a component: +زمانی که React یک مؤلفه را مجدداً رندر می‌کند: -1. React calls your function again. -2. Your function returns a new JSX snapshot. -3. React then updates the screen to match the snapshot you've returned. +1. React دوباره تابع شما را فراخوانی می‌کند. +2. تابع شما یک نمای کلی JSX جدید را باز می‌گرداند. +3. سپس React صفحه را به‌روز می‌کند تا با نمای کلی ای که شما بازگردانده‌اید، همخوانی داشته باشد. @@ -87,7 +87,7 @@ When React re-renders a component: -As a component's memory, state is not like a regular variable that disappears after your function returns. State actually "lives" in React itself--as if on a shelf!--outside of your function. When React calls your component, it gives you a snapshot of the state for that particular render. Your component returns a snapshot of the UI with a fresh set of props and event handlers in its JSX, all calculated **using the state values from that render!** +به عنوان حافظه‌ی یک تابع، استیت مانند یک متغیر معمولی نیست که بعد از بازگشت تابع شما ناپدید شود. در واقع، استیت به واقعیت در ری‌اکت وجود دارد - گویی روی یک قفسه قرار دارد! - خارج از تابع شما. زمانی که ری‌اکت مؤلفه شما را فراخوانی می‌کند، یک نمای کلی از وضعیت برای آن رندر خاص به شما ارائه می‌دهد. تابع شما نیز با مجموعه تازه‌ای از ویژگی‌ها و کنترل‌گرهای رویداد در جی اس اکس خود، همگی محاسبه شده، یک نمای کلی از رابط کاربری باز می‌گرداند.**using the state values from that render!** @@ -95,7 +95,7 @@ As a component's memory, state is not like a regular variable that disappears af -Here's a little experiment to show you how this works. In this example, you might expect that clicking the "+3" button would increment the counter three times because it calls `setNumber(number + 1)` three times. +در اینجا یک آزمایش کوچک برای نمایش به شما نحوه کار می‌کند. در این مثال، شما ممکن است انتظار داشته باشید با کلیک بر روی دکمه "+3" شمارنده سه بار افزایش پیدا کند چرا که سه بار زیر را فراخوانی می‌کند.`setNumber(number + 1)` See what happens when you click the "+3" button: @@ -127,9 +127,9 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Notice that `number` only increments once per click! +توجه داشته باشید که `number` فقط یک بار در هر کلیک افزایش پیدا می‌کند! -**Setting state only changes it for the *next* render.** During the first render, `number` was `0`. This is why, in *that render's* `onClick` handler, the value of `number` is still `0` even after `setNumber(number + 1)` was called: +**تنظیم وضعیت فقط آن را برای رندر *بعدی* تغییر می‌دهد.** در زمان رندر اول، `number` برابر با `0` بود. به همین دلیل، در دستگیری رویداد `onClick` *آن رندر*، مقدار `number` هنوز `0` است حتی بعد از فراخوانی `setNumber(number + 1)`: ```js ``` -Here is what this button's click handler tells React to do: +در اینجا آنچه کنترل‌گر کلیک دکمه به ری‌اکت می‌گوید به شرح زیر است: -1. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`. - - React prepares to change `number` to `1` on the next render. -2. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`. - - React prepares to change `number` to `1` on the next render. -3. `setNumber(number + 1)`: `number` is `0` so `setNumber(0 + 1)`. - - React prepares to change `number` to `1` on the next render. +1. `setNumber(number + 1)`: `number` برابر با `0` است بنابراین `setNumber(0 + 1)` فراخوانی می‌شود. + - React آماده می‌شود تا `number` را در رندر بعدی به `1` تغییر دهد. +2. `setNumber(number + 1)`: `number` برابر با `0` است بنابراین `setNumber(0 + 1)` فراخوانی می‌شود. + - React آماده می‌شود تا `number` را در رندر بعدی به `1` تغییر دهد. +3. `setNumber(number + 1)`: `number` برابر با `0` است بنابراین `setNumber(0 + 1)` فراخوانی می‌شود. + - React آماده می‌شود تا `number` را در رندر بعدی به `1` تغییر دهد. -Even though you called `setNumber(number + 1)` three times, in *this render's* event handler `number` is always `0`, so you set the state to `1` three times. This is why, after your event handler finishes, React re-renders the component with `number` equal to `1` rather than `3`. +گرچه سه بار `setNumber(number + 1)` را فراخوانی کردید، اما در دستگیری رویداد *این رندر* همیشه `number` برابر با `0` است، بنابراین وضعیت را سه بار به `1` تنظیم می‌کنید. به همین دلیل است که پس از اتمام کنترل‌گر رویداد شما، React مؤلفه را با `number` برابر با `1` مجدداً رندر می‌کند به جای `3`. -You can also visualize this by mentally substituting state variables with their values in your code. Since the `number` state variable is `0` for *this render*, its event handler looks like this: +همچنین می‌توانید این موضوع را با جایگذاری ذهنی متغیرهای وضعیت با مقادیر آن‌ها در کدتان تصور کنید. از آنجا که متغیر وضعیت `number` در *این رندر* برابر با `0` است، کنترل‌گر رویداد آن به این صورت به نظر می‌رسد: ```js ``` -For the next render, `number` is `1`, so *that render's* click handler looks like this: +برای رندر بعدی، `number` برابر با `1` است، بنابراین کنترل‌گر کلیک *آن رندر* به این صورت به نظر می‌رسد: ```js ``` -This is why clicking the button again will set the counter to `2`, then to `3` on the next click, and so on. +به همین دلیل است که با کلیک دوباره بر روی دکمه، شمارنده به `2` تنظیم می‌شود، سپس در کلیک بعدی به `3` و به همین ترتیب. ## State over time {/*state-over-time*/} -Well, that was fun. Try to guess what clicking this button will alert: +خب این جالب بود. حالا سعی کنید حدس بزنید چه اتفاقی می‌افتد اگر این دکمه را فشار دهید: @@ -203,14 +203,14 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -If you use the substitution method from before, you can guess that the alert shows "0": +اگر از روش جایگذاری متغیرها که قبلاً توضیح داده شد، استفاده کنید، می‌توانید حدس بزنید که پنجره اعلان "0" را نشان می‌دهد: ```js setNumber(0 + 5); alert(0); ``` -But what if you put a timer on the alert, so it only fires _after_ the component re-rendered? Would it say "0" or "5"? Have a guess! +اما اگر یک تایمر را در حالت هشدار قرار دهید، بنابراین آن فقط _پس از_ رندر شدن مجدد کامپوننت فعال می شود، چه؟ آیا می گوید "۰" یا "۵"؟ حدس بزنید! @@ -241,7 +241,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Surprised? If you use the substitution method, you can see the "snapshot" of the state passed to the alert. +شگفت‌آور نیست؟ اگر از روش جایگذاری استفاده کنید، می‌توانید "نمای کلی" از وضعیتی که به پنجره اعلان منتقل شده را ببینید. ```js setNumber(0 + 5); @@ -250,16 +250,16 @@ setTimeout(() => { }, 3000); ``` -The state stored in React may have changed by the time the alert runs, but it was scheduled using a snapshot of the state at the time the user interacted with it! +وضعیتی که در ری‌اکت ذخیره شده است ممکن است توسط زمانی که پنجره اعلان اجرا می‌شود تغییر کرده باشد، اما برای اجرای اعلان از یک نمای کلی از وضعیت در زمان تعامل کاربر با آن استفاده شده است! -**A state variable's value never changes within a render,** even if its event handler's code is asynchronous. Inside *that render's* `onClick`, the value of `number` continues to be `0` even after `setNumber(number + 5)` was called. Its value was "fixed" when React "took the snapshot" of the UI by calling your component. +**مقدار یک متغیر وضعیت هیچ‌گاه در داخل یک رندر تغییر نمی‌کند،** حتی اگر کد کنترل‌گر رویداد آن به صورت ناهمزمان باشد. در دستگیری رویداد `onClick *آن رندر*`، مقدار `number` به همان `0` باقی می‌ماند حتی بعد از اینکه `setNumber(number + 5)` فراخوانی شده باشد. مقدار آن زمانی ثابت شد که React با فراخوانی مؤلفه شما "نمای کلی" از رابط کاربری را به دست آورد. -Here is an example of how that makes your event handlers less prone to timing mistakes. Below is a form that sends a message with a five-second delay. Imagine this scenario: +در ادامه مثالی از چگونگی کمتر شدن اشتباهات زمان بندی در کنترل‌گرهای رویدادتان داریم. در زیر یک فرم وجود دارد که با تأخیر پنج ثانیه پیامی ارسال می‌کند. تصور کنید این سناریو: -1. You press the "Send" button, sending "Hello" to Alice. -2. Before the five-second delay ends, you change the value of the "To" field to "Bob". +1. شما دکمه "ارسال" را فشار می‌دهید و پیام "سلام" را به الیس ارسال می‌کنید. +2. قبل از پایان تأخیر پنج ثانیه، مقدار فیلد "به" را به "باب" تغییر می‌دهید. -What do you expect the `alert` to display? Would it display, "You said Hello to Alice"? Or would it display, "You said Hello to Bob"? Make a guess based on what you know, and then try it: +شما چه انتظاری از نمایش پنجره اعلان دارید؟ آیا انتظار دارید عبارت "شما به الیس گفته‌اید سلام" نمایش داده شود؟ یا آیا انتظار دارید عبارت "شما به باب گفته‌اید سلام" نمایش داده شود؟ بر اساس آنچه می‌دانید حدس بزنید، سپس آن را امتحان کنید: @@ -305,19 +305,19 @@ label, textarea { margin-bottom: 10px; display: block; } -**React keeps the state values "fixed" within one render's event handlers.** You don't need to worry whether the state has changed while the code is running. +**React مقادیر وضعیت را در داخل کنترل‌گرهای رویداد یک رندر "ثابت" نگه می‌دارد.** نیازی به نگرانی از اینکه وضعیت در حال اجرا تغییر کرده است یا نه ندارید. -But what if you wanted to read the latest state before a re-render? You'll want to use a [state updater function](/learn/queueing-a-series-of-state-updates), covered on the next page! +اما اگر می‌خواهید قبل از یک رندر مجدد وضعیت را بخوانید، می‌خواهید از یک [تابع به‌روزکننده وضعیت](/learn/queueing-a-series-of-state-updates) استفاده کنید که در صفحه بعد توضیح داده شده است! - + -* Setting state requests a new render. -* React stores state outside of your component, as if on a shelf. -* When you call `useState`, React gives you a snapshot of the state *for that render*. -* Variables and event handlers don't "survive" re-renders. Every render has its own event handlers. -* Every render (and functions inside it) will always "see" the snapshot of the state that React gave to *that* render. -* You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX. -* Event handlers created in the past have the state values from the render in which they were created. +* تنظیم وضعیت درخواستی برای یک رندر جدید است. +* React وضعیت را خارج از مؤلفه شما ذخیره می‌کند، گویی روی یک قفسه قرار دارد. +* زمانی که `useState` را فراخوانی می‌کنید، React به شما یک نمای کلی از وضعیت می‌دهد *برای آن رندر*. +* متغیرها و کنترل‌گرهای رویداد از رندر به رندر "باقی نمی‌مانند". هر رندر کنترل‌گرهای رویداد خود را دارد. +* هر رندر (و توابع داخل آن) همیشه نمای کلی از وضعیت را می‌بیند که React به *آن رندر* داده است. +* می‌توانید به ذهنی وضعیت را در کنترل‌گرهای رویداد جایگزین کنید، به مانند اینکه در مورد JSX رندر شده فکر می‌کنید. +* کنترل‌گرهای رویدادی که در گذشته ایجاد شده‌اند، مقادیر وضعیت را از رندری که در آن ایجاد شدند دارند. @@ -327,7 +327,7 @@ But what if you wanted to read the latest state before a re-render? You'll want #### Implement a traffic light {/*implement-a-traffic-light*/} -Here is a crosswalk light component that toggles on when the button is pressed: +اینجا یک مؤلفه چراغ عبور پیاده‌روی است که هنگام فشار دادن دکمه فعال می‌شود: @@ -362,13 +362,13 @@ h1 { margin-top: 20px; } -Add an `alert` to the click handler. When the light is green and says "Walk", clicking the button should say "Stop is next". When the light is red and says "Stop", clicking the button should say "Walk is next". +یک `alert` به کنترل‌گر کلیک اضافه کنید. زمانی که چراغ سبز است و می‌گوید "پیاده‌روی"، با کلیک بر روی دکمه باید عبارت "پایان پیاده‌روی بعدی است" نمایش داده شود. زمانی که چراغ قرمز است و می‌گوید "توقف"، با کلیک بر روی دکمه باید عبارت "پیاده‌روی بعدی است" نمایش داده شود. -Does it make a difference whether you put the `alert` before or after the `setWalk` call? +آیا این تفاوتی ایجاد می‌کند که آیا `alert` را قبل از یا پس از فراخوانی `setWalk` قرار دهید؟ -Your `alert` should look like this: + شما باید اینجور باشد`alert` @@ -404,17 +404,17 @@ h1 { margin-top: 20px; } -Whether you put it before or after the `setWalk` call makes no difference. That render's value of `walk` is fixed. Calling `setWalk` will only change it for the *next* render, but will not affect the event handler from the previous render. +آیا اینکه آیا `alert` را قبل یا بعد از فراخوانی `setWalk` قرار دهید تفاوتی نمی‌کند. مقدار `walk` در آن رندر "ثابت" است. فراخوانی `setWalk` تنها برای رندر *بعدی* آن تغییر می‌دهد، اما بر کنترل‌گر رویداد رندر قبلی تأثیر نمی‌گذارد. -This line might seem counter-intuitive at first: +این خط در ابتدا ممکن است متناقض به نظر برسد: ```js alert(walk ? 'Stop is next' : 'Walk is next'); ``` -But it makes sense if you read it as: "If the traffic light shows 'Walk now', the message should say 'Stop is next.'" The `walk` variable inside your event handler matches that render's value of `walk` and does not change. +اما اگر آن را به صورت زیر بخوانید، منطقی خواهد بود: "اگر چراغ راه پیاده‌روی 'اکنون پیاده‌روی کنید' را نشان دهد، پیام باید 'توقف بعدی است' باشد." متغیر `walk` در داخل کنترل‌گر رویداد شما با مقدار `walk` در آن رندر تطابق دارد و تغییر نمی‌کند. -You can verify that this is correct by applying the substitution method. When `walk` is `true`, you get: +می‌توانید این موضوع را با استفاده از روش جایگذاری تأیید کنید. زمانی که `walk` برابر با `true` است، شما این نتیجه را خواهید گرفت: ```js

      ``` -So clicking "Change to Stop" queues a render with `walk` set to `false`, and alerts "Stop is next". +بنابراین با کلیک بر روی "تغییر به توقف" یک رندر با `walk` تنظیم شده به `false` در صف قرار می‌گیرد و "توقف بعدی است" را نمایش می‌دهد. From 31b7881905460b755345b41110892f5c5af80679 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Mon, 16 Oct 2023 15:03:02 -0400 Subject: [PATCH 017/559] Add GA4 tag to react.dev (#6350) --- src/pages/_document.tsx | 9 +++++++++ src/siteConfig.js | 1 + 2 files changed, 10 insertions(+) diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 392fdf88a..d8fb0c621 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -9,6 +9,15 @@ const MyDocument = () => { return ( + +``` + + + + + +--- + +## Reference {/*reference*/} + +### ` + + ); +} + +export default function Page() { + return ( + +

      My Website

      + +

      Welcome

      +
      + ); +} +``` + + \ No newline at end of file diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md new file mode 100644 index 000000000..f5cf231a6 --- /dev/null +++ b/src/content/reference/react-dom/components/style.md @@ -0,0 +1,106 @@ +--- +style: " +``` + + + + + +--- + +## Reference {/*reference*/} + +### ` +``` + +[See more examples below.](#usage) + +#### Props {/*props*/} + +` + + … + + + ); +} + +export default function App() { + return ( + + + + ); +} +``` + + diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md new file mode 100644 index 000000000..9d6ed18cc --- /dev/null +++ b/src/content/reference/react-dom/components/title.md @@ -0,0 +1,98 @@ +--- +title: "" +canary: true +--- + +<Canary> + +React's extensions to `<title>` are currently only available in React's canary and experimental channels. In stable releases of React `<title>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). + +</Canary> + + +<Intro> + +The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document. + +```js +<title>My Blog +``` + + + + + +--- + +## Reference {/*reference*/} + +### `` {/*title*/} + +To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head. + +```js +<title>My Blog +``` + +[See more examples below.](#usage) + +#### Props {/*props*/} + +`` supports all [common element props.](/reference/react-dom/components/common#props) + +* `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text. + +#### Special rendering behavior {/*special-rendering-behavior*/} + +React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. + +There are two exception to this: +* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title). +* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. + +<Pitfall> + +Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined. + +</Pitfall> + +--- + +## Usage {/*usage*/} + +### Set the document title {/*set-the-document-title*/} + +Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`. + +<SandpackWithHTMLOutput> + +```js App.js active +import ShowRenderedHTML from './ShowRenderedHTML.js'; + +export default function ContactUsPage() { + return ( + <ShowRenderedHTML> + <title>My Site: Contact Us +

      Contact Us

      +

      Email us at support@example.com

      + + ); +} +``` + + + +### Use variables in the title {/*use-variables-in-the-title*/} + +The children of the `` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this: + +```js +<title>Results page {pageNumber} // 🔴 Problem: This is not a single string +``` + +... actually causes the `` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string: + +```js +<title>{`Results page ${pageNumber}`} +``` + diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 315ea3e0b..08e0132af 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -218,6 +218,31 @@ { "title": "