diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 3c1ba2788..5690af00b 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -984,13 +984,8 @@ export const places = [{ imageId: 'kxsph5C' }, { id: 5, -<<<<<<< HEAD name: 'Chefchaouen, Marruecos', description: 'Hay varias teorías sobre por qué las casas están pintadas de azul, entre ellas que el color repele a los mosquitos o que simboliza el cielo y el paraíso.', -======= - name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 imageId: 'rTqKo46' }, { id: 6, @@ -1128,13 +1123,8 @@ export const places = [{ imageId: 'kxsph5C' }, { id: 5, -<<<<<<< HEAD name: 'Chefchaouen, Marruecos', description: 'Hay varias teorías sobre por qué las casas están pintadas de azul, entre ellas que el color repele a los mosquitos o que simboliza el cielo y el paraíso.', -======= - name: 'Chefchaouen, Marocco', - description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 imageId: 'rTqKo46' }, { id: 6, diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 872a345c1..bf311527f 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -632,11 +632,7 @@ class Form extends Component { return ( <> -<<<<<<< HEAD -

Hola, {this.state.name}. -======= -

Hello, {this.state.name}.

->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 +

Hola, {this.state.name}.

); } diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md index d9b35a915..c7d219cb1 100644 --- a/src/content/reference/react/directives.md +++ b/src/content/reference/react/directives.md @@ -19,10 +19,5 @@ Las directivas proporcionan instrucciones para [bundlers compatibles con React S ## Directivas de código fuente {/*source-code-directives*/} -<<<<<<< HEAD -* [`'use client'`](/reference/react/use-client) marca los ficheros fuente cuyos componentes se ejecutan en el cliente. +* [`'use client'`](/reference/react/use-client) te permite marcar qué código se ejecuta en el cliente. * [`'use server'`](/reference/react/use-server) marca funciones del lado del servidor que pueden ser llamadas desde código del lado del cliente. -======= -* [`'use client'`](/reference/react/use-client) lets you mark what code runs on the client. -* [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 775b52045..05d521a2d 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,153 +1,14 @@ --- -<<<<<<< HEAD -title: "Hooks integrados de React" ---- - - - -Los *Hooks* te permiten usar diferentes funciones de React desde tus componentes. Puedes usar los Hooks integrados o combinarlos para construir tu propio Hook. Esta página lista todos los *Hooks integrados* en React. - -======= title: React Reference Overview --- This section provides detailed reference documentation for working with React. For an introduction to React, please visit the [Learn](/learn) section. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 Our The React reference documentation is broken down into functional subsections: -<<<<<<< HEAD -## Hooks de estado {/*state-hooks*/} - -El *estado* permite que un componente ["recuerde" información como la entrada de un usuario.](/learn/state-a-components-memory) Por ejemplo, un componente de formulario puede utilizar un estado para guardar la entrada del valor mientras que un componente de galería de imágenes puede utilizar un estado para guardar el índice de la imagen seleccionada. - -Para añadir un estado a un componente, usa uno de estos Hooks: - -* [`useState`](/reference/react/useState) declara una variable de estado que puedes actualizar directamente. -* [`useReducer`](/reference/react/useReducer) declara una variable de estado con la lógica de actualización dentro de una [función reductora.](/learn/extracting-state-logic-into-a-reducer) - -```js -function ImageGallery() { - const [index, setIndex] = useState(0); - // ... -``` - ---- - -## Hooks de contexto {/*context-hooks*/} - -El *contexto* permite a un componente [recibir información de padres lejanos sin pasarlas como props.](/learn/passing-props-to-a-component) Por ejemplo, el componente en el nivel superior de tu aplicación puede pasar el actual tema de la UI a todos los componentes dentro, sin importar la profundidad dentro del componente. - -* [`useContext`](/reference/react/useContext) lee y se subscribe a un contexto. - -```js -function Button() { - const theme = useContext(ThemeContext); - // ... -``` - ---- - -## Hooks de refs {/*ref-hooks*/} - -Las *refs* le permiten a un componente [mantener alguna información que no es utilizada para el renderizado](/learn/referencing-values-with-refs) como un nodo del DOM o el ID de un *timeout*. A diferencia del estado, actualizar una *ref* no vuelve a renderizar tu componente. Las *refs* son una "puerta de escape" del paradigma de React. Son útiles cuando necesitas trabajar con sistemas distintos de React, como las APIs integradas del navegador. - -* [`useRef`](/reference/react/useRef) declara una ref. Puede contener cualquier valor, pero la mayoría de las veces se utiliza para contener un nodo del DOM. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) permite personalizar la *ref* expuesta por tu componente. Esto rara vez se usa. - -```js -function Form() { - const inputRef = useRef(null); - // ... -``` - ---- - -## Hooks de Efecto {/*effect-hooks*/} - -El *Hook de Efecto* permite a un componente [conectarse y sincronizarse con sistemas externos.](/learn/synchronizing-with-effects) Esto incluye lidiar con la red, el DOM del navegador, animaciones, *widgets* escritos utilizando una biblioteca de UI diferente y otro código que no es de React. - -* [`useEffect`](/reference/react/useEffect) conecta un componente a un sistema externo. - -```js -function ChatRoom({ roomId }) { - useEffect(() => { - const connection = createConnection(roomId); - connection.connect(); - return () => connection.disconnect(); - }, [roomId]); - // ... -``` - -Los *Hooks de Efecto* son una "puerta de escape" del paradigma de React. No utilices los *Efectos* para guiar el flujo de los datos de tu aplicación. Si no estás interactuando con un sistema externo, [puede que no necesites un Hook de Efecto.](/learn/you-might-not-need-an-effect) - -Hay dos variaciones poco usadas de `useEffect` con diferencias en los tiempos en que se llaman: - -* [`useLayoutEffect`](/reference/react/useLayoutEffect) se activa antes de que el navegador vuelva a pintar la pantalla. Aquí puedes hacer cálculos de maquetación (*layout*). -* [`useInsertionEffect`](/reference/react/useInsertionEffect) se activa antes de que React haga cambios en el DOM. Aquí las bibliotecas pueden insertar CSS dinámico. - ---- - -## Hooks de rendimiento {/*performance-hooks*/} - -Una forma común de optimizar el rendimiento del rerenderizado es evitar trabajo innecesario. Por ejemplo, puedes decirle a React que reutilice un cálculo guardado en caché o que se salte un rerenderizado si los datos no han cambiado desde el renderizado anterior. - -Para evitar cálculos y renderizados innecesarios, usa uno de estos Hooks: - -- [`useMemo`](/reference/react/useMemo) permite guardar en caché los resultados de un cálculo costoso. -- [`useCallback`](/reference/react/useCallback) permite guardar en caché una función definida antes de pasarla a un componente optimizado. - -```js -function TodoList({ todos, tab, theme }) { - const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); - // ... -} -``` - -Algunas veces no podrás evitar un rerenderizado porque la pantalla realmente necesita una actualización. En ese caso, puedes mejorar el rendimiento separando las actualizaciones bloqueantes que deben ser síncronas (como al escribir dentro de una entrada de texto) de las actualizaciones no bloqueantes, que no necesitan bloquear la interfaz de usuario (como actualizar un gráfico). - -Para priorizar el renderizado, usa uno de estos Hooks: - -- [`useTransition`](/reference/react/useTransition) permite marcar una transición de estado como no bloqueante y permitir que otras actualizaciones la interrumpan. -- [`useDeferredValue`](/reference/react/useDeferredValue) te permite aplazar la actualización de una parte no crítica de la interfaz de usuario y dejar que otras partes se actualicen primero. - ---- - -## Hooks de recursos {/*resource-hooks*/} - -Un componente puede acceder a *recursos* sin tenerlos como parte de su estado. Por ejemplo, un componente puede leer un mensaje de una Promesa o leer información de estilo de un contexto. - -Para leer un valor de un recurso, utilice este Hook: - -- [`use`](/reference/react/use) te permite leer el valor de un recurso como una [Promesa](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise) o [contexto](/learn/passing-data-deeply-with-context). - -```js -function MessageComponent({ messagePromise }) { - const message = use(messagePromise); - const theme = use(ThemeContext); - // ... -} -``` - ---- - -## Otros Hooks {/*other-hooks*/} - -Estos Hooks son mayormente útiles para autores de bibliotecas y no son comúnmente usadas en el código de la aplicación. - -- [`useDebugValue`](/reference/react/useDebugValue) permite personalizar la etiqueta que las Herramientas de Desarrollo de React muestran para tu Hook personalizado. -- [`useId`](/reference/react/useId) permite que un componente se asocie un ID único. Normalmente, se utiliza con las APIs de accesibilidad. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permite que un componente se subscriba a un almacenamiento (*store*) externo. - ---- - -## Tus propios Hooks {/*your-own-hooks*/} - -También puedes [definir tus propios Hooks personalizados](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) como funciones JavaScript. -======= ## React {/*react*/} Programmatic React features: * [Hooks](/reference/react/hooks) - Use different React features from your components. @@ -167,4 +28,3 @@ React-dom contains features that are only supported for web applications ## Legacy APIs {/*legacy-apis*/} * [Legacy APIs](/reference/react/legacy) - Exported from the react package, but not recommended for use in newly written code. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index 3bff2ae80..4a93bddb4 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -12,11 +12,7 @@ canary: true -<<<<<<< HEAD -`'use client'` marca los archivos fuente cuyos componentes se ejecutan en el cliente. -======= -`'use client'` lets you mark what code runs on the client. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 +`'use client'` te permite marcar qué código se ejecuta en el cliente. @@ -28,9 +24,6 @@ canary: true ### `'use client'` {/*use-client*/} -<<<<<<< HEAD -Agrega `'use client';` en la parte superior de un archivo para marcar que este archivo (incluyendo cualquier componente hijo que utilice) se ejecuta en el cliente, independientemente de dónde se importe. -======= Add `'use client'` at the top of a file to mark the module and its transitive dependencies as client code. ```js {1} @@ -181,7 +174,6 @@ By the above definitions, the component `FancyText` is both a Server and Client First, let's clarify that the term "component" is not very precise. Here are just two ways "component" can be understood: 1. A "component" can refer to a **component definition**. In most cases this will be a function. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 ```js // This is a definition of a component @@ -313,31 +305,6 @@ export default function Counter({initialValue = 0}) { } ``` -<<<<<<< HEAD -Cuando un archivo marcado con `'use client'` es importado desde un componente de servidor, los [bundlers compatibles](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) manejan la importación como el "punto de corte" entre el código exclusivo del servidor y el código del cliente. Los componentes en o por debajo de este punto en el gráfico del módulo pueden utilizar características exclusivas de React para el cliente, como [`useState`](/reference/react/useState). - -#### Advertencias {/*caveats*/} - -* No es necesario añadir `'use client'` a cada archivo que utiliza características exclusivas de React para el cliente, sólo los archivos que son importados desde archivos de componentes de servidor. `'use client'` marca la _barrera_ entre el código exclusivo del servidor y el código del cliente; cualquier componente más abajo en el árbol se ejecutará automáticamente en el cliente. Para ser renderizados desde componentes de servidor, los componentes exportados desde archivos con `'use client'` deben tener props serializables. -* Cuando se importa un archivo con `'use client'` desde un archivo de servidor, los valores importados pueden ser renderizados como un componente de React o o pasados mediante props a un componete del cliente. Cualqueir otro uso lanzará una excepción. -* Cuando se importa un archivo con `'use client'` desde otro archivo del cliente, la directiva no tiene efecto. Esto te permite escribir componentes exclusivos del cliente que pueden ser utilizados simultáneamente desde componentes del servidor y del cliente. -* Todo el código en un archivo `'use client'`, así como cualquier módulo que importe (directa o indirectamente), formará parte del gráfico de módulos del cliente y debe ser enviado y ejecutado por el cliente para ser renderizado en el navegador. Para reducir el tamaño del paquete del cliente y aprovechar al máximo el servidor, mueve el estado (y las directivas `'use client'`) más abajo en el árbol cuando sea posible y pasa los componetes del servidor renderizados [como hijos](/learn/passing-props-to-a-component#passing-jsx-as-children) a los componentes del cliente. -* Debido a que las props se serializan a través de la barrera servidor-cliente, ten en cuenta que la colocación de estas directivas puede afectar a la cantidad de datos enviados al cliente; evita estructuras de datos más grandes de lo necesario. -* Componentes como `` que no utilizan características exclusivas ni del servidor ni del cliente, generalmente no deben ser marcados con `'use client'`. De esta manera, pueden renderizarse exclusivamente en el servidor cuando se utilizan desde un componente de servidor y se agregarán al paquete del cliente cuando se utilicen desde un componente del cliente. -* Las bibliotecas publicadas en npm deben incluir `'use client'` en los componentes de React exportados que puedan renderizarse con props serializables y que utilicen características exclusivas de React para el cliente, para permitir que esos componentes sean importados y renderizados por componentes de servidor. De lo contrario, los usuarios deberán envolver los componentes de la biblioteca en sus propios archivos con `'use client'`, lo que puede ser incómodo y evitar que la biblioteca mueva la lógica al servidor en un futuro. Al publicar archivos precompilados a npm, asegúrate de que los archivos fuente con `'use client'` terminen en un paquete marcado con `'use client'`, separado de cualquier paquete que contenga exportaciones que se puedan utilizar directamente en el servidor. -* Los componentes del cliente seguirán ejecutándose como parte del renderizado del lado del servidor (SSR) o en la generación de sitios estáticos en tiempo de compilación (SSG), que actúan como clientes para transformar la salida de renderización inicial de los componentes de React en HTML la cuál se puede renderizar antes de que se descarguen los paquetes de javascript. Pero, no pueden utilizar características exclusivas del servidor, como la lectura directa desde una base de datos. -* Las directivas como `'use client'` deben estar al comienzo del archivo, antes que cualquier importación u otro código (los comentarios arriba de las directivas están permitidos). Deben escribirse con comillas simples o dobles, no con comillas invertidas. (El formato de la directiva `'use xyz'` se asemeja un poco a la convención de nombres `useXyz()` de los Hooks, pero la similitud es coincidencia.) - -## Uso {/*usage*/} - - -Esta sección es un trabajo en progreso. - -Esta API puede ser utilizada en cualquier framework que soporte React Server Components. Puede encontrar documentación adicional desde ellos. -* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials) -* Más próximamente - -======= As `Counter` requires both the `useState` hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top. @@ -410,4 +377,3 @@ These libraries may rely on component Hooks or client APIs. Third-party componen If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it. [TODO]: <> (Troubleshooting - need use-cases) ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index 04f5427ed..094316e16 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -24,11 +24,7 @@ canary: true ### `'use server'` {/*use-server*/} -<<<<<<< HEAD -Añade `'use server';` en la parte superior de una función asíncrona para marcar que la función puede ser ejecutada por el cliente. -======= Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _server actions_. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 ```js {2} async function addToCart(data) { @@ -37,18 +33,6 @@ async function addToCart(data) { } ``` -<<<<<<< HEAD -Esta función puede ser pasada al cliente. Cuando es llamada en el cliente, hará una petición de red al servidor que incluye una copia serializada de cualquier argumento pasado. Si la función del servidor devuelve un valor, ese valor será serializado y devuelto al cliente. - -Alternativamente, añade `'use server'` en la parte superior de un archivo para marcar todas las exportaciones dentro de ese archivo como funciones asíncronas del servidor que pueden ser usadas en cualquier lugar, incluso importadas en los archivos de componentes de cliente. - -#### Advertencias {/*caveats*/} - -* Recuerda que los parámetros de las funciones marcadas con `'use server'` están totalmente controlados por el cliente. Por seguridad, trátalos siempre como entradas no confiables, asegurándote de validar y escapar los argumentos como sea apropiado. -* Para evitar la confusión que podría resultar de mezclar código del lado del cliente y del lado del servidor en el mismo archivo, `'use server'` sólo puede usarse en archivos del lado del servidor; las funciones resultantes pueden pasarse a componentes del cliente a través de _props_. -* Dado que las llamadas de red subyacentes son siempre asíncronas, `'use server'` sólo puede usarse en funciones asíncronas. -* Directivas como `'use server'` deben estar al principio de tu función o archivo, por encima de cualquier otro código incluyendo importaciones (los comentarios sobre las directivas están bien). Deben escribirse con comillas simples o dobles, no con comillas invertidas. (El formato de la directiva `'use xyz'` se parece un poco a la convención de nomenclatura del Hook `useXyz()`, pero el parecido es coincidencia). -======= When calling a server action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server action returns a value, that value will be serialized and returned to the client. Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as server actions that can be used anywhere, including imported in client code. @@ -112,19 +96,9 @@ Notably, these are not supported: Supported serializable return values are the same as [serializable props](/reference/react/use-client#passing-props-from-server-to-client-components) for a boundary Client Component. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04 ## Uso {/*usage*/} -<<<<<<< HEAD - -Esta sección es un trabajo en progreso. - -Esta API puede ser utilizada en cualquier framework que soporte React Server Components. Puede encontrar documentación adicional desde ellos. -* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials) -* Más próximamente - -======= ### Server actions in forms {/*server-actions-in-forms*/} The most common use case of server actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for server actions in [forms](/reference/react-dom/components/form). @@ -238,4 +212,3 @@ export default async incrementLike() { ``` To read a server action return value, you'll need to `await` the promise returned. ->>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04