Resolve merge conflicts

Author: alinkedd

src/content/learn/building-a-react-framework.md

@@ -8,29 +8,19 @@ title: Створення React-застосунку
 
 </Intro>
 
-<<<<<<< HEAD
-## Рекомендовані React-фреймворки {/*bleeding-edge-react-frameworks*/}
-=======
-If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
+Якщо ваш застосунок містить обмеження, які не спрацюють із наявними фреймворками, або ви бажаєте побудувати власний фреймворк чи розібратися в основах, [побудуйте React-застосунок з нуля](/learn/build-a-react-app-from-scratch).
 
-## Full-stack frameworks {/*full-stack-frameworks*/}
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
+## Фреймворки повного стеку {/*full-stack-frameworks*/}
 
 Ці фреймворки підтримують усі функції, що знадобляться для розгортання та масштабування застосунку в публічному середовищі (in production). Вони інтегрували останні React-функції й послуговуються перевагами архітектури React.
 
 <Note>
 
-<<<<<<< HEAD
-#### React-фреймворки не потребують сервера. {/*react-frameworks-do-not-require-a-server*/}
+#### Фреймворки повного стеку не потребують сервера. {/*react-frameworks-do-not-require-a-server*/}
 
-Усі фреймворки на цій сторінці можуть створювати односторінкові застосунки (SPA). Їх можна розгортати через [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) або сервіс статичного хостингу та вони не потребують сервера. Якщо ви хочете використати функції, для яких потрібен сервер (наприклад, SSR — рендеринг із боку сервера), то можна ввімкнути окремі маршрути без переписування застосунку.
-=======
-#### Full-stack frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
+Усі фреймворки на цій сторінці підтримують рендеринг із боку клієнта ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), односторінкові застосунки ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)) і генерацію статичних сайтів ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). Їх можна розгортати через [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) або сервіс статичного хостингу та вони не потребують сервера. Додатково ці фреймворки дають вам змогу додавати рендеринг із боку сервера (SSR) для певних маршрутів, якщо вам це необхідно.
 
-All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.
-
-This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework's documentation for configuring the rendering strategy.
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
+Це дає вам змогу почати із суто клієнтського застосунку і за необхідності пізніше використати серверні функції для окремих маршрутів без переписування застосунку. Щоб налаштувати стратегію рендерингу, перегляньте документацію вашого фреймворку.
 
 </Note>
 
@@ -69,11 +59,7 @@ npx create-expo-app@latest
 Expo підтримується [компанією Expo](https://expo.dev/about). Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов'язкові платні хмарні послуги.
 
 
-<<<<<<< HEAD
-## Інші варіанти {/*other-options*/}
-=======
-## Other frameworks {/*other-frameworks*/}
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
+## Інші фреймворки {/*other-frameworks*/}
 
 Є й інші перспективні фреймворки, які працюють над нашим баченням повного стеку з React:
 
@@ -114,27 +100,13 @@ App Router від Next.js також інтегрує [отримання дан
 
 </DeepDive>
 
-## Start From Scratch {/*start-from-scratch*/}
-
-If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.
-
-<<<<<<< HEAD
-#### Чи рекомендуєте Vite? {/*do-you-recommend-vite*/}
-
-Ми пропонуємо кілька рекомендацій для Vite.
+## Початок із нуля {/*start-from-scratch*/}
 
-React Router v7 — це фреймворк на основі Vite, який дає вам змогу використовувати швидкий сервер розробки Vite та налаштувати все за допомогою фреймворку, який забезпечує маршрутизацію та отримання даних. Як і в інших фреймворках, які ми рекомендуємо, ви можете створити SPA за допомогою React Router v7.
+Якщо ваш застосунок містить обмеження, які не спрацюють із наявними фреймворками, або ви бажаєте побудувати власний фреймворк чи розібратися в основах React-застосунку, є інші доступні варіанти для початку React-проєкту з нуля.
 
-Ми також рекомендуємо використовувати Vite під час [додавання React до наявного проєкту](/learn/add-react-to-an-existing-project) або [побудови фреймворку](/learn/building-a-react-framework).
-
-Подібно до того, як у Svelte є Sveltekit, у Vue — Nuxt, а у Solid — SolidStart, React рекомендує використовувати для нових проєктів фреймворк, який легко інтегрується з інструментами збирання, як-от Vite.
-
-</Note>
-=======
-Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns.  It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#recommended-react-frameworks) have built-in solutions for these problems.  
+Початок роботи з нуля надає вам більше гнучкості, але потребує від вас вибору інструментів для маршрутизації, отримання даних та інших типових патернів використання. Це дуже схоже на створення власного фреймворку замість використання наявного. [Фреймворки, які ми рекомендуємо](#recommended-react-frameworks), мають готові вбудовані рішення для цих проблем.
 
-If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a built tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/).
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
+Якби ви хочете власне рішення, перегляньте наш посібник із [побудови React-застосунку з нуля](/learn/build-a-react-app-from-scratch), щоб отримати інструкції з налаштування нового React-проєкту, починаючи з інструментів збирання, як-от [Vite](https://vite.dev/), [Parcel](https://parceljs.org/) чи [RSbuild](https://rsbuild.dev/).
 
 -----
 

src/content/learn/creating-a-react-app.md

@@ -36,38 +36,22 @@ export default function App() {
 
 Якщо ви хочете почати проєкт за допомогою React, [створіть React-застосунок](/learn/creating-a-react-app), використовуючи один із рекомендованих фреймворків.
 
-<<<<<<< HEAD
-## Побудова React-фреймворку {/*build-a-react-framework*/}
+## Побудувати React-застосунок з нуля {/*build-a-react-app-from-scratch*/}
 
-Якщо фреймворк не годиться для вашого проєкту або ви бажаєте почати із самостійного створення його структури, [побудуйте власний React-фреймворк](/learn/building-a-react-framework).
-=======
-## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
-
-If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
+Якщо ваш застосунок містить обмеження, які не спрацюють із наявними фреймворками, або ви бажаєте побудувати власний фреймворк чи розібратися в основах, [побудуйте React-застосунок з нуля](/learn/build-a-react-app-from-scratch).
 
 ## Інтегрувати React у наявний проєкт {/*add-react-to-an-existing-project*/}
 
 Якщо ви хочете використати React у власному застосунку або вебсайті, [інтегруйте React у наявний проєкт.](/learn/add-react-to-an-existing-project)
 
-<<<<<<< HEAD
-## Застарілі варіанти {/*deprecated-options*/}
-=======
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 
 <Note>
 
-<<<<<<< HEAD
-Create React App — це застарілий інструмент, який раніше рекомендувався для створення нових React-застосунків. Якщо ви хочете почати новий проєкт за допомогою React, ви можете [створити React-застосунок](/learn/creating-a-react-app), використовуючи один із рекомендованих фреймворків.
-
-Дізнайтеся більше у статті ["Sunsetting Create React App"](/blog/2025/02/14/sunsetting-create-react-app).
-=======
-#### Should I use Create React App? {/*should-i-use-create-react-app*/}
+#### Чи слід використовувати Create React App? {/*should-i-use-create-react-app*/}
 
-No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
+Ні. Create React App застарів. Дізнайтеся більше у статті ["Sunsetting Create React App"](/blog/2025/02/14/sunsetting-create-react-app).
 
 </Note>
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 
 ## Подальші кроки {/*next-steps*/}
 

src/content/learn/installation.md

@@ -70,15 +70,9 @@ export default function Image() {
 Після першого рендеру компонента ви можете збудити (trigger) подальші рендери, оновивши його стан за допомогою [функції `set`.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично додає рендер до черги. (Уявіть відвідувача ресторану, який після першого замовлення замовляє чай, десерт та всяку всячину залежно від стану спраги чи голоду).
 
 <IllustrationBlock sequential>
-<<<<<<< HEAD
   <Illustration caption="Оновлення стану..." alt="React як офіціант у ресторані, що подає клієнту, представленому як постать з курсором замість голови, інтерфейс карти (Card UI). Постать бажає рожеву картку, а не чорну!" src="/images/docs/illustrations/i_rerender1.png" />
   <Illustration caption="...збуджує..." alt="React повертається до кухні компонентів (Component Kitchen) і каже кухареві карток, що потрібна рожева картка (Card)." src="/images/docs/illustrations/i_rerender2.png" />
   <Illustration caption="...рендер!" alt="Кухар карток видає React рожеву картку (Card)." src="/images/docs/illustrations/i_rerender3.png" />
-=======
-  <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. The patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
-  <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
-  <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 </IllustrationBlock>
 
 ## Крок 2: React рендерить ваші компоненти {/*step-2-react-renders-your-components*/}
@@ -90,11 +84,7 @@ export default function Image() {
 
 Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _той інший_ компонент наступним, і так далі. Процес триватиме доти, доки не залишиться вкладених компонентів, і React не знатиме точно, що саме має бути відображено на екрані.
 
-<<<<<<< HEAD
 У цьому прикладі React викличе `Gallery()` й `Image()` кілька разів:
-=======
-In the following example, React will call `Gallery()` and `Image()` several times:
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 
 <Sandpack>
 
@@ -158,17 +148,10 @@ img { margin: 0 10px 10px 0; }
 
 ## Крок 3: React вносить зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/}
 
-<<<<<<< HEAD
 Після рендерингу (виклику) ваших компонентів React модифікує DOM.
 
 * **Для початкового рендерингу** React використовує API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), щоб вивести на екран усі новостворені вузли DOM.
 * **Для повторних рендерів** React застосовує мінімально необхідні операції (обчислені під час рендерингу!), щоб оновити DOM відповідно до результату найсвіжішого рендерингу.
-=======
-After rendering (calling) your components, React will modify the DOM.
-
-* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 
 **React змінює вузли DOM тільки тоді, коли є різниця між рендерами.** Наприклад, ось компонент, який повторно рендериться щосекунди з різними властивостями, що передаються від батьківського компонента. Зверніть увагу, що можна додати текст у `<input>`, оновивши його `value`, але текст не зникає, коли компонент рендериться повторно:
 

src/content/learn/render-and-commit.md

@@ -3,11 +3,7 @@ title: Налаштування
 ---
 <Intro>
 
-<<<<<<< HEAD
 React інтегрується з різними інструментами: редакторами, TypeScript, розширеннями браузера та компіляторами. Цей розділ допоможе вам налаштувати середовище.
-=======
-React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you get your environment set up.
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 
 </Intro>
 
@@ -27,14 +23,6 @@ TypeScript — це популярний спосіб додавати визн
 
 React Compiler — це інструмент, який автоматично оптимізує ваш React-застосунок. [Дізнатися більше](/learn/react-compiler).
 
-<<<<<<< HEAD
-## Start a React Project from scratch {/*start-a-react-project-from-scratch*/}
-
-If you want to build your own framework, you can [start a React project from scratch](/learn/start-a-react-project-from-scratch).
-
 ## Подальші кроки {/*next-steps*/}
-=======
-## Next steps {/*next-steps*/}
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
 
 Відвідайте посібник ["Швидкий старт"](/learn), щоб ознайомитися з найважливішими концепціями React, з якими ви стикаєтеся щодня.

src/content/learn/setup.md

@@ -29,13 +29,8 @@
           "path": "/learn/creating-a-react-app"
         },
         {
-<<<<<<< HEAD
-          "title": "Побудова React-фреймворку",
-          "path": "/learn/building-a-react-framework"
-=======
-          "title": "Build a React App from Scratch",
+          "title": "Побудова React-застосунку з нуля",
           "path": "/learn/build-a-react-app-from-scratch"
->>>>>>> fc29603434ec04621139738f4740caed89d659a7
         },
         {
           "title": "Інтеграція React у наявний проєкт",