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/package.json b/package.json index 6d6b53f92..918d42fa2 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", - "date-fns": "^2.16.1", "debounce": "^1.2.1", "github-slugger": "^1.3.0", "next": "15.1.0", diff --git a/public/fonts/Source-Code-Pro-Bold.woff2 b/public/fonts/Source-Code-Pro-Bold.woff2 new file mode 100644 index 000000000..220bd5d96 Binary files /dev/null and b/public/fonts/Source-Code-Pro-Bold.woff2 differ diff --git a/public/fonts/Source-Code-Pro-Regular.woff2 b/public/fonts/Source-Code-Pro-Regular.woff2 index 655cd9e81..fd665c465 100644 Binary files a/public/fonts/Source-Code-Pro-Regular.woff2 and b/public/fonts/Source-Code-Pro-Regular.woff2 differ diff --git a/public/images/blog/react-labs-april-2025/flip.gif b/public/images/blog/react-labs-april-2025/flip.gif deleted file mode 100644 index a7363ebf6..000000000 Binary files a/public/images/blog/react-labs-april-2025/flip.gif and /dev/null differ diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 600e37c74..2e7182bcc 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -875,7 +875,8 @@ function ExampleLayout({
+ className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center" + dir="ltr"> {right}
} 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 ? (
    @@ -373,7 +373,7 @@ function IllustrationBlock({ )}
- + ); } diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index 7fbd537e7..dd6fd12bd 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -1,7 +1,7 @@ export const template = { '/src/index.js': { hidden: true, - code: `import React, { StrictMode } from "react"; + code: `import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./styles.css"; diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index 409bd03b8..3f15afe95 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -27,7 +27,6 @@ function PageHeading({ tags = [], breadcrumbs, }: PageHeadingProps) { - console.log('version', version); return (
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index 628085744..b8a8394b6 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -124,7 +124,14 @@ export const Seo = withRouter( )} + -`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 a2bcd196e..a97f3d5b4 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/index.md b/src/content/community/index.md index a22e50e13..048e43435 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -29,4 +29,8 @@ Cada comunidad está constituida por miles de usuarios de React. ## Noticias {/*news*/} +<<<<<<< HEAD Para conocer las últimas noticias sobre React, [sigue **@reactjs** en Twitter](https://twitter.com/reactjs) y el [blog oficial de React](/blog/) en este sitio web. +======= +For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website. +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index f6b0c27a6..4a4431ceb 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -38,7 +38,7 @@ title: Reuniones de React ## Canadá {/*canada*/} * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/) -* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/) +* [Montreal, QC](https://guild.host/react-montreal/) * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/) * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/) * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/) @@ -88,6 +88,7 @@ title: Reuniones de React * [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/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 9e319796c..eb1faeb77 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -115,10 +115,17 @@ De manera similar, si confías en que las aplicaciones usen tu framework para di La división del código por rutas, cuando se integra con el empaquetamiento y la obtención de datos, puede reducir el tiempo de carga inicial de su aplicación y el tiempo que tarda en renderizarse el contenido visible más grande de la aplicación. ([Largest Contentful Paint](https://web.dev/articles/lcp?hl=es-419)). +<<<<<<< HEAD Para obtener instrucciones sobre cómo dividir el código, consulte la documentación de su herramienta de compilación: - [Optimizaciones de compilación](https://es.vite.dev/guide/features.html#optimizaciones-de-compilacion) - [División de código con Parcel](https://parceljs.org/features/code-splitting/) - [División de código con Rsbuild](https://rsbuild.dev/guide/optimization/code-splitting) +======= +For code-splitting instructions, see your build tool docs: +- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations) +- [Parcel code splitting](https://parceljs.org/features/code-splitting/) +- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting) +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 ### Mejorar el rendimiento de las aplicaciones {/*improving-application-performance*/} diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 8c6d2fd61..4ce8159e5 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 @@ Renderizar es un *cálculo*, no debería tratar de "hacer" cosas. ¿Puedes expre ```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 @@ Puedes arreglar este componente calculando el `className` e incluirlo en la sali ```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,20 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "Historia de Ankit" }, {id: 1, label: "Historia de Taylor" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // PISTA: Evita que la memoria crezca por siempre mientras lees documentos. // Estamos rompiendo nuestras propias reglas aquí. @@ -702,14 +708,20 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "Historia de Ankit" }, {id: 1, label: "Historia de Taylor" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // PISTA: Evita que la memoria crezca por siempre mientras lees documentos. // Estamos rompiendo nuestras propias reglas aquí. @@ -769,8 +781,13 @@ Como alternativa, podrías crear un _nuevo_ array (copiando el existente) antes ```js src/StoryTray.js active export default function StoryTray({ stories }) { +<<<<<<< HEAD // ¡Copia el array! let storiesToDisplay = stories.slice(); +======= + // Copy the array! + const storiesToDisplay = stories.slice(); +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 // Esto no afecta al array original: storiesToDisplay.push({ @@ -794,14 +811,20 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "Historia de Ankit" }, {id: 1, label: "Historia de Taylor" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // PISTA: Evita que la memoria crezca por siempre mientras lees documentos. // Estamos rompiendo nuestras propias reglas aquí. diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index b11a07d55..b9689e43f 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/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 16000f269..d8565de2b 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -672,7 +672,11 @@ label { +<<<<<<< HEAD El estado del contador se reinicia cuando se hace clic en la casilla de verificación. Aunque se renderiza un `Counter`, el primer hijo del `div` cambia de `div` a `section`. Cuando el `div` hijo se eliminó del DOM, todo el árbol debajo de él (incluyendo el `Counter` y su estado) se destruyó también. +======= +The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 @@ -2011,7 +2015,7 @@ export default function ContactList() {
``` @@ -270,8 +278,13 @@ import db from './database'; async function Page({id}) { // Suspenderá el Server Component. const note = await db.notes.get(id); +<<<<<<< HEAD // NOTA: no se espera, se iniciará aquí y se esperará en el cliente. +======= + + // NOTE: not awaited, will start here and await on the client. +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 const commentsPromise = db.comments.get(note.id); return (
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 7e855d49a..a0e5c7297 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -28,7 +28,11 @@ Para soportar Server Functions como bundler o framework, recomendamos usar una v +<<<<<<< HEAD Cuando se define una Server Function con la directiva [`"use server"`](/reference/rsc/use-server), tu framework creará automáticamente una referencia a la Server Function, y pasará esa referencia al Client Component. Cuando esa función es llamada en el cliente, React enviará una petición al servidor para ejecutar la función, y devolver el resultado. +======= +When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 Las Server Functions pueden crearse en Server Components y pasarse como props a los Client Components, o pueden importarse y utilizarse en Client Components. diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index 1cdc8ae93..f249679ae 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -41,7 +41,11 @@ export default function RichTextEditor({ timestamp, text }) { } ``` +<<<<<<< HEAD Cuando un archivo marcado con `'use client'` es importado desde un Server Component, los [bundlers compatibles](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) tratarán la importación del módulo como una barrera entre el código que se ejecuta en el servidor y el que se ejecuta en el cliente. +======= +When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. +>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 Las dependencias de `RichTextEditor`, `formatDate` y `Button` también se evaluarán en el cliente independientemente de si sus módulos contienen una directiva `'use client'`. Ten en cuenta que un módulo puede ser evaluado en el servidor cuando se importa desde código del servidor y en el cliente cuando se importa desde código del cliente. diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index d3d54560e..6da6d49bb 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -207,7 +207,7 @@ A component's props and state are immutable [snapshots](learn/state-as-a-snapsho You can think of the props and state values as snapshots that are updated after rendering. For this reason, you don't modify the props or state variables directly: instead you pass new props, or use the setter function provided to you to tell React that state needs to update the next time the component is rendered. ### Don't mutate Props {/*props*/} -Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug since it may or may not work depending on the circumstance. +Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances. ```js {2} function Post({ item }) { @@ -307,7 +307,7 @@ function useIconStyle(icon) { } ``` -If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. +If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. ```js {4} style = useIconStyle(icon); // `style` is memoized based on `icon` @@ -327,7 +327,7 @@ Similarly, it's important to not modify the return values of Hooks, as they may ## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/} -Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created. +Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created. When you use JSX in an expression, React may eagerly evaluate the JSX before the component finishes rendering. This means that mutating values after they've been passed to JSX can lead to outdated UIs, as React won't know to update the component's output. diff --git a/src/content/warnings/react-dom-test-utils.md b/src/content/warnings/react-dom-test-utils.md index 2dc33e5b2..794bb1d11 100644 --- a/src/content/warnings/react-dom-test-utils.md +++ b/src/content/warnings/react-dom-test-utils.md @@ -2,8 +2,6 @@ title: react-dom/test-utils Deprecation Warnings --- -TODO: update for 19? - ## ReactDOMTestUtils.act() warning {/*reactdomtestutilsact-warning*/} `act` from `react-dom/test-utils` has been deprecated in favor of `act` from `react`. diff --git a/src/content/warnings/react-test-renderer.md b/src/content/warnings/react-test-renderer.md index da7623fe2..dca1761b4 100644 --- a/src/content/warnings/react-test-renderer.md +++ b/src/content/warnings/react-test-renderer.md @@ -2,8 +2,6 @@ title: react-test-renderer Deprecation Warnings --- -TODO: Update this for 19? - ## ReactTestRenderer.create() warning {/*reacttestrenderercreate-warning*/} react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals. diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx index a67c5742d..c8cf28ad8 100644 --- a/src/pages/errors/[errorCode].tsx +++ b/src/pages/errors/[errorCode].tsx @@ -26,7 +26,7 @@ export default function ErrorDecoderPage({ ); return ( - + */} - + ); } diff --git a/src/styles/index.css b/src/styles/index.css index 281111092..6b2915be4 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -12,7 +12,17 @@ font-style: normal; font-weight: 400; font-display: swap; - src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2'); + src: url('https://react.dev/fonts/Source-Code-Pro-Regular.woff2') + format('woff2'); + } + + @font-face { + font-family: 'Source Code Pro'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('https://react.dev/fonts/Source-Code-Pro-Bold.woff2') + format('woff2'); } /* Latin */ diff --git a/yarn.lock b/yarn.lock index a118cbeda..e866a206b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2799,11 +2799,6 @@ data-view-byte-offset@^1.0.0: es-errors "^1.3.0" is-data-view "^1.0.1" -date-fns@^2.16.1: - version "2.28.0" - resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz" - integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== - debounce@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"