![](\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/539px-React-icon.svg.png\"){kind=icon}
\r\n Contenido de la tarjeta
\r\nContenido de la tarjeta
`.\r\n\r\nConocer y saber usar la prop `children` es muy importante para crear componentes reutilizables en React.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué diferencia hay entre props y state?\r\n\r\nLas _props_ son un objeto que **se pasan como argumentos de un componente padre a un componente hijo**. Son inmutables y no se pueden modificar desde el componente hijo.\r\n\r\nEl _state_ es un valor que **se define dentro de un componente**. Su valor es inmutable (no se puede modificar directamente) pero se puede establecer un valor nuevo del estado para que React vuelva a renderizar el componente.\r\n\r\nAsí que mientras tanto _props_ como _state_ afectan al renderizado del componente, su gestión es diferente.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Se puede inicializar un estado con el valor de una prop? ¿Qué pasa si lo haces y qué hay que tener en cuenta?\r\n\r\nSí, se puede inicializar el estado con el valor de una prop. Pero hay que tener en cuenta que, si la prop cambia, el estado no se actualizará automáticamente. Esto es porque el estado se inicializa una vez, cuando el componente se monta por primera vez.\r\n\r\nPor ejemplo, con componentes funcionales:\r\n\r\n```jsx\r\nconst Counter = () => {\r\n const [count, setCount] = useState(0);\r\n\r\n return (\r\n{number}
;\r\n};\r\n```\r\n\r\nEn este caso, el componente `Count` inicializa su estado con el valor de la prop `count`. Pero si cambia el valor de la prop `count`, el estado no se actualizará automáticamente. Por lo que al hacer click, siempre veremos el número 0 en pantalla.\r\n\r\n- [Código de ejemplo](https://stackblitz.com/edit/react-ts-cdf8n9?file=App.tsx)\r\n\r\nEn este ejemplo, lo mejor sería simplemente usar la prop `count` en el componente `Count` y así siempre se volvería a renderizar.\r\n\r\n**Es una buena práctica evitar al máximo los estados de nuestros componentes y, siempre que se pueda, simplemente calcular el valor a mostrar a partir de las props.**\r\n\r\nEn el caso que necesites inicializar un estado con una prop, es una buena práctica añadir el prefijo de `initial` a la prop para indicar que es el valor inicial del estado y que luego no lo usaremos más:\r\n\r\n```jsx\r\nconst Input = ({ initialValue }) => {\r\n const [value, setValue] = useState(initialValue);\r\n\r\n return setValue(e.target.value)} />;\r\n};\r\n```\r\n\r\nEs un error muy común pensar que la prop actualizará el estado, así que tenlo en cuenta.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué es el renderizado condicional en React?\r\n\r\nEl renderizado condicional es la forma de mostrar un componente u otro dependiendo de una condición.\r\n\r\nPara hacer renderizado condicional en React usamos el operador ternario:\r\n\r\n```jsx\r\nfunction Button({ text }) {\r\n return text ? : null;\r\n}\r\n```\r\n\r\nEn este caso, si la prop `text` existe, se renderiza el botón. Si no existe, no se renderiza nada.\r\n\r\nEs común encontrar implementaciones del renderizado condicional con el operador `&&`, del tipo:\r\n\r\n```jsx\r\nfunction List({ listArray }) {\r\n return listArray?.length && listArray.map((item) => item);\r\n}\r\n```\r\n\r\nParece que tiene sentido... si el `length` es positivo (mayor a cero) pintamos el map. !Pues no! ❌ Cuidado, si tiene `length` de cero ya que se pintará en el navegador un 0.\r\n\r\nEs preferible utilizar el operador ternario. _Kent C. Dodds_ tiene un artículo interesante hablando del tema. [Use ternaries rather than && in JSX](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx)\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Cómo puedes aplicar clases CSS a un componente en React y por qué no se puede usar `class`?\r\n\r\nPara aplicar clases CSS a un componente en React usamos la prop `className`:\r\n\r\n```jsx\r\nfunction Button({ text }) {\r\n return ;\r\n}\r\n```\r\n\r\nLa razón por la que se llama `className` es porque `class` es una palabra reservada en JavaScript. Por eso, en JSX, tenemos que usar `className` para aplicar clases CSS.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Cómo puedes aplicar estilos en línea a un componente en React?\r\n\r\nPara aplicar estilos CSS en línea a un componente en React usamos la prop `style`. La diferencia de cómo lo haríamos con HTML, es que en React los estilos se pasan como un objeto y no como una cadena de texto (esto puede verse más claro con los dobles corchetes, los primeros para indicar que es una expresión JavaScript, y los segundos para crear el objeto):\r\n\r\n```jsx\r\nfunction Button({ text }) {\r\n return ;\r\n}\r\n```\r\n\r\nFíjate que, además, los nombres de las propiedades CSS están en camelCase.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Cómo puedo aplicar estilos de forma condicional a un componente en React?\r\n\r\nPuedes aplicar estilos de forma condicional a un componente en React usando la prop `style` y un operador ternario:\r\n\r\n```jsx\r\nfunction Button({ text, primary }) {\r\n return ;\r\n}\r\n```\r\n\r\nEn el caso anterior, si la prop `primary` es `true`, el botón tendrá el color rojo. Si no, tendrá el color azul.\r\n\r\nTambién puedes seguir la misma mecánica usando clases. En este caso, usamos el operador ternario para decidir si añadir o no la clase:\r\n\r\n```jsx\r\nfunction Button({ text, primary }) {\r\n return ;\r\n}\r\n```\r\n\r\nTambién podemos usar bibliotecas como `classnames`:\r\n\r\n```jsx\r\nimport classnames from \"classnames\";\r\n\r\nfunction Button({ text, primary }) {\r\n return ;\r\n}\r\n```\r\n\r\nEn este caso, si la prop `primary` es `true`, se añadirá la clase `primary` al botón. Si no, no se añadirá. En cambio la clase `button` siempre se añadirá.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué es el renderizado de listas en React?\r\n\r\nEl renderizado de listas es la forma de iterar un array de elementos y renderizar elementos de React para cada uno de ellos.\r\n\r\nPara hacer renderizado de listas en React usamos el método `map` de los arrays:\r\n\r\n```jsx\r\nfunction List({ items }) {\r\n return (\r\nContador: {count}
\r\n \r\nContador: {this.state.count}
\r\n \r\nContador: {count}
\r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué significa la expresión \"subir el estado\"?\r\n\r\nCuando varios componentes necesitan compartir los mismos datos de un estado, entonces se recomienda elevar ese estado compartido hasta su ancestro común más cercano.\r\n\r\nDicho de otra forma. Si dos componentes hijos comparten los mismos datos de su padre, entonces mueve el estado al padre en lugar de mantener un estado local en sus hijos.\r\n\r\nPara entenderlo, lo mejor es que lo veamos con un ejemplo. Imagina que tenemos una lista de regalos deseados y queremos poder añadir regalos y mostrar el total de regalos que hay en la lista.\r\n\r\n```jsx\r\nimport { useState } from \"react\";\r\n\r\nexport default function App() {\r\n return (\r\n <>\r\n{totalGifts}
\r\n \r\n );\r\n}\r\n```\r\n\r\n¿Qué pasa si queremos que el total de regalos se actualice cada vez que añadimos un regalo? Como podemos ver, no es posible porque el estado de `totalGifts` está en el componente `TotalGifts` y no en el componente `GiftList`. Y como no podemos acceder al estado de `GiftList` desde `TotalGifts`, no podemos actualizar el estado de `totalGifts` cuando añadimos un regalo.\r\n\r\nTenemos que subir el estado de `gifts` al componente padre `App` y le pasaremos el número de regalos como prop al componente `TotalGifts`.\r\n\r\n```jsx\r\nimport { useState } from \"react\";\r\n\r\nexport default function App() {\r\n const [gifts, setGifts] = useState([]);\r\n\r\n const addGift = () => {\r\n const newGift = prompt(\"¿Qué regalo quieres añadir?\");\r\n setGifts([...gifts, newGift]);\r\n };\r\n\r\n return (\r\n <>\r\n{totalGifts}
\r\n \r\n );\r\n}\r\n```\r\n\r\nCon esto, lo que hemos hecho es _elevar el estado_. Lo hemos movido desde el componente `GiftList` al componente `App`. Ahora pasamos como prop los regalos al componente `GiftList` y una forma de actualizar el estado, y también hemos pasado como prop al componente `TotalGifts` el número de regalos.\r\n\r\n- [Código de ejemplo](https://stackblitz.com/edit/react-ts-qitkys?file=App.tsx)\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué hace el hook `useEffect`?\r\n\r\nEl hook `useEffect` se usa para ejecutar código cuando se renderiza el componente o cuando cambian las dependencias del efecto.\r\n\r\nRecibe dos parámetros:\r\n\r\n- La función que se ejecutará al cambiar las dependencias o al renderizar el componente.\r\n- Un array de dependencias. Si cambia el valor de alguna dependencia, ejecutará la función.\r\n\r\nEn este ejemplo mostramos un mensaje en consola cuando carga el componente y cada vez que cambia el valor de `count`:\r\n\r\n```jsx\r\nimport { useEffect, useState } from \"react\";\r\n\r\nfunction Counter() {\r\n const [count, setCount] = useState(0);\r\n\r\n useEffect(() => {\r\n console.log(\"El contador se ha actualizado\");\r\n }, [count]);\r\n\r\n return (\r\n <>\r\nContador: {count}
\r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### Explica casos de uso del hook `useEffect`\r\n\r\nPodemos usar el hook `useEffect` de diferentes formas, tales como:\r\n\r\n- Ejecutar código cuando se renderiza el componente, cuando cambian las dependencias del efecto o cuando se desmonta el componente.\r\n- Por eso puede ser útil para hacer llamadas a APIs, ya que sea nada más montar el componente o cuando cambian las dependencias.\r\n- Realizar tracking de eventos, como Google Analytics, para saber qué páginas visitan los usuarios.\r\n- Podemos validar un formulario para que cada vez que cambie el estado, podamos actualizar la UI y mostrar dónde están los errores.\r\n- Podemos suscribirnos a eventos del navegador, como por ejemplo el evento `resize` para saber cuando el usuario cambia el tamaño de la ventana.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### Cómo suscribirse a un evento en `useEffect`\r\n\r\nDentro de `useEffect` nos podemos suscribir a eventos del navegador, como el evento `resize` para saber cuando el usuario cambia el tamaño de la ventana. Es importante que nos desuscribamos cuando el componente se desmonte para evitar fugas de memoria. Para ello, tenemos que devolver una función dentro del `useEffect` que se ejecutará cuando el componente se desmonte.\r\n\r\n```jsx\r\nimport { useEffect } from \"react\";\r\n\r\nfunction Window() {\r\n useEffect(() => {\r\n const handleResize = () => {\r\n console.log(\"La ventana se ha redimensionado\");\r\n };\r\n\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }, []);\r\n\r\n returnAbre la consola y redimensiona la ventana
;\r\n}\r\n```\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué hace el hook `useId`?\r\n\r\n`useId` es un hook para generar identificadores únicos que se pueden pasar a los atributos de las etiquetas HTML y es especialmente útil para accesibilidad.\r\n\r\nLlama `useId` en el nivel superior del componente para generar una ID única:\r\n\r\n```jsx\r\nimport { useId } from 'react'\r\nfunction PasswordField() {\r\n const passwordHintId = useId()\r\n // ...\r\n```\r\n\r\nA continuación, pasa el ID generado a diferentes atributos:\r\n\r\n```jsx\r\n<>\r\n \r\n\r\n\r\n```\r\n\r\nLa etiqueta `aria-describedby` te permite especificar que dos etiquetas están relacionadas entre sí, puede generar una identificación única con useId donde incluso si `PasswordField` aparece varias veces en la pantalla, las identificaciones generadas no chocarán.\r\n\r\nEl ejemplo completo sería así:\r\n\r\n```jsx\r\nimport { useId } from \"react\";\r\n\r\nfunction PasswordField() {\r\n const passwordHintId = useId();\r\n\r\n return (\r\n <>\r\n \r\n
\r\n El password debe ser de 18 letras y contener caracteres especiales\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default function App() {\r\n return (\r\n <>\r\nAbre la consola y re-dimensiona la ventana
;\r\n}\r\n```\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué son los Fragments en React?\r\n\r\nLos _Fragments_ son una forma de agrupar elementos sin añadir un elemento extra al DOM, ya que React no permite devolver varios elementos en un componente, solo un elemento raíz.\r\n\r\nPara crear un Fragment en React usamos el componente `Fragment`:\r\n\r\n```jsx\r\nimport { Fragment } from \"react\";\r\n\r\nfunction App() {\r\n return (\r\nPárrafo
\r\nPárrafo
\r\n \r\n );\r\n}\r\n```\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Por qué es recomendable usar Fragment en vez de un div?\r\n\r\nLas razones por las que es recomendable usar Fragment en vez de un `div` a la hora de envolver varios elementos son:\r\n\r\n- Los `div` añaden un elemento extra al DOM, mientras que los Fragments no. Esto hace que el número de elementos HTML y la profundidad del DOM sea menor.\r\n- Los elementos envueltos con Fragment son afectados directamente por las propiedades _flex_ o _grid_ de CSS de su elemento padre. Si usas un `div` es posible que tengas problemas con el alineamiento de los elementos.\r\n- Los Fragments son más rápidos que los `div` ya que no tienen que ser renderizados.\r\n- Los `div` aplican CSS por defecto (hace que lo que envuelve el `div` se comporte como un bloque al aplicar un `display: block`) mientras que los Fragment no aplican ningún estilo por defecto.\r\n\r\n**[⬆ Volver a índice](#índice)**\r\n\r\n---\r\n\r\n#### ¿Qué es el Compound Components Pattern?\r\n\r\nEs un patrón de diseño de componentes que se basa en crear un componente padre con un solo objetivo, proporcionarle a sus hijos las propiedades necesarias para que se rendericen sin problemas.\r\n\r\nPermite una estructura declarativa a la hora de construir nuevos componentes, además ayuda a la lectura del código por su simplicidad y limpieza.\r\n\r\nUn ejemplo de este diseño sería una lista que renderiza los elementos hijos:\r\n\r\n```jsx\r\n