Resolve merge conflicts.

Resolve merge conflicts.
Пока остаются места с английским текстом.

Author: ntishkevich

README.md

@@ -7,17 +7,10 @@
 ### Предварительные требования
 
 1. Git
-<<<<<<< HEAD
 1. Node: любая версия 12.x, начиная с 12.0.0 или выше
-1. Yarn: Посмотрите [сайт Yarn с инструкциями по установке](https://yarnpkg.com/lang/en/docs/install/)
+1. Yarn v1: Посмотрите [сайт Yarn с инструкциями по установке](https://yarnpkg.com/lang/en/docs/install/)
 1. Сделать форк этого репозитория (для предложения изменений)
 1. Копия [репозитория ru.reactjs.org](https://github.com/reactjs/ru.reactjs.org) на вашем компьютере
-=======
-1. Node: any 12.x version starting with v12.0.0 or greater
-1. Yarn v1: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
-1. A fork of the repo (for any contributions)
-1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
 
 ### Установка
 

content/blog/2022-03-08-react-18-upgrade-guide.md

@@ -125,7 +125,7 @@ Finally, this API will continue to work for rendering e-mails:
 
 For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021.
 
-## Updates to TypeScript definitions
+## Updates to TypeScript definitions {#updates-to-typescript-definitions}
 
 If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example:
 

content/docs/accessibility.md

@@ -401,11 +401,7 @@ class BlurExample extends React.Component {
 - [всё о цветовой контрастности и о том, почему вы должны переосмыслить подход к ней](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [статья о цветовой контрастности на сайте A11y Project](https://a11yproject.com/posts/what-is-color-contrast/)
 
-<<<<<<< HEAD
-Ручной расчёт правильных цветовых комбинаций для всех вариантов сайта может быть очень утомительным. Вместо этого вы можете рассчитать все необходимые палитры [с помощью Colorable](https://jxnblk.com/colorable/).
-=======
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://colorable.jxnblk.com/).
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+Ручной расчёт правильных цветовых комбинаций для всех вариантов сайта может быть очень утомительным. Вместо этого вы можете рассчитать все необходимые палитры [с помощью Colorable](https://colorable.jxnblk.com/).
 
 Оба инструмента, aXe и WAVE, о которых будет рассказано ниже, включают тесты контрастности. Они помогут выявить ошибки в подборе цветов.
 

content/docs/add-react-to-a-website.md

@@ -25,11 +25,7 @@ next: create-a-new-react-app.html
 
 Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. **Всё, что вам нужно -- это доступ к Интернету и минута свободного времени**.
 
-<<<<<<< HEAD
-Необязательно: [скачать готовый пример (архив 2 Кбайт)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
-=======
-Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+Необязательно: [скачать готовый пример (архив 2 Кбайт)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)
 
 ### Шаг 1: Добавляем DOM-контейнер в HTML {#step-1-add-a-dom-container-to-the-html}
 
@@ -56,17 +52,10 @@ Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaear
 ```html{5,6,9}
   <!-- ... остальной HTML ... -->
 
-<<<<<<< HEAD
   <!-- Загрузим React. -->
   <!-- Примечание: при деплое на продакшен замените «development.js» на «production.min.js». -->
-  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
-  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
-=======
-  <!-- Load React. -->
-  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
   <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
 
   <!-- Загрузим наш React-компонент. -->
   <script src="like_button.js"></script>
@@ -86,28 +75,17 @@ Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaear
 >
 >В данном коде создаётся React-компонент с именем `LikeButton`. Не беспокойтесь, если что-то кажется вам непонятным -- мы подробно разберём принципы разработки на React позже, в нашем [практическом руководстве](/tutorial/tutorial.html) и во [введении в основные понятия](/docs/hello-world.html). Пока же мы просто посмотрим, как это выглядит на экране.
 
-<<<<<<< HEAD
-Добавьте ещё 2 строки в конец файла `like_button.js`, после **[стартового кода](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**:
-
-```js{3,4}
-// ... стартовый код ...
-=======
-After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add three lines to the bottom of `like_button.js`:
+Добавьте ещё 3 строки в конец файла `like_button.js`, после **[стартового кода](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**:
 
 ```js{3,4,5}
-// ... the starter code you pasted ...
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+// ... стартовый код ...
 
 const domContainer = document.querySelector('#like_button_container');
 const root = ReactDOM.createRoot(domContainer);
 root.render(e(LikeButton));
 ```
 
-<<<<<<< HEAD
-Эти две строки кода ищут элемент `<div>`, который мы добавили на первом шаге, а затем отображают React-компонент с кнопкой "Нравится" внутри него.
-=======
-These three lines of code find the `<div>` we added to our HTML in the first step, create a React app with it, and then display our "Like" button React component inside of it.
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+Эти три строки кода ищут элемент `<div>`, который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой "Нравится" внутри него.
 
 ### Готово! {#thats-it}
 
@@ -117,23 +95,15 @@ These three lines of code find the `<div>` we added to our HTML in the first ste
 
 **[Посмотреть финальный код примера](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
 
-<<<<<<< HEAD
-**[Скачать код примера (архив 2 Кбайт)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
-=======
-**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)**
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+**[Скачать код примера (архив 2 Кбайт)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip)**
 
 ### Совет: Повторное использование компонентов {#tip-reuse-a-component}
 
 Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:
 
 [Посмотреть исходный код примера](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
 
-<<<<<<< HEAD
-[Скачать код примера (архив 2 Кбайт)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
-=======
-[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/279839cb9891bd41802ebebc5365e9dec08eeb9f.zip)
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+[Скачать код примера (архив 2 Кбайт)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/279839cb9891bd41802ebebc5365e9dec08eeb9f.zip)
 
 >Примечание
 >

content/docs/addons-shallow-renderer.md

@@ -59,11 +59,7 @@ expect(result.props.children).toEqual([
 
 Вы можете думать о shallowRenderer как о «месте» в которое рендерится тестируемый компонент, и из которого вы можете извлечь результат вывода этого компонента.
 
-<<<<<<< HEAD
-`shallowRenderer.render()` схож с [`ReactDOM.render()`](/docs/react-dom.html#render), но не требует DOM и рендерит всего один уровень глубины. Это означает что вы можете тестировать компоненты независимо от того, как реализованы их дочерние компоненты.
-=======
-`shallowRenderer.render()` is similar to [`root.render()`](/docs/react-dom-client.html#createroot) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+`shallowRenderer.render()` схож с [`root.render()`](/docs/react-dom-client.html#createroot), но не требует DOM и рендерит всего один уровень глубины. Это означает что вы можете тестировать компоненты независимо от того, как реализованы их дочерние компоненты.
 
 ### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput}
 

content/docs/cdn-links.md

@@ -20,11 +20,7 @@ next: release-channels.html
 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 ```
 
-<<<<<<< HEAD
-Для загрузки конкретной версии `react` и `react-dom`, замените `17` на номер нужной версии.
-=======
-To load a specific version of `react` and `react-dom`, replace `18` with the version number.
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+Для загрузки конкретной версии `react` и `react-dom`, замените `18` на номер нужной версии.
 
 ### Зачем нужен атрибут `crossorigin`? {#why-the-crossorigin-attribute}
 

content/docs/code-splitting.md

@@ -82,15 +82,7 @@ import("./math").then(math => {
 
 ## `React.lazy` {#reactlazy}
 
-<<<<<<< HEAD
-> Примечание:
->
-> Возможности `React.lazy` и задержки (suspense) пока недоступны для рендеринга на стороне сервера. Если вам нужно разделение кода в серверном приложении, мы рекомендуем [Loadable Components](https://github.com/gregberge/loadable-components). У них есть хорошее [руководство по разделению бандла](https://loadable-components.com/docs/server-side-rendering/) с серверным рендерингом.
-
 Функция `React.lazy` позволяет рендерить динамический импорт как обычный компонент.
-=======
-The `React.lazy` function lets you render a dynamic import as a regular component.
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
 
 **До:**
 
@@ -150,9 +142,6 @@ function MyComponent() {
 }
 ```
 
-<<<<<<< HEAD
-### Предохранители {#error-boundaries}
-=======
 ### Avoiding fallbacks {#avoiding-fallbacks}
 Any component may suspend as a result of rendering, even components that were already shown to the user. In order for screen content to always be consistent, if an already shown component suspends, React has to hide its tree up to the closest `<Suspense>` boundary. However, from the user's perspective, this can be disorienting.
 
@@ -199,9 +188,7 @@ function handleTabSelect(tab) {
 
 Here, you tell React that setting tab to `'comments'` is not an urgent update, but is a [transition](/docs/react-api.html#transitions) that may take some time. React will then keep the old UI in place and interactive, and will switch to showing `<Comments />` when it is ready. See [Transitions](/docs/react-api.html#transitions) for more info.
 
-### Error boundaries {#error-boundaries}
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
-
+### Предохранители {#error-boundaries}
 
 Если какой-то модуль не загружается (например, из-за сбоя сети), это вызовет ошибку. Вы можете обрабатывать эти ошибки для улучшения пользовательского опыта с помощью [Предохранителей](/docs/error-boundaries.html). После создания предохранителя, его можно использовать в любом месте над ленивыми компонентами для отображения состояния ошибки.
 

content/docs/components-and-props.md

@@ -69,34 +69,19 @@ function Welcome(props) {
   return <h1>Привет, {props.name}</h1>;
 }
 
-<<<<<<< HEAD
-const element = <Welcome name="Алиса" />;
-ReactDOM.render(
-  element,
-  document.getElementById('root')
-);
-=======
 const root = ReactDOM.createRoot(document.getElementById('root'));
-const element = <Welcome name="Sara" />;
+const element = <Welcome name="Алиса" />;
 root.render(element);
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
 ```
 
 **[Try it on CodePen](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
 
 Давайте разберём, что именно здесь происходит:
 
-<<<<<<< HEAD
-1. Мы передаём React-элемент `<Welcome name="Алиса" />` в `ReactDOM.render()`.
+1. Мы вызываем `root.render()` c React-элементом `<Welcome name="Алиса" />`.
 2. React вызывает наш компонент `Welcome` с пропсами `{name: 'Алиса'}`.
 3. Наш компонент `Welcome` возвращает элемент `<h1>Привет, Алиса</h1>` в качестве результата.
 4. React DOM делает минимальные изменения в DOM, чтобы получилось `<h1>Привет, Алиса</h1>`.
-=======
-1. We call `root.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
 
 >**Примечание:** Всегда называйте компоненты с заглавной буквы.
 >

content/docs/conditional-rendering.md

@@ -35,17 +35,9 @@ function Greeting(props) {
   return <GuestGreeting />;
 }
 
-<<<<<<< HEAD
-ReactDOM.render(
-  // Попробуйте заменить на isLoggedIn={true} и посмотрите на эффект.
-  <Greeting isLoggedIn={false} />,
-  document.getElementById('root')
-);
-=======
 const root = ReactDOM.createRoot(document.getElementById('root')); 
-// Try changing to isLoggedIn={true}:
+// Попробуйте заменить на isLoggedIn={true}:
 root.render(<Greeting isLoggedIn={false} />);
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
 ```
 
 [**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)

content/docs/error-boundaries.md

@@ -65,11 +65,7 @@ class ErrorBoundary extends React.Component {
 
 ## Живой пример {#live-demo}
 
-<<<<<<< HEAD
-Посмотрите [пример объявления и использования предохранителя](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) в [React 16](/blog/2017/09/26/react-v16.0.html).
-=======
-Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010).
->>>>>>> 26caa649827e8f8cadd24dfc420ea802dcbee246
+Посмотрите [пример объявления и использования предохранителя](https://codepen.io/gaearon/pen/wqvxGa?editors=0010).
 
 ## Где размещать предохранители {#where-to-place-error-boundaries}