Merge pull request #895 from reactjs/sync-6570e6cd

carburo · web-flow · commit fab9196b0fe7 · 2023-11-26T23:41:11.000-05:00
Sync with react.dev @ 6570e6c
diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -428,7 +428,7 @@ export default function PackingList() {
 
 Ten en cuenta que debes escribir  `importance > 0 && ...` en lugar de `importance && ...` para que si `importance` es `0`, `0` no sea mostrado como el resultado.
 
-En esta solución, se utilizan dos condiciones separadas para insertar un espacio entre el nombre y la etiqueta de importancia. Alternativamente, podrías usar un fragmento con un espacio inicial: `importance > 0 && <> <i>...</i></>` o agregar un espacio inmediatamente dentro de `<i>`:  `importance > 0 && <i> ...</i>`.
+En esta solución, se utilizan dos condiciones separadas para insertar un espacio entre el nombre y la etiqueta de importancia. Alternativamente, podrías usar un Fragmento con un espacio inicial: `importance > 0 && <> <i>...</i></>` o agregar un espacio inmediatamente dentro de `<i>`:  `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
@@ -642,4 +642,4 @@ En el ámbito del desarrollo, gracias a [Jared Palmer](https://twitter.com/jared
 
 Un enorme agradecimiento a todas las personas que se ofrecieron voluntariamente para participar en el programa de pruebas alfa y beta. Su entusiasmo y valiosos comentarios nos ayudaron a dar forma a estos documentos. Un agradecimiento especial a nuestra probadora beta, [Debbie O'Brien](https://twitter.com/debs_obrien), quien dio una charla sobre su experiencia utilizando los documentos de React en React Conf 2021.
 
-Por último, gracias a la comunidad de React por ser la inspiración detrás de este esfuerzo. Ustedes son la razón por la que hacemos esto, y esperamos que los nuevos documentos les ayuden a utilizar React para construir cualquier interfaz de usuario que deseen.
+Por último, gracias a la comunidad de React por ser la inspiración detrás de este esfuerzo. Ustedes son la razón por la que hacemos esto, y esperamos que los nuevos documentos les ayuden a utilizar React para construir cualquier interfaz de usuario que deseen.
diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md
@@ -46,7 +46,7 @@ En general, *no* cambiamos la versión mayor para cambios en:
 
 * **Advertencias de desarrollo.** Dado que estas no afectan el comportamiento de producción, podemos agregar nuevas advertencias o modificar advertencias existentes entre versiones mayores. De hecho, esto es lo que nos permite advertir de manera confiable sobre los próximos cambios importantes.
 * **APIs que comienzan con `unstable_`.** Estas son proporcionadas como funcionalidades experimentales cuyas APIs aún no confiamos. Al lanzarlas con un prefijo `unstable_`, podemos iterar más rápido y obtener una API estable antes.
-* **Versiones alfa y canary de React.** Proporcionamos versiones alfa de React como una forma de probar nuevas funciones tempranamente, pero necesitamos la flexibilidad para hacer cambios basados en lo que aprendemos en el período alfa. Si usas estas versiones, tenga en cuenta que las APIs pueden cambiar antes del lanzamiento estable.
+* **Versiones Alfa y Canary de React.** Proporcionamos versiones alfa de React como una forma de probar nuevas funciones tempranamente, pero necesitamos la flexibilidad para hacer cambios basados en lo que aprendemos en el período alfa. Si usas estas versiones, tenga en cuenta que las APIs pueden cambiar antes del lanzamiento estable.
 * **APIs no documentadas y estructuras de datos internas.** Si accedes a nombres de propiedades internas como `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` o `__reactInternalInstance$uk43rzhitjg`, no hay garantía. Estas por tu cuenta.
 
 Esta política está diseñada para ser pragmática: ciertamente, no queremos causarle dolores de cabeza. Si cambiamos la versión mayor para todos estos cambios, terminaríamos lanzando más versiones mayores y, en última instancia, causando más problemas de versionado para la comunidad. También significaría que no podemos hacer progreso en el mejoramiento de React tan rápido como nos gustaría.
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
@@ -626,7 +626,7 @@ export default function PackingList() {
 
 Ten en cuenta que debes escribir `importance > 0 && ...` en lugar de `importance && ...` para que si `importance` es `0`, ¡no se muestre `0` como resultado!
 
-En esta solución, se utilizan dos condiciones distintas para insertar un espacio entre el nombre y la etiqueta de importancia. Como alternativa, puedes utilizar un fragmento con un espacio inicial: `importance > 0 && <> <i>...</i></>` o añadir un espacio inmediatamente dentro del `<i>`: `importance > 0 && <i> ...</i>`.
+En esta solución, se utilizan dos condiciones distintas para insertar un espacio entre el nombre y la etiqueta de importancia. Como alternativa, puedes utilizar un Fragmento con un espacio inicial: `importance > 0 && <> <i>...</i></>` o añadir un espacio inmediatamente dentro del `<i>`: `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md
@@ -1145,7 +1145,7 @@ hr {
 
 <Hint>
 
-Tendrás que convertir los `map` en un bucle manual, o usar un fragment.
+Tendrás que convertir los `map` en un bucle manual, o usar un Fragmento.
 
 </Hint>
 
@@ -1208,7 +1208,7 @@ hr {
 
 Usar el índice de la línea original como _`key`_ ya no funciona porque cada separador y cada párrafo están ahora en el mismo array. Sin embargo, puedes darle a cada uno de ellos una _key_ distintiva usando un sufijo, p. ej. `key={i + '-text'}`.
 
-De forma alternativa, puedes renderizar una colección de fragments que contengan `<hr />` y `<p>...</p>`. Sin embargo, el atajo de sintaxis `<>...</>` no admite pasarle _keys_, así que tendrás que escribir `<Fragment>` explícitamente:
+De forma alternativa, puedes renderizar una colección de Fragmentos que contengan `<hr />` y `<p>...</p>`. Sin embargo, la sintaxis reducida `<>...</>` no admite pasarle _keys_, así que tendrás que escribir `<Fragment>` explícitamente:
 
 <Sandpack>
 
@@ -1254,7 +1254,7 @@ hr {
 
 </Sandpack>
 
-Recuerda, ¡los fragments (a menudo escritos como `<> </>`) te permiten agrupar nodos JSX sin añadir `<div>`s extra!
+Recuerda, ¡los Fragmentos (a menudo escritos como `<> </>`) te permiten agrupar nodos JSX sin añadir `<div>`s extra!
 
 </Solution>
 
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
@@ -362,11 +362,11 @@ Obtendrás este error:
 
 <ConsoleBlock level="error">
 
-/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...</>`<div>**(Traducción)**</div>/src/App.js: Los elementos JSX adyacentes deben estar envueltos en una etiqueta contenedora. ¿Querías un fragmento JSX `<>...</>`?
+/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment `<>...</>`<div>**(Traducción)**</div>/src/App.js: Los elementos JSX adyacentes deben estar envueltos en una etiqueta contenedora. ¿Querías un Fragmento JSX `<>...</>`?
 
 </ConsoleBlock>
 
-Los componentes de React deben devolver un solo elemento JSX y no múltiples elementos JSX adyacentes como dos botones. Para solucionar esto, puedes usar *fragmentos* (`<>` y `</>`) para envolver múltiples elementos JSX adyacentes como este:
+Los componentes de React deben devolver un solo elemento JSX y no múltiples elementos JSX adyacentes como dos botones. Para solucionar esto, puedes usar *Fragmentos* (`<>` y `</>`) para envolver múltiples elementos JSX adyacentes como este:
 
 ```js {3-6}
 export default function Square() {
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
@@ -34,7 +34,7 @@ Para mostrar un input, renderiza el componente [`<input>` incorporado en el nave
 
 <Canary>
 
-Las extensiones a la prop `formAction` solo están disponible actualmente en los canales experimental y canary de React. En versiones estables de React `formAction` funciona solo como un [componente integrado HTML del navegador](https://react.dev/reference/react-dom/components#all-html-components). Más información sobre [los canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels).
+Las extensiones a la prop `formAction` solo están disponible actualmente en los canales experimental y Canary de React. En versiones estables de React `formAction` funciona solo como un [componente integrado HTML del navegador](https://react.dev/reference/react-dom/components#all-html-components). Más información sobre [los canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels).
 </Canary>
 
 [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): Un string o una función. Sobreescribe el `<form action>` padre para `type="submit"` y `type="image"`. Cuando se pasa una URL a `action` el formulario se comportará como un formulario HTML estándar. Cuando se pasa una función a `formAction` la función manejará el envío del formulario. Consulta [`<form action>`](/reference/react-dom/components/form#props).
diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
@@ -5,7 +5,7 @@ canary: true
 
 <Canary>
 
-The `useFormState` Hook is currently only available in React's canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`.
+The `useFormState` Hook is currently only available in React's Canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`.
 
 </Canary>
 
diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -5,7 +5,7 @@ canary: true
 
 <Canary>
 
-The `useFormStatus` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+The `useFormStatus` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
 
 </Canary>
 
@@ -38,7 +38,7 @@ function Submit() {
   return <button disabled={status.pending}>Submit</button>
 }
 
-export default App() {
+export default function App() {
   return (
     <form action={action}>
       <Submit />
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
@@ -114,11 +114,13 @@ async function requestUsername(formData) {
   // ...
 }
 
-export default App() {
-  <form action={requestUsername}>
-    <input type="text" name="username" />
-    <button type="submit">Request</button>
-  </form>
+export default function App() {
+  return (
+    <form action={requestUsername}>
+      <input type="text" name="username" />
+      <button type="submit">Request</button>
+    </form>
+  );
 }
 ```
 
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
@@ -5,7 +5,7 @@ canary: true
 
 <Canary>
 
-The `use` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+The `use` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
 
 </Canary>
 
diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
@@ -5,7 +5,7 @@ canary: true
 
 <Canary>
 
-The `useOptimistic` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+The `useOptimistic` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
 
 </Canary>
 
@@ -27,7 +27,7 @@ The `useOptimistic` Hook is currently only available in React's canary and exper
 
 ### `useOptimistic(state, updateFn)` {/*use*/}
 
-`useOptimistic` is a React hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.
+`useOptimistic` is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.
 
 This state is called the "optimistic" state because it is usually used to immediately present the user with the result of performing an action, even though the action actually takes time to complete.
 
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
@@ -57,7 +57,7 @@ La instantánea actual de la fuente de almacenamiento que puedes usar en tu lóg
 
 * Si se pasa una función `subscribe` diferente durante un rerenderizado, React se volverá a suscribir a la fuente de almacenamiento de datos usando la función `subscribe` recién pasada. Puedes evitarlo declarando `subscribe` fuera del componente.
 
-* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the transition update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store.
+* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, for every transition update, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store.
 
 * It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be [marked as non-blocking transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX.
 
