From 4a4e579fdb4fd4b97bc4b983487c2e83291211fd Mon Sep 17 00:00:00 2001 From: Sam Ko Date: Wed, 26 Feb 2025 12:08:17 -0800 Subject: [PATCH 1/6] docs(hydrateRoot): update suppressHydrationWarning behavior (#7651) --- src/content/reference/react-dom/client/hydrateRoot.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index ca4708845..99190b03a 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -99,7 +99,7 @@ An app fully built with React will usually not have any calls to `root.unmount`. This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. You need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't clean up and free up resources like subscriptions. -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. #### Parameters {/*root-unmount-parameters*/} @@ -270,7 +270,7 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. +This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. React will **not** attempt to patch mismatched text content. --- From cc774fa23167173c144096bb02a49807bcd9eccb Mon Sep 17 00:00:00 2001 From: Karthikeyan B Date: Thu, 27 Feb 2025 16:10:41 +0530 Subject: [PATCH 2/6] removing Provider as in React 19 Context can be used as a provider (#7654) --- .../learn/passing-data-deeply-with-context.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 1aea87b35..e81678c8e 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -468,15 +468,15 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } ``` -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. @@ -514,9 +514,9 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } @@ -567,7 +567,7 @@ export const LevelContext = createContext(1); It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above: 1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. +2. `Section` wraps its children into ``. 3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. ## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} @@ -595,9 +595,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -643,9 +643,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -776,9 +776,9 @@ export default function Section({ children, isFancy }) { 'section ' + (isFancy ? 'fancy' : '') }> - + {children} - +
); } @@ -868,7 +868,7 @@ In general, if some information is needed by distant components in different par * To pass context: 1. Create and export it with `export const MyContext = createContext(defaultValue)`. 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. + 3. Wrap children into `` to provide it from a parent. * Context passes through any components in the middle. * Context lets you write components that "adapt to their surroundings". * Before you use context, try passing props or passing JSX as `children`. @@ -1022,7 +1022,7 @@ li { Remove `imageSize` prop from all the components. -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: +Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: @@ -1036,7 +1036,7 @@ export default function App() { const [isLarge, setIsLarge] = useState(false); const imageSize = isLarge ? 150 : 100; return ( -
- + ) } From 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f Mon Sep 17 00:00:00 2001 From: Josef Hartsough <36377458+JosefHartsough@users.noreply.github.com> Date: Thu, 27 Feb 2025 05:41:09 -0500 Subject: [PATCH 3/6] Invalid bluesky dev account link (#7653) * Update index.md Invalid link to bluesky account * Update index.md Fixed invalid bluesky link for react.dev --- src/content/blog/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 5cd8304b1..f7bbe76f3 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -6,7 +6,7 @@ title: React Blog This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. -You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. +You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. From 6326e7b1b9fa2a7e36a555792e2f1b97cfcf2669 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 28 Feb 2025 11:23:33 -0500 Subject: [PATCH 4/6] [ci] Run notify workflow on open or ready for review (#7660) Ports over the fix in the facebook/react repo for this workflow. We don't have to wait for it to be labeled first, now that we have the reusable maintainer check. --- .github/workflows/discord_notify.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index 9d83081cc..a4b8c9137 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -2,7 +2,7 @@ name: Discord Notify on: pull_request_target: - types: [labeled] + types: [opened, ready_for_review] jobs: check_maintainer: From 4f797621fd35b4391cd0480f09c1d48c57f4f1d2 Mon Sep 17 00:00:00 2001 From: MinichMykyta <142084869+MinichMykyta@users.noreply.github.com> Date: Tue, 14 May 2024 20:58:53 +0200 Subject: [PATCH 5/6] Translated adding-interactivity.md Co-authored-by: Alina Listunova --- src/content/learn/adding-interactivity.md | 290 +++++++++++----------- src/sidebarLearn.json | 2 +- 2 files changed, 146 insertions(+), 146 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 5c87a3e79..63da5a3b1 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -title: Adding Interactivity +title: Додавання інтерактивності --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +На екрані деякі елементи оновлюються у відповідь на дії користувача. Наприклад, під час натискання на галерею зображень змінюється поточне зображення. У React дані, які поступово змінюються, називаються *станом.* Ви можете додавати стан до будь-якого компонента і оновлювати його за потреби. У цьому розділі ви дізнаєтеся, як писати компоненти, що оброблюють взаємодію, оновлюють свій стан та згодом відображають різний результат. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [Як обробляти події, ініційовані користувачем](/learn/responding-to-events) +* [Як змусити компоненти "запам'ятовувати" інформацію за допомогою стану](/learn/state-a-components-memory) +* [Як React оновлює UI за два кроки](/learn/render-and-commit) +* [Чому стан не оновлюється одразу після його зміни](/learn/state-as-a-snapshot) +* [Як додати до черги кілька оновлень стану](/learn/queueing-a-series-of-state-updates) +* [Як оновити об'єкт у стані](/learn/updating-objects-in-state) +* [Як оновити масив у стані](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +## Реагування на події {/*responding-to-events*/} -React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +React надає вам можливість додавати *обробники подій* до вашого JSX. Обробники подій — це ваші власні функції, які виконуватимуться у відповідь на різні взаємодії, як-от натискання мишкою, наведення курсора, фокусування в елементі введення даних у формі тощо. -Built-in components like ` ); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Прочитайте розділ **["Реагування на події"](/learn/responding-to-events)**, щоб дізнатися, як додавати обробники подій. -## State: a component's memory {/*state-a-components-memory*/} +## Стан: пам'ять компонента {/*state-a-components-memory*/} -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* +Компоненти часто потребують змінювати те, що на екрані, унаслідок взаємодії. Введення у формі має оновлювати поле введення, натискання на кнопку "Далі" у каруселі зображень — змінювати відображуване зображення, а натискання на кнопку "Купити" — додавати продукт до кошика. Компонентам потрібно "пам'ятати" все це: поточне значення у полі введення, поточне зображення, продукти у кошику. У React цей вид пам'яті певного компонента називається *стан*. -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Ви можете додати стан до компонента за допомогою хука [`useState`](/reference/react/useState). *Хуки* — це спеціальні функції, які дають змогу вашим компонентам використовувати функції React (стан — одна з цих функцій). Хук `useState` дає вам змогу оголосити змінну стану. Він приймає початковий стан і повертає пару значень: поточний стан і функцію встановлення стану, яка може його оновлювати. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Ось як галерея зображень використовує та оновлює стан після натискання: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + — {sculpture.artist}

- ({index + 1} of {sculptureList.length}) + ({index + 1} із {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Прочитайте розділ **["Стан: пам'ять компонента"](/learn/state-a-components-memory)**, щоб дізнатися, як запам'ятати значення та оновлювати його внаслідок взаємодії. -## Render and commit {/*render-and-commit*/} +## Рендер і коміт {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Перш ніж ваші компоненти відобразяться на екрані, їх повинен відрендерити React. Розуміння кроків цього процесу допоможе осмислити перебіг виконання вашого коду та пояснити його поведінку. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та видавання UI складається з трьох кроків: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Тригер** рендеру (доставлення замовлення гостя на кухню) +2. **Рендер** компонента (готування замовлення на кухні) +3. **Коміт** у DOM (розміщення замовлення на столі гостя) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Прочитайте розділ **["Рендер і коміт"](/learn/render-and-commit)** для вивчення життєвого циклу оновлення UI. -## State as a snapshot {/*state-as-a-snapshot*/} +## Стан як снепшот {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +На відміну від звичайних змінних JavaScript, стан React поводиться радше як снепшот. Задання йому значення не змінює наявну змінну стану, а натомість запускає повторний рендер. Це може бути неочікувано на початку! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Запитує повторний рендер з 1 +console.log(count); // Досі 0! ``` -This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Ця поведінка допомагає уникнути дефектів. Ось невеличкий застосунок чату. Спробуйте вгадати, що відбудеться, якщо спершу натиснути "Надіслати", а *потім* змінити отримувача на Боба. Чиє ​ім'я відображатиме `alert` через п'ять секунд? @@ -273,33 +273,33 @@ This behavior helps you avoid subtle bugs. Here is a little chat app. Try to gue import { useState } from 'react'; export default function Form() { - const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [to, setTo] = useState('Аліса'); + const [message, setMessage] = useState('Привіт'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Ви надіслали ${message} користувачу ${to}`); }, 5000); } return (