Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uso correcto de siglas y acrónimos en español #837

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ La documentación está dividida en secciones para atender a diferentes estilos

**[Aprende React](https://es.react.dev/learn)** está diseñado para introducir conceptos fundamentales paso a paso. Cada artículo individual de Aprende React se basa en los conocimientos de los anteriores, así que asegúrate de no añadir ninguna "dependencia cíclica" entre ellos. Es importante que el lector pueda empezar por el primer artículo y llegar hasta el último artículo de Aprende React sin tener que "mirar hacia delante" en busca de una definición. Esto explica algunas opciones de ordenación (por ejemplo, que el estado se explique antes que los eventos, o que "pensar en React" no utilice refs). Learn React también sirve como manual de referencia para los conceptos de React, por lo que es importante ser muy estricto con sus definiciones y las relaciones entre ellas.

**[Referencia API](https://es.react.dev/reference/react)** está organizada por APIs y no por conceptos. Pretende ser exhaustiva. Cualquier caso práctico o recomendación que se haya omitido por brevedad en Aprende React se mencionará en la documentación de referencia de las API correspondientes.
**[Referencia API](https://es.react.dev/reference/react)** está organizada por las API y no por conceptos. Pretende ser exhaustiva. Cualquier caso práctico o recomendación que se haya omitido por brevedad en Aprende React se mencionará en la documentación de referencia de las API correspondientes.

**Intenta seguir tus propias instrucciones.**

Cuando escribas instrucciones paso a paso (por ejemplo, cómo instalar algo), intenta olvidar todo lo que sabes sobre el tema y sigue realmente las instrucciones que has escrito, paso a paso. A menudo descubrirás que hay conocimientos implícitos que olvidaste mencionar, o que en las instrucciones faltan pasos o están desordenados. Puntos extra por hacer que *otra persona* siga los pasos y observar con qué dificultades se encuentra. A menudo será algo muy sencillo que no has previsto.
Cuando escribas instrucciones paso a paso (por ejemplo, cómo instalar algo), intenta olvidar todo lo que sabes sobre el tema y sigue realmente las instrucciones que has escrito, paso a paso. A menudo descubrirás que hay conocimientos implícitos que olvidaste mencionar, o que en las instrucciones faltan pasos o están desordenados. Puntos extra por hacer que _otra persona_ siga los pasos y observar con qué dificultades se encuentra. A menudo será algo muy sencillo que no has previsto.

## Pautas para los ejemplos de código

Expand All @@ -42,7 +42,7 @@ Ignora esto si estás escribiendo específicamente sobre ES5.

Recuerda que ES6 es todavía nuevo para mucha gente. Aunque lo usamos en muchos sitios (`const` / `let`, clases, funciones de flecha), si el código ES5 equivalente es igual de sencillo y legible, considera usarlo.

En particular, deberías preferir las declaraciones `function` con nombre a las flechas `const myFunction = () => ...` para las funciones de nivel superior. Sin embargo, *deberías* usar funciones de flecha cuando proporcionen una mejora tangible (como preservar el contexto `this` dentro de un componente). Considera ambos lados de la compensación cuando decidas si utilizar una nueva función.
En particular, deberías preferir las declaraciones `function` con nombre a las flechas `const myFunction = () => ...` para las funciones de nivel superior. Sin embargo, _deberías_ usar funciones de flecha cuando proporcionen una mejora tangible (como preservar el contexto `this` dentro de un componente). Considera ambos lados de la compensación cuando decidas si utilizar una nueva función.

#### No utilices funciones que aún no estén normalizadas.

Expand Down
66 changes: 33 additions & 33 deletions content/docs/concurrent-mode-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,27 @@ prev: concurrent-mode-adoption.html

<div class="scary">

>Advertencia:
> Advertencia:
>
>Esta página describía **funcionalidades experimentales que aún no están disponibles en una versión estable**. Estaba dirigida a usuarios pioneros y personas curiosas.
> Esta página describía **funcionalidades experimentales que aún no están disponibles en una versión estable**. Estaba dirigida a usuarios pioneros y personas curiosas.
>
>Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. **Por favor dirígete al [artículo del anuncio de React 18 Alfa](/blog/2021/06/08/the-plan-for-react-18.html
) para obtener información actualizada.**
> Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. **Por favor dirígete al [artículo del anuncio de React 18 Alfa](/blog/2021/06/08/the-plan-for-react-18.html) para obtener información actualizada.**
>
>Antes de que se lance React 18, reemplazaremos esta página con documentación estable.
> Antes de que se lance React 18, reemplazaremos esta página con documentación estable.

</div>

Esta página es una referencia del API del [Modo concurrente](/docs/concurrent-mode-intro.html) de React. Si estás buscando una guía de introducción, revisa [Patrones concurrentes en interfaces de usuario](/docs/concurrent-mode-patterns.html).

**Nota: Esto es un una vista previa de la comunidad y no es la versión final estable. Es probable que existan futuros cambios a estas APIs. ¡Úsalas bajo tu propio riesgo!**
**Nota: Esto es un una vista previa de la comunidad y no es la versión final estable. Es probable que existan futuros cambios a estas API. ¡Úsalas bajo tu propio riesgo!**

- [Habilitando el modo concurrente](#concurrent-mode)
- [`createRoot`](#createroot)
- [`createRoot`](#createroot)
- [Suspense](#suspense)
- [`Suspense`](#suspensecomponent)
- [`SuspenseList`](#suspenselist)
- [`useTransition`](#usetransition)
- [`useDeferredValue`](#usedeferredvalue)
- [`Suspense`](#suspensecomponent)
- [`SuspenseList`](#suspenselist)
- [`useTransition`](#usetransition)
- [`useDeferredValue`](#usedeferredvalue)

## Habilitando el modo concurrente {#concurrent-mode}

Expand Down Expand Up @@ -65,8 +64,9 @@ Para más información del Modo concurrente, revisa la [documentación del modo
En este ejemplo, `ProfileDetails` está esperando una llamada asíncrona del API para obtener algunos datos. Mientras esperamos a `ProfileDetails` y `ProfilePhoto`, vamos a ir mostrando `Loading...` como contenido de respaldo mientras tanto. Es importante tener en cuenta que hasta que todos los hijos de `<Suspense>` hayan cargado, continuaremos mostrando el contenido de respaldo.

`Suspense` lleva dos props:
* **fallback** lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense` hayan terminado de renderizar.
* **unstable_avoidThisFallback** lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura.

- **fallback** lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense` hayan terminado de renderizar.
- **unstable_avoidThisFallback** lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura.

### `<SuspenseList>` {#suspenselist}

Expand All @@ -90,33 +90,35 @@ En este ejemplo, `ProfileDetails` está esperando una llamada asíncrona del API
Cuando varios componentes necesitan obtener datos, estos datos pueden llegar en un orden impredecible. Sin embargo, si envuelves estos elementos en un `SuspenseList`, React no mostrará un elemento de la lista hasta que todos los elementos anteriores se hayan mostrado (este comportamiente es ajustable).

`SuspenseList` lleva dos props:
* **revealOrder (forwards, backwards, together)** define el orden en el cual los hijos de `SuspenseList` deberían ser mostrados.
* `together` muestra *todos* ellos cuando estén listos en lugar de uno por uno.
* **tail (collapsed, hidden)** decide como los contenidos de respaldo en un `SuspenseList` son mostrados.
* Por defecto, `SuspenseList` va a mostrar todos los contenidos de respaldo en la lista.
* `collapsed` solo muestra el siguiente contenido de respaldo en la lista.
* `hidden` no muestra ningun contenido de respaldo.

- **revealOrder (forwards, backwards, together)** define el orden en el cual los hijos de `SuspenseList` deberían ser mostrados.
- `together` muestra _todos_ ellos cuando estén listos en lugar de uno por uno.
- **tail (collapsed, hidden)** decide como los contenidos de respaldo en un `SuspenseList` son mostrados.
- Por defecto, `SuspenseList` va a mostrar todos los contenidos de respaldo en la lista.
- `collapsed` solo muestra el siguiente contenido de respaldo en la lista.
- `hidden` no muestra ningun contenido de respaldo.

Tener en cuenta que `SuspenseList` solo funciona en los componentes `Suspense` y `SuspenseList` más cercanos debajo de él. No busca límites más profundos que un nivel. Sin embargo, es posible anidar múltiples componentes `SuspenseList` entre sí para construir grillas.

### `useTransition` {#usetransition}

```js
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
const SUSPENSE_CONFIG = {timeoutMs: 2000};

const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
```

`useTransition` permite a los componentes evitar estados de carga no deseada al esperar que se cargue el contenido antes de **transicionar hacia la siguiente pantalla**. También permite que los componentes difieran las actualizaciones de datos obtenidos más lentas hasta la siguiente renderización, de modo que se puedan presentar actualizaciones más cruciales de inmediato.

El hook `useTransition` retorna dos valores en un array.
* `startTransition` es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir.
* `isPending` es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine.

- `startTransition` es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir.
- `isPending` es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine.

**Si alguna actualización de estado causa que un componente se suspenda, esa actualización de estado debería estar envuelta en una transición.**

```js
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
const SUSPENSE_CONFIG = {timeoutMs: 2000};

function App() {
const [resource, setResource] = useState(initialResource);
Expand All @@ -130,11 +132,10 @@ function App() {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
});
}}
>
}}>
Next
</button>
{isPending ? " Loading..." : null}
{isPending ? ' Loading...' : null}
<Suspense fallback={<Spinner />}>
<ProfilePage resource={resource} />
</Suspense>
Expand All @@ -152,18 +153,17 @@ El booleano `isPending` le permite a React saber si nuestro componente está tra
#### Configuración de useTransition {#usetransition-config}

```js
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
const SUSPENSE_CONFIG = {timeoutMs: 2000};
```

`useTransition` acepta una **Configuración de suspenso opcional** con un `timeoutMs`. Este tiempo de espera (en milisegundos) le dice a React cuánto tiempo esperar antes de mostrar el siguiente estado (la nueva página de perfil en el ejemplo anterior).

**Nota: Recomendamos que compartas tu Configuración de suspenso entre diferentes módulos.**


### `useDeferredValue` {#usedeferredvalue}

```js
const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
const deferredValue = useDeferredValue(value, {timeoutMs: 2000});
```

Retorna una versión diferida del valor que puede "quedarse atrás" con un máximo de `timeoutMs`.
Expand All @@ -174,8 +174,8 @@ Un buen ejemplo de esto es una entrada de texto.

```js
function App() {
const [text, setText] = useState("hello");
const deferredText = useDeferredValue(text, { timeoutMs: 2000 });
const [text, setText] = useState('hello');
const deferredText = useDeferredValue(text, {timeoutMs: 2000});

return (
<div className="App">
Expand All @@ -186,7 +186,7 @@ function App() {
<MySlowList text={deferredText} />
</div>
);
}
}
```

Esto nos permite empezar a mostrar el nuevo texto para el `input` inmediatamente, lo que permite que la página se sienta responsiva. Mientras tanto, `MySlowList` "se queda atrás" por hasta 2 segundos de acuerdo con `timeoutMs` antes de actualizar, permitiendo renderizar con el texto actual en segundo plano.
Expand All @@ -196,7 +196,7 @@ Esto nos permite empezar a mostrar el nuevo texto para el `input` inmediatamente
#### Configuración de useDeferredValue {#usedeferredvalue-config}

```js
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
const SUSPENSE_CONFIG = {timeoutMs: 2000};
```

`useDeferredValue` acepta una **Configuración de suspenso opcional** con un `timeoutMs`. Este tiempo de espera (en milisegundos) le dice a React cuánto tiempo se puede retrasar el valor diferido.
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -307,8 +307,8 @@ export function Footer() {
<FooterLink href="/reference/react" isHeader={true}>
Referencia de la API
</FooterLink>
<FooterLink href="/reference/react">React APIs</FooterLink>
<FooterLink href="/reference/react-dom">React DOM APIs</FooterLink>
<FooterLink href="/reference/react">Las API React</FooterLink>
<FooterLink href="/reference/react-dom">Las API React DOM</FooterLink>
</div>
<div className="md:col-start-2 xl:col-start-4 flex flex-col">
<FooterLink href="/community" isHeader={true}>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Layout/HomeContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export function HomeContent() {
permite servir HTML bajo demanda mientras aún estás
cargando datos, rellenando progresivamente el contendido
faltante antes de que cargue ningún código de
JavaScript. En el cliente, React puede usar APIs web
JavaScript. En el cliente, React puede usar las API web
estándares para mantener tu interfaz de usuario
responsiva incluso en medio del renderizado.
</p>
Expand Down Expand Up @@ -392,10 +392,10 @@ export function HomeContent() {
<Link href="https://github.com/expo/expo">Expo</Link>{' '}
te permiten construir aplicaciones en React para
Android, iOS y aún más. Lucen y se sienten como
nativas porque sus UIs <i>son</i> realmente nativas.
No es una vista web: tus componentes de React
renderizan vistas reales de Android y iOS provistas
por la plataforma.
nativas porque sus UI <i>son</i> realmente nativas. No
es una vista web: tus componentes de React renderizan
vistas reales de Android y iOS provistas por la
plataforma.
</p>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/2021/06/08/the-plan-for-react-18.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Estas actualizaciones son principalmente apuntado a los mantenedores de otras bi

## ¿Qué hay de nuevo en React 18? {/*whats-coming-in-react-18*/}

Cuando se publique, React 18 incluirá mejoras listas para usar (como [procesamiento por lotes automático](https://github.com/reactwg/react-18/discussions/21)), nuevas APIs (como [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), y un [nuevo renderizad del lado del servidor con *streaming*](https://github.com/reactwg/react-18/discussions/37) integrado con `React.lazy`.
Cuando se publique, React 18 incluirá mejoras listas para usar (como [procesamiento por lotes automático](https://github.com/reactwg/react-18/discussions/21)), nuevas API (como [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), y un [nuevo renderizad del lado del servidor con *streaming*](https://github.com/reactwg/react-18/discussions/37) integrado con `React.lazy`.

Estas características son posibles gracias a un nuevo mecanismo de suscripción que estamos agregando en React 18. Se llama "renderizado concurrente" y permite a React preparar múltiples versiones de la interfaz de usuario al mismo tiempo. Este cambio se produce principalmente tras bambalinas, pero abre nuevas posibilidades para mejorar el rendimiento real y percibido de tu aplicación.

Expand Down
Loading
Loading