Translation for "Sharing State Between Components" #872

arturdedela · 2023-05-06T22:41:38Z

Если ваш пулреквест является исправлением бага, а не переводом, то сперва убедитесь, что проблема относится ТОЛЬКО к https://ru.reactjs.org, а не к https://reactjs.org. Если это не так, то пулреквест следует открыть в родительском репозитории.

arturdedela · 2023-05-06T22:44:41Z

src/content/learn/sharing-state-between-components.md

 ---

 <Intro>

-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code.
+Иногда требуется, чтобы состояние двух компонентов всегда изменялось вместе. Для этого нужно удалить состояние из обоих компонентов, переместить его в ближайшего общего родителя и передать его им через пропсы. Это называется *подъемом состояния вверх* и является одним из наиболее распространенных приемов при написании кода на React.

 </Intro>

 <YouWillLearn>


YouWillLearn, где-то отдельно будет переведен, правильно понимаю?

если есть возможность, можете поправить?

gcor

Спасибо вам большое!

Вот несколько предложений

src/content/learn/sharing-state-between-components.md

arturdedela · 2023-06-06T16:26:03Z

@gcor Привет! Спасибо за ревью!
Поправил все комментарии.

github-actions · 2023-07-05T20:38:21Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/404`	`75.34 KB` (🟢 -62 B)	178.49 KB
`/500`	`75.33 KB` (🟢 -62 B)	178.49 KB
`/[[...markdownPath]]`	`76.75 KB` (🟢 -62 B)	179.91 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

titovmx

Спасибо за перевод! Оставил несколько замечаний и предложений. Надеюсь, вы на связи и сможете добить этот PR!

titovmx · 2023-07-20T16:24:27Z

src/content/learn/sharing-state-between-components.md

 ---

 <Intro>

-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as *lifting state up,* and it's one of the most common things you will do writing React code.
+Иногда требуется, чтобы состояние двух компонентов всегда изменялось вместе. Для этого нужно удалить состояние из обоих компонентов, переместить его в ближайшего общего родителя и передать его им через пропсы. Это называется *подъемом состояния вверх* и является одним из наиболее распространенных приемов при написании кода на React.


Suggested change

Иногда требуется, чтобы состояние двух компонентов всегда изменялось вместе. Для этого нужно удалить состояние из обоих компонентов, переместить его в ближайшего общего родителя и передать его им через пропсы. Это называется *подъемом состояния вверх* и является одним из наиболее распространенных приемов при написании кода на React.

Иногда требуется, чтобы состояние двух компонентов всегда изменялось вместе. Для этого нужно удалить состояние из обоих компонентов, переместить его в ближайшего общего родителя и передать его им через пропсы. Это называется *подъёмом состояния вверх* и является одним из наиболее распространённых приемов при написании кода на React.

В этом фрагменте пропущена буква "ё". Вы могли бы перепроверить её наличие по всему переводу при помощи пакета eyo?

titovmx · 2023-07-20T16:31:28Z

src/content/learn/sharing-state-between-components.md


-Press the Show button for both panels:
+Нажмите кнопку Показать на обеих панелях:


Suggested change

Нажмите кнопку Показать на обеих панелях:

Нажмите кнопку «Показать» на обеих панелях:

мне кажется, текст лучше взять в кавычки, что думаете?

titovmx · 2023-07-20T16:33:26Z

src/content/learn/sharing-state-between-components.md


 ```js
 const [isActive, setIsActive] = useState(false);
 ```

-And instead, add `isActive` to the `Panel`'s list of props:
+И вместо нее, добавьте `isActive` в список пропсов `Panel`:


Suggested change

И вместо нее, добавьте `isActive` в список пропсов `Panel`:

И вместо нее добавьте `isActive` в список пропсов `Panel`:

В русском тут не должно быть обособления

titovmx · 2023-07-20T17:12:43Z

src/content/learn/sharing-state-between-components.md


-In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable:
+В нашем случае, только одна панель должна быть активна одновременно. Это означает, что общему родителю `Accordion` нужно следить за тем *какая* панель активна в данный момент. Вместо булевого значения в состоянии можно хранить число, которое будет означать индекс активной панели:


Suggested change

В нашем случае, только одна панель должна быть активна одновременно. Это означает, что общему родителю `Accordion` нужно следить за тем *какая* панель активна в данный момент. Вместо булевого значения в состоянии можно хранить число, которое будет означать индекс активной панели:

В нашем случае только одна панель должна быть активна одновременно. Это означает, что общему родителю `Accordion` нужно следить за тем *какая* панель активна в данный момент. Вместо булевого значения в состоянии можно хранить число, которое будет означать индекс активной панели:

Здесь также не требуется обособление

titovmx · 2023-07-20T17:15:24Z

src/content/learn/sharing-state-between-components.md


-Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to *explicitly allow* the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props):
+Нажатие на кнопку «Показать» в любой из панелей должно изменять индекс активной панели в `Accordion`. `Panel` не может напрямую установить состояние `activeIndex`, потому что оно определено внутри `Accordion`. Компоненту `Accordion` необходимо *явно разрешить* компоненту `Panel` изменять свое состояние, [передав обработчик события как проп](/learn/responding-to-events#passing-event-handlers-as-props):


Suggested change

Нажатие на кнопку «Показать» в любой из панелей должно изменять индекс активной панели в `Accordion`. `Panel` не может напрямую установить состояние `activeIndex`, потому что оно определено внутри `Accordion`. Компоненту `Accordion` необходимо *явно разрешить* компоненту `Panel` изменять свое состояние, [передав обработчик события как проп](/learn/responding-to-events#passing-event-handlers-as-props):

Нажатие на кнопку «Показать» в любой из панелей должно изменять индекс активной панели в `Accordion`. `Panel` не может напрямую установить состояние `activeIndex`, потому что оно определено внутри `Accordion`. Компонент `Accordion` должен *явно разрешить* компоненту `Panel` изменять свое состояние, [передав обработчик события как проп](/learn/responding-to-events#passing-event-handlers-as-props):

мне кажется, так попроще звучит

titovmx · 2023-07-20T17:17:59Z

src/content/learn/sharing-state-between-components.md


-Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true`
+В начале, `activeIndex` в компоненте `Accordion` имеет значение 0, поэтому первая панель получает `isActive = true`


Suggested change

В начале, `activeIndex` в компоненте `Accordion` имеет значение 0, поэтому первая панель получает `isActive = true`

Сначала `activeIndex` в компоненте `Accordion` имеет значение 0, поэтому первая панель получает `isActive = true`

titovmx · 2023-07-20T17:20:35Z

src/content/learn/sharing-state-between-components.md


-In practice, "controlled" and "uncontrolled" aren't strict technical terms--each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer.
+На практике «управляемые» и «неуправляемые» это не строгие технические определения--обычно компоненты имеют и внутреннее состояние и пропсы. Однако, важно понимать как устроены компоненты и какие возможности они предоставляют.


Suggested change

На практике «управляемые» и «неуправляемые» это не строгие технические определения--обычно компоненты имеют и внутреннее состояние и пропсы. Однако, важно понимать как устроены компоненты и какие возможности они предоставляют.

На практике «управляемые» и «неуправляемые» это не строгие технические определения--обычно компоненты имеют и внутреннее состояние, и пропсы. Однако, важно понимать как устроены компоненты и какие возможности они предоставляют.

titovmx · 2023-07-20T17:29:07Z

src/content/learn/sharing-state-between-components.md

+* Если вы хотите скоординировать два компонента, переместите их состояние к общему родительскому компоненту.
+* Затем передайте информацию через пропсы из общего родительского компонента.
+* Наконец, пробросьте обработчики событий, чтобы дочерние компоненты могли изменять состояние родительского компонента.
+* Полезно рассматривать компоненты как «управляемые» (управляемые пропами) или «неуправляемые» (управляемые состоянием).


Suggested change

* Полезно рассматривать компоненты как «управляемые» (управляемые пропами) или «неуправляемые» (управляемые состоянием).

* Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).

По соглашению пишем "пропсами"

titovmx · 2023-07-20T17:29:43Z

src/content/learn/sharing-state-between-components.md


-In contrast, you might say a component is "controlled" when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior. The final `Panel` component with the `isActive` prop is controlled by the `Accordion` component.
+Напротив, компонент называют «управляемым», если важная информация зависит от пропов, а не от внутреннего состояния. Это позволяет родительскому компоненту полностью контролировать его поведение. После наших изменений, компонентом `Panel` управляет компонент `Accordion` с помощью пропа `isActive`.


Suggested change

Напротив, компонент называют «управляемым», если важная информация зависит от пропов, а не от внутреннего состояния. Это позволяет родительскому компоненту полностью контролировать его поведение. После наших изменений, компонентом `Panel` управляет компонент `Accordion` с помощью пропа `isActive`.

Напротив, компонент называют «управляемым», если важная информация зависит от пропсов, а не от внутреннего состояния. Это позволяет родительскому компоненту полностью контролировать его поведение. После наших изменений, компонентом `Panel` управляет компонент `Accordion` с помощью пропа `isActive`.

по соглашению во множественном числе будет "пропсов"

titovmx · 2023-07-20T17:36:18Z

src/content/learn/sharing-state-between-components.md

@@ -466,7 +464,7 @@ function SearchBar() {

  return (
    <label>
-      Search:{' '}
+      Поиск:{' '}
      <input
        value={query}
        onChange={handleChange}


Вы могли бы перевести этот пример (массив foods в частности) полностью?

arturdedela added 2 commits May 4, 2023 19:29

Add ru translation for Sharing state article(50%)

b6d86fd

Add remaining translation of Sharing state

3bfbbef

vercel bot deployed to Preview – ru-react-dev May 6, 2023 22:42 View deployment

arturdedela commented May 6, 2023

View reviewed changes

arturdedela mentioned this pull request May 6, 2023

New Russian Translation Progress #843

Open

gcor reviewed May 21, 2023

View reviewed changes

arturdedela added 6 commits June 6, 2023 17:48

Remove redundant blank line

6917e7c

Remove space and add comma

69da688

Fix quotes and punctuation

7a294a1

Fix thinking in react

ef7b504

Fix other quotes

f9c39f1

Remove redundant new line

ecba638

vercel bot deployed to Preview – ru-react-dev June 6, 2023 16:25 View deployment

titovmx requested changes Jul 20, 2023

View reviewed changes

titovmx mentioned this pull request Aug 3, 2023

Translate for "State: A Component's Memory" #888

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translation for "Sharing State Between Components" #872

Translation for "Sharing State Between Components" #872

arturdedela commented May 6, 2023

arturdedela May 6, 2023

gcor Jul 5, 2023

gcor left a comment

arturdedela commented Jun 6, 2023

github-actions bot commented Jul 5, 2023

📦 Next.js Bundle Analysis for react-dev

Three Pages Changed Size

titovmx left a comment

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023

titovmx Jul 20, 2023


		Press the Show button for both panels:
		Нажмите кнопку Показать на обеих панелях:

	Нажмите кнопку Показать на обеих панелях:
	Нажмите кнопку «Показать» на обеих панелях:

	И вместо нее, добавьте `isActive` в список пропсов `Panel`:
	И вместо нее добавьте `isActive` в список пропсов `Panel`:


		In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of which panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable:
		В нашем случае, только одна панель должна быть активна одновременно. Это означает, что общему родителю `Accordion` нужно следить за тем какая панель активна в данный момент. Вместо булевого значения в состоянии можно хранить число, которое будет означать индекс активной панели:


		Clicking the "Show" button in either `Panel` needs to change the active index in `Accordion`. A `Panel` can't set the `activeIndex` state directly because it's defined inside the `Accordion`. The `Accordion` component needs to explicitly allow the `Panel` component to change its state by [passing an event handler down as a prop](/learn/responding-to-events#passing-event-handlers-as-props):
		Нажатие на кнопку «Показать» в любой из панелей должно изменять индекс активной панели в `Accordion`. `Panel` не может напрямую установить состояние `activeIndex`, потому что оно определено внутри `Accordion`. Компоненту `Accordion` необходимо явно разрешить компоненту `Panel` изменять свое состояние, [передав обработчик события как проп](/learn/responding-to-events#passing-event-handlers-as-props):


		Initially, `Accordion`'s `activeIndex` is `0`, so the first `Panel` receives `isActive = true`
		В начале, `activeIndex` в компоненте `Accordion` имеет значение 0, поэтому первая панель получает `isActive = true`

	В начале, `activeIndex` в компоненте `Accordion` имеет значение 0, поэтому первая панель получает `isActive = true`
	Сначала `activeIndex` в компоненте `Accordion` имеет значение 0, поэтому первая панель получает `isActive = true`


		In practice, "controlled" and "uncontrolled" aren't strict technical terms--each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer.
		На практике «управляемые» и «неуправляемые» это не строгие технические определения--обычно компоненты имеют и внутреннее состояние и пропсы. Однако, важно понимать как устроены компоненты и какие возможности они предоставляют.

	* Полезно рассматривать компоненты как «управляемые» (управляемые пропами) или «неуправляемые» (управляемые состоянием).
	* Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).


		In contrast, you might say a component is "controlled" when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior. The final `Panel` component with the `isActive` prop is controlled by the `Accordion` component.
		Напротив, компонент называют «управляемым», если важная информация зависит от пропов, а не от внутреннего состояния. Это позволяет родительскому компоненту полностью контролировать его поведение. После наших изменений, компонентом `Panel` управляет компонент `Accordion` с помощью пропа `isActive`.

Translation for "Sharing State Between Components" #872

Are you sure you want to change the base?

Translation for "Sharing State Between Components" #872

Conversation

arturdedela commented May 6, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gcor left a comment

Choose a reason for hiding this comment

arturdedela commented Jun 6, 2023

github-actions bot commented Jul 5, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

Three Pages Changed Size

titovmx left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment