From f5f650b5a8f8b4309a344f5a650af2ff81644429 Mon Sep 17 00:00:00 2001 From: alinkedd Date: Mon, 6 Nov 2023 22:58:21 +0200 Subject: [PATCH] Resolve merge conflicts --- src/content/learn/importing-and-exporting-components.md | 6 +----- src/content/learn/your-first-component.md | 6 +----- src/content/reference/react-dom/createPortal.md | 8 ++------ src/content/reference/react/Fragment.md | 6 +----- src/content/reference/react/forwardRef.md | 6 +----- 5 files changed, 6 insertions(+), 26 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 70a221585..9382371ae 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -52,11 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -<<<<<<< HEAD -Ці компоненти зараз знаходяться в **файлі кореневого компонента** з назвою `App.js` в цьому прикладі. У [Create React App](https://create-react-app.dev/) ваш додаток знаходиться в `src/App.js`. Залежно від вашої конфігурації, ваш кореневий компонент може бути у іншому файлі. Якщо ви використовуєте фреймворк з роутингом на основі файлів, такий як Next.js, ваш кореневий компонент буде різним для кожної сторінки. -======= -These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 +Ці компоненти зараз знаходяться у **файлі кореневого компонента** з назвою `App.js` у цьому прикладі. Залежно від вашої конфігурації ваш кореневий компонент може бути в іншому файлі. Якщо ви використовуєте фреймворк з роутингом на основі файлів, як-от Next.js, ваш кореневий компонент буде різним для кожної сторінки. ## Експорт та імпорт компонента {/*exporting-and-importing-a-component*/} diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 57f2cdd8c..b593436a3 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -210,11 +210,7 @@ function Profile() { #### Компоненти на всій глибині {/*components-all-the-way-down*/} -<<<<<<< HEAD -Ваш React додаток починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), кореневий компонент визначений в `src/App.js`. Якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортували кореневі компоненти. -======= -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or if you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 +Ваш React додаток починається з "кореневого" компонента. Зазвичай він створюється автоматично, коли ви створюєте новий проект. Наприклад, якщо ви використовуєте [CodeSandbox](https://codesandbox.io/) або якщо ви використовуєте фреймворк [Next.js](https://nextjs.org/), кореневий компонент визначений в `pages/index.js`. У цих прикладах ви експортуєте кореневі компоненти. Більшість додатків React використовують компоненти на всій глибині. Це означає, що ви будете використовувати компоненти не тільки для повторно використовуваних елементів, таких як кнопки, але й для більших елементів, таких як бічні панелі, списки та, врешті-решт, цілі сторінки! Компоненти - зручний спосіб організації коду UI та розмітки, навіть якщо деякі з них використовуються лише один раз. diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 50f8e6a62..45ed1b994 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -50,13 +50,9 @@ import { createPortal } from 'react-dom'; * `domNode`: DOM-вузол, наприклад повернутий з `document.getElementById()`. Переданий вузол вже повинен існувати. Передавання різних DOM-вузлів під час оновлення спричинить повторне створення контенту всередині порталу. -<<<<<<< HEAD -#### Результат {/*returns*/} -======= -* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key) +* **опційний** `key`: Унікальна стрічкова або числова змінна, що використовується як [ключ](/learn/rendering-lists/#keeping-list-items-in-order-with-key) порталу. -#### Returns {/*returns*/} ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 +#### Результат {/*returns*/} `createPortal` повертає React-вузол, який може бути включеним в JSX або ж повернутим з React-компонента. Якщо React зіткнеться з таким у виводі рендеру, він помістить надані `children` всередину переданого `domNode`. diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 1e56bc0a5..f71b1cd9a 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -54,11 +54,7 @@ function Post() { } ``` -<<<<<<< HEAD -Фрагменти є корисним інструментом, оскільки групування елементів з `Fragment` не має впливу на розташування або стилізацію, на відміну від огортання елементів в інший контейнер, такий як DOM-елемент. Якщо ви перевірите цей приклад за допомогою інструментів браузера, ви побачите, що всі DOM-вузли `

` і `

` відображаються як сусідні елементи без обгорток навколо них: -======= -Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `

` and `
` DOM nodes appear as siblings without wrappers around them: ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 +Фрагменти є корисним інструментом, оскільки групування елементів з `Fragment` не має впливу на розташування або стилізацію, на відміну від огортання елементів в інший контейнер, такий як DOM-елемент. Якщо ви перевірите цей приклад за допомогою інструментів браузера, ви побачите, що всі DOM-вузли `

` і `
` відображаються як сусідні елементи без обгорток навколо них: diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index e06e19142..79b9d434b 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -134,11 +134,7 @@ function Form() { Пам'ятайте, що розкриття рефу DOM-вузла всередині вашого компонента робить важчою зміну внутрішніх частин компонента пізніше. Зазвичай, ви будете розкривати DOM-вузли з компонентів нижнього рівня, що перевикористовуються (як-от кнопки та поля вводу), та не будете робити це із глобальними компонентами, такими як аватар чи коментар. -<<<<<<< HEAD - -======= - ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 + #### Фокусування на текстовому полі {/*focusing-a-text-input*/}