Merge pull request #595 from reactjs/sync-6326e7b1

Sync with react.dev @ 6326e7b
Translate Adding Interactivity

Author: alinkedd

.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:

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.
 
 </Intro>
 

src/content/learn/adding-interactivity.md

@@ -468,15 +468,15 @@ import { LevelContext } from './LevelContext.js';
 export default function Section({ level, children }) {
   return (
     <section className="section">
-      <LevelContext.Provider value={level}>
+      <LevelContext value={level}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
 ```
 
-This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext.Provider>` in the UI tree above it.
+This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext>` in the UI tree above it.
 
 <Sandpack>
 
@@ -514,9 +514,9 @@ import { LevelContext } from './LevelContext.js';
 export default function Section({ level, children }) {
   return (
     <section className="section">
-      <LevelContext.Provider value={level}>
+      <LevelContext value={level}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -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 `<Section>`.
-2. `Section` wraps its children into `<LevelContext.Provider value={level}>`.
+2. `Section` wraps its children into `<LevelContext value={level}>`.
 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 (
     <section className="section">
-      <LevelContext.Provider value={level + 1}>
+      <LevelContext value={level + 1}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -643,9 +643,9 @@ export default function Section({ children }) {
   const level = useContext(LevelContext);
   return (
     <section className="section">
-      <LevelContext.Provider value={level + 1}>
+      <LevelContext value={level + 1}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -776,9 +776,9 @@ export default function Section({ children, isFancy }) {
       'section ' +
       (isFancy ? 'fancy' : '')
     }>
-      <LevelContext.Provider value={level + 1}>
+      <LevelContext value={level + 1}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -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 `<MyContext.Provider value={...}>` to provide it from a parent.
+  3. Wrap children into `<MyContext value={...}>` 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 `<ImageSizeContext.Provider value={imageSize}>` 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 `<ImageSizeContext value={imageSize}>` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
 
 <Sandpack>
 
@@ -1036,7 +1036,7 @@ export default function App() {
   const [isLarge, setIsLarge] = useState(false);
   const imageSize = isLarge ? 150 : 100;
   return (
-    <ImageSizeContext.Provider
+    <ImageSizeContext
       value={imageSize}
     >
       <label>
@@ -1051,7 +1051,7 @@ export default function App() {
       </label>
       <hr />
       <List />
-    </ImageSizeContext.Provider>
+    </ImageSizeContext>
   )
 }
 

src/content/learn/passing-data-deeply-with-context.md

@@ -332,7 +332,7 @@ button { margin-right: 10px; }
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('You clicked on the toolbar!');
+      alert('Ви натиснули на панель інструментів!');
     }}>
       <button onClick={() => alert('Відтворюється!')}>
         Відтворити фільм
@@ -386,7 +386,7 @@ function Button({ onClick, children }) {
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('You clicked on the toolbar!');
+      alert('Ви натиснули на панель інструментів!');
     }}>
       <Button onClick={() => alert('Відтворюється!')}>
         Відтворити фільм

src/content/learn/responding-to-events.md

@@ -410,9 +410,9 @@ button { margin-left: 5px; }
 import { useState } from 'react';
 
 const initialList = [
-  { id: 0, title: 'Великі животи' },
-  { id: 1, title: 'Місячний пейзаж' },
-  { id: 2, title: 'Теракотова армія' },
+  { id: 0, title: 'Великі животи (Big Bellies)' },
+  { id: 1, title: 'Місячний пейзаж (Lunar Landscape)' },
+  { id: 2, title: 'Теракотова армія (Terracotta Army)' },
 ];
 
 export default function List() {
@@ -468,9 +468,9 @@ import { useState } from 'react';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Великі животи', seen: false },
-  { id: 1, title: 'Місячний пейзаж', seen: false },
-  { id: 2, title: 'Теракотова армія', seen: true },
+  { id: 0, title: 'Великі животи (Big Bellies)', seen: false },
+  { id: 1, title: 'Місячний пейзаж (Lunar Landscape)', seen: false },
+  { id: 2, title: 'Теракотова армія (Terracotta Army)', seen: true },
 ];
 
 export default function BucketList() {
@@ -575,9 +575,9 @@ import { useState } from 'react';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Великі животи', seen: false },
-  { id: 1, title: 'Місячний пейзаж', seen: false },
-  { id: 2, title: 'Теракотова армія', seen: true },
+  { id: 0, title: 'Великі животи (Big Bellies)', seen: false },
+  { id: 1, title: 'Місячний пейзаж (Lunar Landscape)', seen: false },
+  { id: 2, title: 'Теракотова армія (Terracotta Army)', seen: true },
 ];
 
 export default function BucketList() {
@@ -671,9 +671,9 @@ import { useImmer } from 'use-immer';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Великі животи', seen: false },
-  { id: 1, title: 'Місячний пейзаж', seen: false },
-  { id: 2, title: 'Теракотова армія', seen: true },
+  { id: 0, title: 'Великі животи (Big Bellies)', seen: false },
+  { id: 1, title: 'Місячний пейзаж (Lunar Landscape)', seen: false },
+  { id: 2, title: 'Теракотова армія (Terracotta Army)', seen: true },
 ];
 
 export default function BucketList() {

src/content/learn/updating-arrays-in-state.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() {
 
 </Sandpack>
 
-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.
 
 ---
 

src/content/reference/react-dom/client/hydrateRoot.md

@@ -109,7 +109,7 @@
       ]
     },
     {
-      "title": "Adding Interactivity",
+      "title": "Додавання інтерактивності",
       "path": "/learn/adding-interactivity",
       "tags": [],
       "routes": [