diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 1e086b9b7..fcac37738 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -6,8 +6,11 @@ on: types: - completed -permissions: {} - +permissions: + contents: read + issues: write + pull-requests: write + jobs: comment: runs-on: ubuntu-latest diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 83f5fa4f2..22b75016b 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1172,7 +1172,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba0..c3224e517 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} + {!isBlogIndex && (
- + logo by @sawaratsuki1004 )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
-
+ ); } diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index aac80a44f..65bf42757 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish -`refs` passed to classes are not passed as props since they reference the component instance. +`ref`s passed to classes are not passed as props since they reference the component instance. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 778b93574..ef3ab5c0b 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 81fc5c210..b4da5cdff 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) ## Indonesia {/*indonesia*/} * [Indonesia](https://www.meetup.com/reactindonesia/) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 6d4f55763..70049e58e 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -175,7 +175,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -245,7 +245,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -307,7 +307,7 @@ You can fix this component by calculating the `className` and including it in th ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -606,14 +606,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -702,14 +702,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. @@ -770,7 +770,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo ```js src/StoryTray.js active export default function StoryTray({ stories }) { // Copy the array! - let storiesToDisplay = stories.slice(); + const storiesToDisplay = stories.slice(); // Does not affect the original array: storiesToDisplay.push({ @@ -794,14 +794,14 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; -let initialStories = [ +const initialStories = [ {id: 0, label: "Ankit's Story" }, {id: 1, label: "Taylor's Story" }, ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Prevent the memory from growing forever while you read docs. // We're breaking our own rules here. diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 93bcc10fd..ef7b76e04 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -741,9 +741,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -836,13 +836,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 4faf18786..fab6599f2 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -464,7 +464,7 @@ export default function Toggle() { #### Fix debouncing {/*fix-debouncing*/} -In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost. diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index c3da0c637..91fb6803f 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -461,11 +461,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -509,8 +509,8 @@ export default function TaskApp() { } return ( - - + +

Day off in Kyoto

-
-
+ + ); } @@ -676,13 +676,13 @@ In the next step, you will remove prop passing. Now you don't need to pass the list of tasks or the event handlers down the tree: ```js {4-5} - - + +

Day off in Kyoto

-
-
+ + ``` Instead, any component that needs the task list can read it from the `TaskContext`: @@ -730,13 +730,13 @@ export default function TaskApp() { ); return ( - - + +

Day off in Kyoto

-
-
+ + ); } @@ -921,11 +921,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -963,11 +963,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1174,11 +1174,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1363,4 +1363,3 @@ As your app grows, you may have many context-reducer pairs like this. This is a - You can have many context-reducer pairs like this in your app. - diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index ec8d0f610..9e2c6ddb2 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2247,7 +2247,11 @@ body { +<<<<<<< HEAD Unapozunguka kupitia orodha ya `history` ndani ya function unayopitisha kwa `map`, hoja ya `squares` inapitia kila kipengele cha `history`, na hoja ya `move` inapitia kila kiashiria cha orodha: `0`, `1`, `2`, …. (Katika hali nyingi, ungehitaji vipengele halisi vya orodha, lakini ili kuonyesha orodha ya harakati utahitaji tu viashiria.) +======= +As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.) +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 Kwa kila harakati katika historia ya mchezo wa tic-tac-toe, unaunda kipengele cha orodha `
  • ` kinachojumuisha kitufe ` - + ); } diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 557a71cad..91e19c4b4 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -74,9 +74,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -116,9 +116,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index ce06e7035..f69c49af9 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -38,11 +38,11 @@ function MyComponent() { #### Returns {/*returns*/} -`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. +`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. #### Caveats {/*caveats*/} -* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. +* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. * React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values. * If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. @@ -70,9 +70,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -98,9 +98,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } @@ -183,14 +183,14 @@ Often, you'll want the context to change over time. To update context, combine i function MyPage() { const [theme, setTheme] = useState('dark'); return ( - + - + ); } ``` @@ -213,7 +213,7 @@ const ThemeContext = createContext(null); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -317,14 +317,14 @@ const CurrentUserContext = createContext(null); export default function MyApp() { const [currentUser, setCurrentUser] = useState(null); return ( - - + ); } @@ -411,8 +411,8 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); const [currentUser, setCurrentUser] = useState(null); return ( - - + Use dark mode - - + + ) } @@ -596,16 +596,16 @@ export default function MyApp() { function MyProviders({ children, theme, setTheme }) { const [currentUser, setCurrentUser] = useState(null); return ( - - + {children} - - + + ); } @@ -775,11 +775,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -978,9 +978,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> - + - + - +