[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71214":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},71214,"preguntas-entrevista-react","midudev\u002Fpreguntas-entrevista-react","midudev","Preguntas típicas sobre React para entrevistas de trabajo ⚛️","https:\u002F\u002Freactjs.wiki",null,"JavaScript",7782,748,85,1,0,5,17,39.62,"MIT License",false,"main",[24,25,26,27,28,29,30],"hacktoberfest","javascript","react","react-entrevista-tecnica","react-native","react-prueba-tecnica","reactjs","2026-06-12 02:02:49","\u003Cdiv align='center'>\n  \u003Cimg height=\"60\" src=\"https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Fthumb\u002Fa\u002Fa7\u002FReact-icon.svg\u002F539px-React-icon.svg.png\">\n  \u003Ch1>Preguntas de entrevista para React\u003C\u002Fh1>\n\n\u003Ci>De cero a experto. Con respuestas detalladas en Español 🇪🇸\u003C\u002Fi>\n\n\u003Csup>Deja tu :star: si te gusta el proyecto.\u003C\u002Fsup>\n\n\u003Cstrong>Streams\u003C\u002Fstrong> de programación en Twitch: [twitch.tv\u002Fmidudev](https:\u002F\u002Ftwitch.tv\u002Fmidudev)\u003Cbr \u002F>\n\u003Cstrong>Comunidad\u003C\u002Fstrong> de desarrollo en Discord: [discord.gg\u002Fmidudev](https:\u002F\u002Fdiscord.gg\u002Fmidudev)\n\n\u003C\u002Fdiv>\n\n---\n\n## Índice\n\n- [Índice](#índice)\n  - [Principiante](#principiante)\n    - [¿Qué es React?](#qué-es-react)\n    - [¿Cuáles son las características principales de React?](#cuáles-son-las-características-principales-de-react)\n    - [¿Qué significa exactamente que sea declarativo?](#qué-significa-exactamente-que-sea-declarativo)\n    - [¿Qué es un componente?](#qué-es-un-componente)\n    - [¿Qué es JSX?](#qué-es-jsx)\n    - [¿Cómo se transforma el JSX?](#cómo-se-transforma-el-jsx)\n    - [¿Cuál es la diferencia entre componente y elemento en React?](#cuál-es-la-diferencia-entre-componente-y-elemento-en-react)\n    - [¿Cómo crear un componente en React?](#cómo-crear-un-componente-en-react)\n    - [¿Qué son las props en React?](#qué-son-las-props-en-react)\n    - [¿Qué es y para qué sirve la prop `children` en React?](#qué-es-y-para-qué-sirve-la-prop-children-en-react)\n    - [ ¿Qué diferencia hay entre props y state?](#qué-diferencia-hay-entre-props-y-state)\n    - [¿Se puede inicializar un estado con el valor de una prop? ¿Qué pasa si lo haces y qué hay que tener en cuenta?](#se-puede-inicializar-un-estado-con-el-valor-de-una-prop-qué-pasa-si-lo-haces-y-qué-hay-que-tener-en-cuenta)\n    - [¿Qué es el renderizado condicional en React?](#qué-es-el-renderizado-condicional-en-react)\n    - [¿Cómo puedes aplicar clases CSS a un componente en React y por qué no se puede usar `class`?](#cómo-puedes-aplicar-clases-css-a-un-componente-en-react-y-por-qué-no-se-puede-usar-class)\n    - [¿Cómo puedes aplicar estilos en línea a un componente en React?](#cómo-puedes-aplicar-estilos-en-línea-a-un-componente-en-react)\n    - [¿Cómo puedo aplicar estilos de forma condicional a un componente en React?](#cómo-puedo-aplicar-estilos-de-forma-condicional-a-un-componente-en-react)\n    - [¿Qué es el renderizado de listas en React?](#qué-es-el-renderizado-de-listas-en-react)\n    - [¿Cómo puedes escribir comentarios en React?](#cómo-puedes-escribir-comentarios-en-react)\n    - [¿Cómo añadir un evento a un componente en React?](#cómo-añadir-un-evento-a-un-componente-en-react)\n    - [¿Cómo puedo pasar un parámetro a una función que maneja un evento en React?](#cómo-puedo-pasar-un-parámetro-a-una-función-que-maneja-un-evento-en-react)\n    - [¿Qué es el estado en React?](#qué-es-el-estado-en-react)\n    - [¿Qué son los hooks?](#qué-son-los-hooks)\n    - [¿Qué hace el hook `useState`?](#qué-hace-el-hook-usestate)\n    - [¿Qué hace el hook `useReducer`?](#qué-hace-el-hook-usereducer)\n    - [¿Qué significa la expresión \"subir el estado\"?](#qué-significa-la-expresión-subir-el-estado)\n    - [¿Qué hace el hook `useEffect`?](#qué-hace-el-hook-useeffect)\n    - [Explica casos de uso del hook `useEffect`](#explica-casos-de-uso-del-hook-useeffect)\n    - [Cómo suscribirse a un evento en `useEffect`](#cómo-suscribirse-a-un-evento-en-useeffect)\n    - [¿Qué hace el hook `useId`?](#qué-hace-el-hook-useid)\n    - [¿Cómo podemos ejecutar código cuando el componente se monta?](#cómo-podemos-ejecutar-código-cuando-el-componente-se-monta)\n    - [¿Qué son los Fragments en React?](#qué-son-los-fragments-en-react)\n    - [¿Por qué es recomendable usar Fragment en vez de un div?](#por-qué-es-recomendable-usar-fragment-en-vez-de-un-div)\n    - [¿Qué es el Compound Components Pattern?](#qué-es-el-compound-components-pattern)\n    - [¿Cómo puedes inicializar un proyecto de React desde cero?](#cómo-puedes-inicializar-un-proyecto-de-react-desde-cero)\n    - [¿Qué es React DOM?](#qué-es-react-dom)\n    - [¿Qué JavaScript necesito para aprender React?](#qué-javascript-necesito-para-aprender-react)\n      - [JavaScript que necesitas para aprender React](#javascript-que-necesitas-para-aprender-react)\n      - [EcmaScript Modules o ESModules](#ecmascript-modules-o-esmodules)\n      - [Operador condicional (ternario)](#operador-condicional-ternario)\n      - [Funciones flecha o Arrow Functions](#funciones-flecha-o-arrow-functions)\n      - [Parámetros predeterminados (default values)](#parámetros-predeterminados-default-values)\n      - [Template Literals](#template-literals)\n      - [Propiedades abreviadas](#propiedades-abreviadas)\n      - [La desestructuración](#la-desestructuración)\n      - [Métodos de Array](#métodos-de-array)\n      - [Sintaxis Spread](#sintaxis-spread)\n      - [Operador Rest](#operador-rest)\n      - [Encadenamiento opcional (Optional Chaining)](#encadenamiento-opcional-optional-chaining)\n  - [Intermedio](#intermedio)\n    - [¿Cómo crear un hook personalizado (_custom hook_)?](#cómo-crear-un-hook-personalizado-custom-hook)\n    - [¿Cuántos `useEffect` puede tener un componente?](#cuántos-useeffect-puede-tener-un-componente)\n    - [¿Cómo podemos ejecutar código cuando el componente se desmonta del árbol?](#cómo-podemos-ejecutar-código-cuando-el-componente-se-desmonta-del-árbol)\n    - [Cómo puedes cancelar una petición a una API en `useEffect` correctamente](#cómo-puedes-cancelar-una-petición-a-una-api-en-useeffect-correctamente)\n    - [¿Cuáles son las reglas de los hooks en React?](#cuáles-son-las-reglas-de-los-hooks-en-react)\n    - [¿Qué diferencia hay entre `useEffect` y `useLayoutEffect`?](#qué-diferencia-hay-entre-useeffect-y-uselayouteffect)\n    - [¿Qué son mejores los componentes de clase o los componentes funcionales?](#qué-son-mejores-los-componentes-de-clase-o-los-componentes-funcionales)\n    - [¿Cómo mantener los componentes puros y qué ventajas tiene?](#cómo-mantener-los-componentes-puros-y-qué-ventajas-tiene)\n    - [¿Qué es la hidratación (hydration) en React?](#qué-es-la-hidratación-hydration-en-react)\n    - [¿Qué es el Server Side Rendering y qué ventajas tiene?](#qué-es-el-server-side-rendering-y-qué-ventajas-tiene)\n    - [¿Cómo puedes crear un Server Side Rendering con React desde cero?](#cómo-puedes-crear-un-server-side-rendering-con-react-desde-cero)\n    - [¿Puedes poner un ejemplo de efectos colaterales en React?](#puedes-poner-un-ejemplo-de-efectos-colaterales-en-react)\n    - [¿Qué diferencia hay entre componentes controlados y no controlados? ¿Qué ventajas y desventajas tienen?](#qué-diferencia-hay-entre-componentes-controlados-y-no-controlados-qué-ventajas-y-desventajas-tienen)\n    - [¿Qué son los High Order Components (HOC)?](#qué-son-los-high-order-components-hoc)\n    - [¿Qué son las render props?](#qué-son-las-render-props)\n    - [¿Por qué no podemos usar un `if` en el renderizado de un componente?](#por-qué-no-podemos-usar-un-if-en-el-renderizado-de-un-componente)\n    - [¿Por qué debemos utilizar una función para actualizar el estado de React?](#por-qué-debemos-utilizar-una-función-para-actualizar-el-estado-de-react)\n    - [¿Qué es el ciclo de vida de un componente en React?](#qué-es-el-ciclo-de-vida-de-un-componente-en-react)\n    - [¿Por qué puede ser mala práctica usar el `index` como key en un listado de React?](#por-qué-puede-ser-mala-práctica-usar-el-index-como-key-en-un-listado-de-react)\n    - [¿Para qué sirve el hook `useMemo`?](#para-qué-sirve-el-hook-usememo)\n    - [¿Es buena idea usar siempre `useMemo` para optimizar nuestros componentes?](#es-buena-idea-usar-siempre-usememo-para-optimizar-nuestros-componentes)\n    - [¿Para qué sirve el hook `useCallback`?](#para-qué-sirve-el-hook-usecallback)\n    - [¿Es buena idea usar siempre `useCallback` para optimizar nuestros componentes?](#es-buena-idea-usar-siempre-usecallback-para-optimizar-nuestros-componentes)\n    - [¿Cuál es la diferencia entre `useCallback` y `useMemo`?](#cuál-es-la-diferencia-entre-usecallback-y-usememo)\n    - [¿Qué son las refs en React?](#qué-son-las-refs-en-react)\n    - [¿Cómo funciona el hook `useRef`?](#cómo-funciona-el-hook-useref)\n    - [¿Qué hace el hook `useLayoutEffect`?](#qué-hace-el-hook-uselayouteffect)\n      - [Orden de ejecución del `useLayoutEffect`](#orden-de-ejecución-del-uselayouteffect)\n    - [¿Qué son los componentes _stateless_?](#qué-son-los-componentes-stateless)\n    - [¿Cómo puedes prevenir el comportamiento por defecto de un evento en React?](#cómo-puedes-prevenir-el-comportamiento-por-defecto-de-un-evento-en-react)\n    - [¿Qué es el `StrictMode` en React?](#qué-es-el-strictmode-en-react)\n    - [¿Por qué es recomendable exportar los componentes de React de forma nombrada?](#por-qué-es-recomendable-exportar-los-componentes-de-react-de-forma-nombrada)\n    - [¿Cómo puedes exportar múltiples componentes de un mismo archivo?](#cómo-puedes-exportar-múltiples-componentes-de-un-mismo-archivo)\n    - [¿Cómo puedo importar de forma dinámica un componente en React?](#cómo-puedo-importar-de-forma-dinámica-un-componente-en-react)\n    - [¿Cuando y por qué es recomendable importar componentes de forma dinámica?](#cuando-y-por-qué-es-recomendable-importar-componentes-de-forma-dinámica)\n    - [¿Sólo se pueden cargar componentes de forma dinámica si se exportan por defecto?](#sólo-se-pueden-cargar-componentes-de-forma-dinámica-si-se-exportan-por-defecto)\n    - [¿Qué es el contexto en React? ¿Cómo puedo crearlo y consumirlo?](#qué-es-el-contexto-en-react-cómo-puedo-crearlo-y-consumirlo)\n    - [¿Qué es el `SyntheticEvent` en React?](#qué-es-el-syntheticevent-en-react)\n    - [¿Qué es `flushSync` en React?](#qué-es-flushsync-en-react)\n    - [¿Qué son los Error Boundaries en React?](#qué-son-los-error-boundaries-en-react)\n    - [¿Qué son las Forward Refs?](#qué-son-las-forward-refs)\n    - [¿Cómo puedo validar el tipo de mis props?](#cómo-puedo-validar-el-tipo-de-mis-props)\n    - [¿Cómo puedo validar las propiedades de un objeto con PropTypes?](#cómo-puedo-validar-las-propiedades-de-un-objeto-con-proptypes)\n    - [¿Cómo puedo validar las propiedades de un array con PropTypes?](#cómo-puedo-validar-las-propiedades-de-un-array-con-proptypes)\n    - [¿Cómo puedo inyectar HTML directamente en un componente de React?](#cómo-puedo-inyectar-html-directamente-en-un-componente-de-react)\n    - [¿Por qué puede ser mala idea pasar siempre todas las props de un objeto a un componente?](#por-qué-puede-ser-mala-idea-pasar-siempre-todas-las-props-de-un-objeto-a-un-componente)\n    - [¿Cuál es el propósito del atributo \"key\" en React y por qué es importante usarlo correctamente al renderizar listas de elementos?](#cuál-es-el-propósito-del-atributo-key-en-react-y-por-qué-es-importante-usarlo-correctamente-al-renderizar-listas-de-elementos)\n    - [¿Para qué sirve el hook `useTransition` y cuándo deberías usarlo?](#para-qué-sirve-el-hook-usetransition-y-cuándo-deberías-usarlo)\n    - [¿Para qué sirve el hook `useActionState`?](#para-qué-sirve-el-hook-useactionstate)\n    - [¿Qué problema resuelve el hook `useOptimistic`?](#qué-problema-resuelve-el-hook-useoptimistic)\n    - [¿Cómo funciona el hook `useFormStatus` y qué aporta junto a las Server Actions?](#cómo-funciona-el-hook-useformstatus-y-qué-aporta-junto-a-las-server-actions)\n    - [¿Qué es el hook `useFormState` y cuándo conviene usarlo?](#qué-es-el-hook-useformstate-y-cuándo-conviene-usarlo)\n    - [¿Qué son las Server Actions y cómo se usan con formularios en React?](#qué-son-las-server-actions-y-cómo-se-usan-con-formularios-en-react)\n    - [¿Cuál es la diferencia entre la prop `action` y el atributo `formAction` en React\u002FNext.js?](#cuál-es-la-diferencia-entre-la-prop-action-y-el-atributo-formaction-en-reactnextjs)\n    - [¿Qué diferencia hay entre componentes de servidor y componentes de cliente en React\u002FNext.js?](#qué-diferencia-hay-entre-componentes-de-servidor-y-componentes-de-cliente-en-reactnextjs)\n    - [¿Para qué sirve el hook `useSyncExternalStore`?](#para-qué-sirve-el-hook-usesyncexternalstore)\n    - [¿Cómo funciona `React.memo` y cuándo es útil?](#cómo-funciona-reactmemo-y-cuándo-es-útil)\n    - [¿Qué diferencia hay entre `ReactDOM.render`, `createRoot` y `hydrateRoot`?](#qué-diferencia-hay-entre-reactdomrender-createroot-y-hydrateroot)\n  - [Experto](#experto)\n    - [¿Es React una biblioteca o un framework? ¿Por qué?](#es-react-una-biblioteca-o-un-framework-por-qué)\n    - [¿Para qué sirve el hook `useImperativeHandle`?](#para-qué-sirve-el-hook-useimperativehandle)\n    - [¿Para qué sirve el método `cloneElement` de React?](#para-qué-sirve-el-método-cloneelement-de-react)\n    - [¿Qué son los portales en React?](#qué-son-los-portales-en-react)\n    - [¿Por qué `StrictMode` renderiza dos veces la aplicación?](#por-qué-strictmode-renderiza-dos-veces-la-aplicación)\n    - [¿Qué problemas crees que pueden aparecer en una aplicación al querer visualizar listas de miles\u002Fmillones de datos?](#qué-problemas-crees-que-pueden-aparecer-en-una-aplicación-al-querer-visualizar-listas-de-milesmillones-de-datos)\n    - [¿Cómo puedes abortar una petición fetch con `useEffect` en React?](#cómo-puedes-abortar-una-petición-fetch-con-useeffect-en-react)\n    - [¿Qué solución\u002Fes implementarías para evitar problemas de rendimiento al trabajar con listas de miles\u002Fmillones de datos?](#qué-soluciónes-implementarías-para-evitar-problemas-de-rendimiento-al-trabajar-con-listas-de-milesmillones-de-datos)\n      - [Pagination](#pagination)\n      - [Virtualization](#virtualization)\n    - [¿Qué es el hook `useDebugValue`?](#qué-es-el-hook-usedebugvalue)\n    - [¿Qué es el `Profiler` en React?](#qué-es-el-profiler-en-react)\n    - [¿Cómo puedes acceder al evento nativo del navegador en React?](#cómo-puedes-acceder-al-evento-nativo-del-navegador-en-react)\n    - [¿Cómo puedes registrar un evento en la fase de captura en React?](#cómo-puedes-registrar-un-evento-en-la-fase-de-captura-en-react)\n    - [¿Cómo puedes mejorar el rendimiento del Server Side Rendering en React para evitar que bloquee el hilo principal?](#cómo-puedes-mejorar-el-rendimiento-del-server-side-rendering-en-react-para-evitar-que-bloquee-el-hilo-principal)\n    - [¿Qué diferencia hay entre `renderToStaticNodeStream()` y `renderToPipeableStream()`?](#qué-diferencia-hay-entre-rendertostaticnodestream-y-rendertopipeablestream)\n    - [¿Para qué sirve el hook `useDeferredValue`?](#para-qué-sirve-el-hook-usedeferredvalue)\n    - [¿Para qué sirve el método `renderToReadableStream()`?](#para-qué-sirve-el-método-rendertoreadablestream)\n    - [¿Qué es la función `use` en React y para qué se utiliza?](#qué-es-la-función-use-en-react-y-para-qué-se-utiliza)\n    - [¿Para qué sirve el hook `useInsertionEffect`?](#para-qué-sirve-el-hook-useinsertioneffect)\n    - [¿Cómo se complementan `useMemo`, `useCallback`, `useTransition` y `useDeferredValue` para optimizar el rendimiento?](#cómo-se-complementan-usememo-usecallback-usetransition-y-usedeferredvalue-para-optimizar-el-rendimiento)\n  - [¿Cómo puedo hacer testing de un componente?](#cómo-puedo-hacer-testing-de-un-componente)\n  - [¿Cómo puedo hacer testing de un hook?](#cómo-puedo-hacer-testing-de-un-hook)\n    - [¿Qué es Flux?](#qué-es-flux)\n  - [Errores Típicos en React](#errores-típicos-en-react)\n    - [¿Qué quiere decir: Warning: Each child in a list should have a unique key prop?](#qué-quiere-decir-warning-each-child-in-a-list-should-have-a-unique-key-prop)\n    - [React Hook useXXX is called conditionally. React Hooks must be called in the exact same order in every component render](#react-hook-usexxx-is-called-conditionally-react-hooks-must-be-called-in-the-exact-same-order-in-every-component-render)\n    - [Can’t perform a React state update on an unmounted component](#cant-perform-a-react-state-update-on-an-unmounted-component)\n    - [Too many re-renders. React limits the number of renders to prevent an infinite loop](#too-many-re-renders-react-limits-the-number-of-renders-to-prevent-an-infinite-loop)\n    - [¿Qué diferencia existe entre Shadow DOM y Virtual DOM?](#qué-diferencia-existe-entre-shadow-dom-y-virtual-dom)\n    - [¿Qué es el Binding?](#qué-es-el-binding)\n\n---\n\n### Principiante\n\n#### ¿Qué es React?\n\n**React es una biblioteca de JavaScript de código abierto para construir interfaces de usuario.** Está basada en la componetización de la UI: la interfaz se divide en componentes independientes que pueden tener estado local y recibir datos por props. Cuando cambian los datos relevantes de un componente, React vuelve a renderizar la interfaz.\n\nEsto hace que React sea una herramienta muy útil para construir interfaces complejas, ya que permite dividir la interfaz en piezas más pequeñas y reutilizables.\n\nFue creada en 2011 por Jordan Walke, un ingeniero de software que trabajaba en Facebook y que quería simplificar la forma de crear interfaces de usuario complejas.\n\nEs una biblioteca muy popular y es usada por muchas empresas como Facebook, Netflix, Airbnb, Twitter, Instagram, etc.\n\nEnlaces de interés:\n\n- [Curso de React.js](https:\u002F\u002Fmidu.link\u002Freact)\n- [Documentación oficial de React en Español](https:\u002F\u002Fes.reactjs.org\u002F)\n- [Introduction to React.js de Facebook (2013)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=XxVg_s8xAms)\n- [Documentación oficial de React actualizada](https:\u002F\u002Fbeta.reactjs.org\u002F) en inglés\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cuáles son las características principales de React?\n\nLas características principales de React son:\n\n- **Componentes**: React está basado en la componetización de la UI. La interfaz se divide en componentes independientes, que contienen su propio estado. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz.\n\n- **Virtual DOM**: React usa un DOM virtual para renderizar los componentes. El DOM virtual es una representación en memoria del DOM real. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz. En lugar de modificar el DOM real, React modifica el DOM virtual y, a continuación, compara el DOM virtual con el DOM real. De esta forma, React sabe qué cambios se deben aplicar al DOM real.\n\n- **Declarativo**: React es declarativo, lo que significa que no se especifica cómo se debe realizar una tarea, sino qué se debe realizar. Esto hace que el código sea más fácil de entender y de mantener.\n\n- **Unidireccional**: React es unidireccional, lo que significa que los datos fluyen en una sola dirección. Los datos fluyen de los componentes padres a los componentes hijos.\n\n- **Universal**: React se puede ejecutar tanto en el cliente como en el servidor. Además, puedes usar React Native para crear aplicaciones nativas para Android e iOS.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué significa exactamente que sea declarativo?\n\nQue React sea declarativo significa que describimos el resultado que queremos en la interfaz para un estado concreto, en vez de programar manualmente cada paso para manipular el DOM.\n\nEs decir: declaramos el \"qué\" y React se ocupa del \"cómo\".\n\nEsto aporta ventajas importantes:\n\n- Hace el código más predecible y fácil de mantener.\n- Reduce errores derivados de manipulación imperativa del DOM.\n- Permite razonar la UI como una función del estado.\n\nUn ejemplo entre declarativo e imperativo:\n\n```js\n\u002F\u002F Declarativo\nconst element = \u003Ch1>Hello, world\u003C\u002Fh1>\n\n\u002F\u002F Imperativo\nconst element = document.createElement('h1')\nelement.innerHTML = 'Hello, world'\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es un componente?\n\nUn componente es la unidad fundamental de construcción en React. Es una pieza de interfaz autónoma y reutilizable que encapsula su estructura (JSX), su comportamiento (eventos y lógica), y en muchos casos también su estado.\n\nPensar en componentes es pensar en términos de composición: en lugar de construir una pantalla como un bloque monolítico, la dividimos en partes pequeñas y bien definidas (por ejemplo: `Header`, `Sidebar`, `UserCard`, `Button`). Esta forma de trabajar hace que la aplicación sea más mantenible, escalable y fácil de testear.\n\nUn componente puede:\n\n- Recibir datos de entrada mediante props.\n- Renderizar una salida visual en función de esos datos.\n- Gestionar estado interno cuando necesita recordar información entre renderizados.\n- Reutilizarse en distintos contextos sin duplicar lógica.\n\nEn React moderno, los componentes se escriben principalmente como funciones. Históricamente también se han usado clases, y es importante conocerlas para leer código legado, pero hoy el enfoque recomendado es funcional junto a hooks.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es JSX?\n\nReact usa JSX para declarar qué debe renderizar. JSX es una extensión de JavaScript que permite escribir un código más cercano visualmente a HTML, que mejora la legibilidad del código y hace que sea más fácil de entender.\n\nSin JSX, deberíamos usar `React.createElement` para crear los elementos de la interfaz manualmente de esta forma:\n\n```js\nimport { createElement } from 'react'\n\nfunction Hello() {\n  \u002F\u002F un componente es una función! 👀\n  return React.createElement(\n    'h1', \u002F\u002F elemento a renderizar\n    null, \u002F\u002F atributos del elemento\n    'Hola Mundo 👋🌍!' \u002F\u002F contenido del elemento\n  )\n}\n```\n\nEsto es muy tedioso y poco legible. Por eso, React usa JSX para declarar qué debe renderizar. Por eso usamos JSX de esta forma:\n\n```jsx\nfunction Hello() {\n  return \u003Ch1>Hola Mundo 👋🌍!\u003C\u002Fh1>\n}\n```\n\nAmbos códigos son equivalentes.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo se transforma el JSX?\n\n**El JSX se transforma en código JavaScript compatible en el navegador usando un _transpilador_ o _compilador_**. El más famoso es a día de hoy Babel, que utiliza una serie de plugins para ser compatible con la transformación, pero existen otros como SWC.\n\nPuedes ver cómo se transforma el JSX en el [playground de código de Babel](https:\u002F\u002Fbabeljs.io\u002Frepl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABACQKYBt10QCgJSIDeAUIogE6pQjlIA8AFgIwB8yc6AhogLLgAm2QLwbgaR3APBuBYfYCEdAPTMWxAL5A&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.25.3&externalPlugins=&assumptions=%7B%7D).\n\nHay casos especiales en los que un transpilador no es necesario. Por ejemplo, **Deno tiene soporte nativo para la sintaxis JSX** y no es necesario transformar el código para hacerlo compatible.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cuál es la diferencia entre componente y elemento en React?\n\nUn componente es una función o clase que recibe props y devuelve un elemento.\nUn elemento es un objeto que representa un nodo del DOM o una instancia de un componente de React.\n\n```js\n\u002F\u002F Elemento que representa un nodo del DOM\n{\n  type: 'button',\n  props: {\n    className: 'button button-blue',\n    children: {\n      type: 'b',\n      props: {\n        children: 'OK!'\n      }\n    }\n  }\n}\n\n\u002F\u002F Elemento que representa una instancia de un componente\n{\n  type: Button,\n  props: {\n    color: 'blue',\n    children: 'OK!'\n  }\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo crear un componente en React?\n\nEn React, un componente es una función (o, de forma histórica, una clase) que describe una parte de la interfaz.\n\nHoy en día, el enfoque recomendado es crear componentes funcionales:\n\n```jsx\nfunction HelloWorld() {\n  return \u003Ch1>Hello World!\u003C\u002Fh1>\n}\n```\n\nTambién puedes encontrarte componentes de clase en código legado:\n\n```jsx\nimport { Component } from 'react'\n\nclass HelloWorld extends Component {\n  render() {\n    return \u003Ch1>Hello World!\u003C\u002Fh1>\n  }\n}\n```\n\nReglas básicas al crear componentes:\n\n- El nombre debe empezar en mayúscula para que React lo interprete como componente y no como etiqueta HTML.\n- Debe ser reutilizable y tener una responsabilidad clara.\n- Debe recibir datos por props cuando necesite configuración externa.\n\nComo criterio de arquitectura, cuanto más pequeños y específicos sean tus componentes, más fácil será mantener y escalar la aplicación.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué son las props en React?\n\nLas props son las propiedades de un componente. Son datos que se pasan de un componente a otro. Por ejemplo, si tienes un componente `Button` que muestra un botón, puedes pasarle una prop `text` para que el botón muestre ese texto:\n\n```jsx\nfunction Button(props) {\n  return \u003Cbutton>{props.text}\u003C\u002Fbutton>\n}\n```\n\nPodríamos entender que el componente `Button` es un botón genérico, y que la prop `text` es el texto que se muestra en el botón. Así estamos creando un componente reutilizable.\n\nDebe considerarse además que al usar cualquier expresión JavaScript dentro de JSX debe envolverlos con `{}`, en este caso el objeto `props`, de otra forma JSX lo considerará como texto plano.\n\nPara usarlo, indicamos el nombre del componente y le pasamos las props que queremos:\n\n```jsx\n\u003CButton text=\"Haz clic aquí\" \u002F>\n\u003CButton text=\"Seguir a @midudev\" \u002F>\n```\n\nLas props son una forma de parametrizar nuestros componentes igual que hacemos con las funciones. Podemos pasarle cualquier tipo de dato a un componente, incluso otros componentes.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es y para qué sirve la prop `children` en React?\n\nLa prop `children` es una prop especial que se pasa a los componentes. Es un objeto que contiene los elementos que envuelve un componente.\n\nPor ejemplo, si tenemos un componente `Card` que muestra una tarjeta con un título y un contenido, podemos usar la prop `children` para mostrar el contenido:\n\n```jsx\nfunction Card(props) {\n  return (\n    \u003Cdiv className='card'>\n      \u003Ch2>{props.title}\u003C\u002Fh2>\n      \u003Cdiv>{props.children}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nY luego podemos usarlo de la siguiente forma:\n\n```jsx\n\u003CCard title='Título de la tarjeta'>\n  \u003Cp>Contenido de la tarjeta\u003C\u002Fp>\n\u003C\u002FCard>\n```\n\nEn este caso, la prop `children` contiene el elemento `\u003Cp>Contenido de la tarjeta\u003C\u002Fp>`.\n\nConocer y saber usar la prop `children` es muy importante para crear componentes reutilizables en React.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n####  ¿Qué diferencia hay entre props y state?\n\nAunque ambos afectan al renderizado, cumplen funciones distintas:\n\n- Las _props_ son datos de entrada que recibe un componente desde fuera (normalmente desde su componente padre). Dentro del componente receptor se tratan como inmutables.\n- El _state_ es memoria interna del componente y representa datos que cambian con el tiempo por interacción del usuario o por lógica de negocio.\n\nUna regla práctica para recordarlo:\n\n- _props_ = configuración externa.\n- _state_ = estado interno que evoluciona.\n\nEntender esta diferencia es fundamental para diseñar componentes predecibles y mantener un flujo de datos unidireccional.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Se puede inicializar un estado con el valor de una prop? ¿Qué pasa si lo haces y qué hay que tener en cuenta?\n\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.\n\nPor ejemplo, con componentes funcionales:\n\n```jsx\nconst Counter = () => {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003Cdiv>\n      \u003CCount count={count} \u002F>\n      \u003Cbutton onClick={() => setCount(count + 1)}>Aumentar\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n\nconst Count = ({ count }) => {\n  const [number, setNumber] = useState(count)\n\n  return \u003Cp>{number}\u003C\u002Fp>\n}\n```\n\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.\n\n- [Código de ejemplo](https:\u002F\u002Fstackblitz.com\u002Fedit\u002Freact-ts-cdf8n9?file=App.tsx)\n\nEn este ejemplo, lo mejor sería simplemente usar la prop `count` en el componente `Count` y así siempre se volvería a renderizar.\n\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.**\n\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:\n\n```jsx\nconst Input = ({ initialValue }) => {\n  const [value, setValue] = useState(initialValue)\n\n  return \u003Cinput value={value} onChange={e => setValue(e.target.value)} \u002F>\n}\n```\n\nEs un error muy común pensar que la prop actualizará el estado, así que tenlo en cuenta.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es el renderizado condicional en React?\n\nEl renderizado condicional es la forma de mostrar un componente u otro dependiendo de una condición.\n\nPara hacer renderizado condicional en React usamos el operador ternario:\n\n```jsx\nfunction Button({ text }) {\n  return text ? \u003Cbutton>{text}\u003C\u002Fbutton> : null\n}\n```\n\nEn este caso, si la prop `text` existe, se renderiza el botón. Si no existe, no se renderiza nada.\n\nEs común encontrar implementaciones del renderizado condicional con el operador `&&`, del tipo:\n\n```jsx\nfunction List({ listArray }) {\n  return listArray?.length && listArray.map(item => item)\n}\n```\n\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.\n\nEs preferible utilizar el operador ternario. _Kent C. Dodds_ tiene un artículo interesante hablando del tema. [Use ternaries rather than && in JSX](https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fuse-ternaries-rather-than-and-and-in-jsx)\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo puedes aplicar clases CSS a un componente en React y por qué no se puede usar `class`?\n\nNota: aunque el enunciado hable de \"componente\", la prop `className` se aplica sobre los elementos JSX\u002FHTML que el componente renderiza.\n\nEn React usamos la prop `className` para definir el valor del atributo `class` del HTML:\n\n```jsx\nfunction Button({ text }) {\n  return \u003Cbutton className='button'>{text}\u003C\u002Fbutton>\n}\n```\n\nEs decir, las clases que pones en `className` son clases HTML normales (pueden usarse para CSS, tests, selectores, utilidades, etc.). En JSX no se usa `class` porque es una palabra reservada en JavaScript, por eso React utiliza `className`.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo puedes aplicar estilos en línea a un componente en React?\n\nNota: al igual que con `className`, el estilo en línea se asigna a elementos JSX\u002FHTML renderizados por el componente.\n\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):\n\n```jsx\nfunction Button({ text }) {\n  return \u003Cbutton style={{ color: 'red', borderRadius: '2px' }}>{text}\u003C\u002Fbutton>\n}\n```\n\nFíjate que, además, los nombres de las propiedades CSS están en camelCase.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo puedo aplicar estilos de forma condicional a un componente en React?\n\nEn la práctica, esa condición termina afectando a props de estilo (`style`, `className`) sobre los elementos renderizados por el componente.\n\nPuedes aplicar estilos de forma condicional a un componente en React usando la prop `style` y un operador ternario:\n\n```jsx\nfunction Button({ text, primary }) {\n  return \u003Cbutton style={{ color: primary ? 'red' : 'blue' }}>{text}\u003C\u002Fbutton>\n}\n```\n\nEn el caso anterior, si la prop `primary` es `true`, el botón tendrá el color rojo. Si no, tendrá el color azul.\n\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:\n\n```jsx\nfunction Button({ text, primary }) {\n  return \u003Cbutton className={primary ? 'button-primary' : ''}>{text}\u003C\u002Fbutton>\n}\n```\n\nTambién podemos usar bibliotecas como `classnames`:\n\n```jsx\nimport classnames from 'classnames'\n\nfunction Button({ text, primary }) {\n  return \u003Cbutton className={classnames('button', { primary })}>{text}\u003C\u002Fbutton>\n}\n```\n\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á.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es el renderizado de listas en React?\n\nEl renderizado de listas es la forma de iterar un array de elementos y renderizar elementos de React para cada uno de ellos.\n\nPara hacer renderizado de listas en React usamos el método `map` de los arrays:\n\n```jsx\nfunction List({ items }) {\n  return (\n    \u003Cul>\n      {items.map(item => (\n        \u003Cli key={item.id}>{item.name}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  )\n}\n```\n\nEn este caso, se renderiza una lista de elementos usando el componente `List`. El componente `List` recibe una prop `items` que es un array de objetos del tipo `[{ id: 1, name: \"John Doe\" }]`. El componente `List` renderiza un elemento `li` por cada elemento del array.\n\nEl elemento `li` tiene una prop `key` que es un identificador único para cada elemento. Esto es necesario para que React pueda identificar cada elemento de la lista y actualizarlo de forma eficiente. Más adelante hay una explicación más detallada sobre esto.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo puedes escribir comentarios en React?\n\nSi vas a escribir un comentario fuera del renderizado de un componente, puedes usar la sintaxis de comentarios de JavaScript sin problemas:\n\n```jsx\nfunction Button({ text }) {\n  \u002F\u002F Esto es un comentario\n  \u002F* Esto es un comentario\n  de varias líneas *\u002F\n\n  return \u003Cbutton>{text}\u003C\u002Fbutton>\n}\n```\n\nSi vas a escribir un comentario dentro del renderizado de un componente, debes envolver el comentario en llaves y usar siempre la sintaxis de comentarios de bloque:\n\n```jsx\nfunction Button({ text }) {\n  return (\n    \u003Cbutton>\n      {\u002F* Esto es un comentario en el render *\u002F}\n      {text}\n    \u003C\u002Fbutton>\n  )\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo añadir un evento a un componente en React?\n\nDe nuevo, estrictamente hablando, el evento se conecta en el elemento JSX renderizado (`button`, `input`, `form`, etc.), aunque lo configuremos desde el componente.\n\nEn React, los eventos se registran con props que siguen la convención `on` + nombre del evento en _camelCase_ (`onClick`, `onChange`, `onSubmit`, etc.).\n\nLa clave es pasar una función como manejador del evento, no ejecutar la función durante el render.\n\n```jsx\nfunction Button({ text, onClick }) {\n  return \u003Cbutton onClick={onClick}>{text}\u003C\u002Fbutton>\n}\n```\n\nEn este caso, `Button` recibe una prop `onClick` y delega en ella su comportamiento al hacer clic. Este patrón permite crear componentes más reutilizables y desacoplados.\n\nSi necesitas añadir lógica intermedia (tracking, validaciones, etc.), puedes encapsularla en una función interna:\n\n```jsx\nfunction Button({ text, onClick }) {\n  const handleClick = event => {\n    \u002F\u002F lógica previa\n    onClick(event)\n  }\n\n  return \u003Cbutton onClick={handleClick}>{text}\u003C\u002Fbutton>\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo puedo pasar un parámetro a una función que maneja un evento en React?\n\nPara pasar un parámetro a una función que maneja un evento en React podemos usar una función anónima:\n\n```jsx\nfunction Button({ id, text, onClick }) {\n  return \u003Cbutton onClick={() => onClick(id)}>{text}\u003C\u002Fbutton>\n}\n```\n\nCuando el usuario hace clic en el botón, se ejecuta la función `onClick` pasándole como parámetro el valor de la prop `id`.\n\nTambién puedes crear una función que ejecuta la función `onClick` pasándole el valor de la prop `id`:\n\n```jsx\nfunction Button({ id, text, onClick }) {\n  const handleClick = event => {\n    \u002F\u002F handleClick recibe el evento original\n    onClick(id)\n  }\n\n  return \u003Cbutton onClick={handleClick}>{text}\u003C\u002Fbutton>\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es el estado en React?\n\nEl estado es un objeto que contiene datos que pueden cambiar en el tiempo. En React, el estado se usa para controlar los cambios en la interfaz.\n\nPara que entiendas el concepto, piensa en el interruptor de una habitación. Estos interruptores suelen tener dos estados: encendido y apagado. Cuando accionamos el interruptor y lo ponemos en `on` entonces la luz se enciende y cuando lo ponemos en `off` la luz se apaga.\n\nEste mismo concepto se puede aplicar a la interfaz de usuario. Por ejemplo, el botón Me Gusta de Facebook tendría el estado de `meGusta` a `true` cuando el usuario le ha dado a Me Gusta y a `false` cuando no lo ha hecho.\n\nNo solo podemos tener en el estado valores booleanos, también podemos tener objetos, arrays, números, etc.\n\nPor ejemplo, si tienes un componente `Counter` que muestra un contador, puedes usar el estado para controlar el valor del contador.\n\nPara crear un estado en React usamos el hook `useState`:\n\n```jsx\nimport { useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003Cdiv>\n      \u003Cp>Contador: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setCount(count + 1)}>Aumentar\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nAl usar el hook `useState` este devolverá un `array` de dos posiciones:\n\n0. El valor del estado.\n1. La función para cambiar el estado.\n\nSuele usarse desestructuración para facilitar la lectura y ahorrarnos algunas líneas de código. Por otro lado, al pasarle un dato como parámetro al `useState` le estamos indicando su estado inicial.\n\nCon un componente de clase, la creación del estado sería así:\n\n```jsx\nimport { Component } from 'react'\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props)\n    this.state = { count: 0 }\n  }\n\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cp>Contador: {this.state.count}\u003C\u002Fp>\n        \u003Cbutton onClick={() => this.setState({ count: this.state.count + 1 })}>\n          Aumentar\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    )\n  }\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué son los hooks?\n\nLos Hooks son funciones especiales de React que permiten usar estado, efectos y otras capacidades del framework dentro de componentes funcionales.\n\nAntes de su aparición, estas capacidades se asociaban sobre todo a componentes de clase. Con hooks, el modelo funcional pasó a ser la opción principal.\n\nAlgunos hooks fundamentales son:\n\n- `useState`: para estado local.\n- `useEffect`: para sincronizar efectos secundarios.\n- `useMemo` y `useCallback`: para optimización de cálculos y referencias.\n- `useRef`: para referencias mutables o acceso al DOM.\n\nAdemás, React permite crear _custom hooks_, que son una forma excelente de reutilizar lógica con estado entre componentes sin duplicar código.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué hace el hook `useState`?\n\nEl hook `useState` es utilizado para crear variables de estado, quiere decir que su valor es dinámico, que este puede cambiar en el tiempo y eso requiere una re-renderización del componente donde se utiliza\n\nRecibe un parámetro:\n\n- El valor inicial de nuestra variable de estado.\n\nDevuelve un array con dos variables:\n\n- En primer lugar tenemos la variable que contiene el valor\n- La siguiente variable es una función set, requiere el nuevo valor del estado, y este modifica el valor de la variable que anteriormente mencionamos\n- Cabe destacar que la función proporciona cómo parámetro el valor actual del propio estado. Ex: `setIsOpen(isOpen => !isOpen)`\n\nEn este ejemplo mostramos como el valor de `count` se inicializa en 0, y también se renderiza cada vez que el valor es modificado con la función `setCount` en el evento `onClick` del button:\n\n```jsx\nimport { useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n\n  return (\n    \u003C>\n      \u003Cp>Contador: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setCount(count => count + 1)}>Aumentar\u003C\u002Fbutton>\n    \u003C\u002F>\n  )\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué hace el hook `useReducer`?\n\n`useReducer` es un hook para gestionar estado cuando las transiciones son más complejas que un simple \"setear valor\".\n\nEs especialmente útil cuando:\n\n- El estado tiene varios campos relacionados.\n- Hay varias acciones que modifican ese estado.\n- Quieres centralizar la lógica de actualización en una única función (`reducer`).\n\nSu firma básica es:\n\n```jsx\nconst [state, dispatch] = useReducer(reducer, initialState)\n```\n\n- `state`: estado actual.\n- `dispatch`: función para enviar acciones.\n- `reducer(state, action)`: función pura que devuelve el siguiente estado.\n\nEjemplo:\n\n```jsx\nimport { useReducer } from 'react'\n\nconst initialState = { count: 0 }\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 }\n    case 'decrement':\n      return { count: state.count - 1 }\n    case 'reset':\n      return initialState\n    default:\n      return state\n  }\n}\n\nexport default function Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState)\n\n  return (\n    \u003C>\n      \u003Cp>Contador: {state.count}\u003C\u002Fp>\n      \u003Cbutton onClick={() => dispatch({ type: 'increment' })}>+\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => dispatch({ type: 'decrement' })}>-\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => dispatch({ type: 'reset' })}>Reset\u003C\u002Fbutton>\n    \u003C\u002F>\n  )\n}\n```\n\n`useState` suele ser más simple para casos sencillos; `useReducer` brilla cuando necesitas reglas de negocio más explícitas y escalables.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué significa la expresión \"subir el estado\"?\n\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.\n\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.\n\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.\n\n```jsx\nimport { useState } from 'react'\n\nexport default function App() {\n  return (\n    \u003C>\n      \u003Ch1>Lista de regalos\u003C\u002Fh1>\n      \u003CGiftList \u002F>\n      \u003CTotalGifts \u002F>\n    \u003C\u002F>\n  )\n}\n\nfunction GiftList() {\n  const [gifts, setGifts] = useState([])\n\n  const addGift = () => {\n    const newGift = prompt('¿Qué regalo quieres añadir?')\n    setGifts([...gifts, newGift])\n  }\n\n  return (\n    \u003C>\n      \u003Ch2>Regalos\u003C\u002Fh2>\n      \u003Cul>\n        {gifts.map(gift => (\n          \u003Cli key={gift}>{gift}\u003C\u002Fli>\n        ))}\n      \u003C\u002Ful>\n      \u003Cbutton onClick={addGift}>Añadir regalo\u003C\u002Fbutton>\n    \u003C\u002F>\n  )\n}\n\nfunction TotalGifts() {\n  const [totalGifts, setTotalGifts] = useState(0)\n\n  return (\n    \u003C>\n      \u003Ch2>Total de regalos\u003C\u002Fh2>\n      \u003Cp>{totalGifts}\u003C\u002Fp>\n    \u003C\u002F>\n  )\n}\n```\n\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.\n\nTenemos que subir el estado de `gifts` al componente padre `App` y le pasaremos el número de regalos como prop al componente `TotalGifts`.\n\n```jsx\nimport { useState } from 'react'\n\nexport default function App() {\n  const [gifts, setGifts] = useState([])\n\n  const addGift = () => {\n    const newGift = prompt('¿Qué regalo quieres añadir?')\n    setGifts([...gifts, newGift])\n  }\n\n  return (\n    \u003C>\n      \u003Ch1>Lista de regalos\u003C\u002Fh1>\n      \u003CGiftList gifts={gifts} addGift={addGift} \u002F>\n      \u003CTotalGifts totalGifts={gifts.length} \u002F>\n    \u003C\u002F>\n  )\n}\n\nfunction GiftList({ gifts, addGift }) {\n  return (\n    \u003C>\n      \u003Ch2>Regalos\u003C\u002Fh2>\n      \u003Cul>\n        {gifts.map(gift => (\n          \u003Cli key={gift}>{gift}\u003C\u002Fli>\n        ))}\n      \u003C\u002Ful>\n      \u003Cbutton onClick={addGift}>Añadir regalo\u003C\u002Fbutton>\n    \u003C\u002F>\n  )\n}\n\nfunction TotalGifts({ totalGifts }) {\n  return (\n    \u003C>\n      \u003Ch2>Total de regalos\u003C\u002Fh2>\n      \u003Cp>{totalGifts}\u003C\u002Fp>\n    \u003C\u002F>\n  )\n}\n```\n\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.\n\n- [Código de ejemplo](https:\u002F\u002Fstackblitz.com\u002Fedit\u002Freact-ts-qitkys?file=App.tsx)\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué hace el hook `useEffect`?\n\nEl hook `useEffect` se usa para ejecutar código cuando se renderiza el componente o cuando cambian las dependencias del efecto.\n\nRecibe dos parámetros:\n\n- La función que se ejecutará al cambiar las dependencias o al renderizar el componente.\n- Un array de dependencias. Si cambia el valor de alguna dependencia, ejecutará la función.\n\nEn este ejemplo mostramos un mensaje en consola cuando carga el componente y cada vez que cambia el valor de `count`:\n\n```jsx\nimport { useEffect, useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n\n  useEffect(() => {\n    console.log('El contador se ha actualizado')\n  }, [count])\n\n  return (\n    \u003C>\n      \u003Cp>Contador: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setCount(count + 1)}>Aumentar\u003C\u002Fbutton>\n    \u003C\u002F>\n  )\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### Explica casos de uso del hook `useEffect`\n\nPodemos usar el hook `useEffect` de diferentes formas, tales como:\n\n- Ejecutar código cuando se renderiza el componente, cuando cambian las dependencias del efecto o cuando se desmonta el componente.\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.\n- Realizar tracking de eventos, como Google Analytics, para saber qué páginas visitan los usuarios.\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.\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.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### Cómo suscribirse a un evento en `useEffect`\n\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.\n\n```jsx\nimport { useEffect } from 'react'\n\nfunction Window() {\n  useEffect(() => {\n    const handleResize = () => {\n      console.log('La ventana se ha redimensionado')\n    }\n\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  return \u003Cp>Abre la consola y redimensiona la ventana\u003C\u002Fp>\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué hace el hook `useId`?\n\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.\n\nLlama `useId` en el nivel superior del componente para generar una ID única:\n\n```jsx\nimport { useId } from 'react'\nfunction PasswordField() {\n  const passwordHintId = useId()\n  \u002F\u002F ...\n```\n\nA continuación, pasa el ID generado a diferentes atributos:\n\n```jsx\n\u003C>\n  \u003Cinput type=\"password\" aria-describedby={passwordHintId} \u002F>\n  \u003Cp id={passwordHintId}>\n\u003C\u002F>\n```\n\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.\n\nEl ejemplo completo sería así:\n\n```jsx\nimport { useId } from 'react'\n\nfunction PasswordField() {\n  const passwordHintId = useId()\n\n  return (\n    \u003C>\n      \u003Clabel>\n        Password:\n        \u003Cinput type='password' aria-describedby={passwordHintId} \u002F>\n      \u003C\u002Flabel>\n      \u003Cp id={passwordHintId}>\n        El password debe ser de 18 letras y contener caracteres especiales\n      \u003C\u002Fp>\n    \u003C\u002F>\n  )\n}\n\nexport default function App() {\n  return (\n    \u003C>\n      \u003Ch2>Choose password\u003C\u002Fh2>\n      \u003CPasswordField \u002F>\n      \u003Ch2>Confirm password\u003C\u002Fh2>\n      \u003CPasswordField \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\nComo ves en `App` estamos usando el componente dos veces. Si pusieramos una id a mano, por ejemplo `password`, entonces la ID no sería única y quedaría duplicada. Por eso es importante que generes la ID automáticamente con `useId`.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo podemos ejecutar código cuando el componente se monta?\n\nPodemos ejecutar código cuando el componente se monta usando el hook `useEffect` sin pasarle ninguna dependencia. En este caso, la función que se pasa como primer parámetro se ejecutará cuando el componente se monte.\n\n```jsx\nimport { useEffect } from 'react'\n\nfunction Component() {\n  useEffect(() => {\n    console.log('El componente se ha montado')\n  }, [])\n\n  return \u003Cp>Abre la consola y re-dimensiona la ventana\u003C\u002Fp>\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué son los Fragments en React?\n\nLos _Fragments_ permiten agrupar varios elementos JSX sin añadir nodos extra al DOM.\n\nEn React, un componente debe devolver un único elemento raíz. `Fragment` resuelve ese requisito sin introducir un `div` adicional que pueda afectar al layout o a los estilos.\n\nPara crear un Fragment en React usamos el componente `Fragment`:\n\n```jsx\nimport { Fragment } from 'react'\n\nfunction App() {\n  return (\n    \u003CFragment>\n      \u003Ch1>Titulo\u003C\u002Fh1>\n      \u003Cp>Párrafo\u003C\u002Fp>\n    \u003C\u002FFragment>\n  )\n}\n```\n\nTambién podemos usar la sintaxis de abreviatura:\n\n```jsx\nfunction App() {\n  return (\n    \u003C>\n      \u003Ch1>Titulo\u003C\u002Fh1>\n      \u003Cp>Párrafo\u003C\u002Fp>\n    \u003C\u002F>\n  )\n}\n```\n\nSi necesitas añadir una `key` (por ejemplo, al renderizar una lista), debes usar la versión explícita con `Fragment`:\n\n```jsx\nimport { Fragment } from 'react'\n\nfunction List({ items }) {\n  return items.map(item => (\n    \u003CFragment key={item.id}>\n      \u003Ch2>{item.title}\u003C\u002Fh2>\n      \u003Cp>{item.description}\u003C\u002Fp>\n    \u003C\u002FFragment>\n  ))\n}\n```\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Por qué es recomendable usar Fragment en vez de un div?\n\nLas razones por las que es recomendable usar Fragment en vez de un `div` a la hora de envolver varios elementos son:\n\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.\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.\n- Los Fragments son más rápidos que los `div` ya que no tienen que ser renderizados.\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.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es el Compound Components Pattern?\n\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.\n\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.\n\nUn ejemplo de este diseño sería una lista que renderiza los elementos hijos:\n\n```jsx\n\u003CList>\n  \u003CListItem>Cat\u003C\u002FListItem>\n  \u003CListItem>Dog\u003C\u002FListItem>\n\u003C\u002FList>\n```\n\n```jsx\nconst List = ({ children, ...props }) => \u003Cul {...props}>{children}\u003C\u002Ful>\n\nconst ListItem = ({ children, ...props }) => {\n  return \u003Cli {...props}>{children}\u003C\u002Fli>\n}\n\nexport { List, ListItem }\n```\n\nEste es un ejemplo sencillo, pero los componentes pueden ser tan complejos como quieras y tanto el padre como los hijos pueden tener sus propios estados.\n\nEnlaces de interés:\n\n- [Lleva tu React al siguiente nivel con Compound Pattern by dezkareid en el blog de Platzi](https:\u002F\u002Fplatzi.com\u002Fblog\u002Flleva-tu-react-al-siguiente-nivel-con-compound-pattern\u002F?utm_source=twitter&utm_medium=organic&utm_campaign=PLA_TW_BLOG_202205_react_compound_pattern)\n\n- [Compound Components by Jenna Smith](https:\u002F\u002Fjjenzz.com\u002Fcompound-components) \u003Cstrong>en inglés\u003C\u002Fstrong>\n- [Compound Components Lesson by Kent C. Dodds](https:\u002F\u002Fegghead.io\u002Flessons\u002Freact-write-compound-components) \u003Cstrong>en inglés\u003C\u002Fstrong>\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Cómo puedes inicializar un proyecto de React desde cero?\n\nExisten diversas formas de inicializar un proyecto de React desde cero. Entre las más populares están:\n\n- [Vite](https:\u002F\u002Fvitejs.dev\u002Fguide\u002F#scaffolding-your-first-vite-project)\n\n```bash\nnpm create vite@latest my-app -- --template react\n```\n\n- [Create React App](https:\u002F\u002Fcreate-react-app.dev\u002Fdocs\u002Fgetting-started)\n\n```bash\nnpx create-react-app my-app\n```\n\n> La opción más popular y recomendada hoy en día es Vite. \u003Csmall>Fuente [npm trends](https:\u002F\u002Fnpmtrends.com\u002F@vitejs\u002Fplugin-react-vs-create-react-app).\u003C\u002Fsmall>\n\nUsando un Framework, entre las más populares están:\n\n- [Nextjs](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fgetting-started)\n\n```bash\nnpx create-next-app@latest my-app\n```\n\n- [Gatsby](https:\u002F\u002Fwww.gatsbyjs.com\u002Fdocs\u002Fquick-start\u002F)\n\n```bash\nnpm init gatsby\n```\n\n> La opción más popular y recomendada hoy en día es Nextjs. \u003Csmall>Fuente [npm trends](https:\u002F\u002Fnpmtrends.com\u002Fgatsby-vs-next)\u003C\u002Fsmall>\n\nCada uno de ellos es un empaquetador de aplicaciones web. Se encargan de resolver las dependencias de tu proyecto, levantar un entorno de desarrollo que se refresca automáticamente con cada cambio y de empaquetar tu aplicación para producción con todos los archivos estáticos necesarios y mucho más.\n\n**[⬆ Volver a índice](#índice)**\n\n---\n\n#### ¿Qué es React DOM?\n\nReact DOM es la librería que se encarga de renderizar los componentes de React para el navegador. Hay que tener en cuenta que React es una biblioteca que se puede usar en diferentes entornos (dispositivos móviles, apps de escritorio, terminal...).\n\nMientras que la biblioteca de _React_, a secas, es el motor de creación de componentes, hooks, sistema de props y estado... _React DOM_ es la librería que se encarga de renderizar los componentes de React específicamente en el navegador.\n\n_React Native_, por ejemplo, haría lo mismo, pero para dispositivos móviles.\n\n**[⬆ Volver a índice](#índice)**\n\n#### ¿Qué JavaScript necesito para aprender React?\n\n##### JavaScript que necesitas para aprender React\n\n**Para aprender y dominar React necesitas saber JavaScript.** A diferencia de otros frameworks y bibliotecas, como _Angular_ y _Vue_, que se basan en su propio _DSL_ (Domain-Specific Language), React usa una extensión de la sintaxis de JavaScript llamada _JSX_. Más adelante lo veremos en detalle pero, al final, no deja de ser azúcar sintáctico para escribir menos JavaScript.\n\n**En React todo es JavaScript.** Para bien y para mal. Este libro da por sentados unos conocimientos previos del lenguaje de programación pero antes de empezar vamos a hacer un pequeño repaso por algunas de las características más importantes que necesitarás conocer.\n\n**Si ya dominas JavaScript puedes saltarte este capítulo** y continuar con el libro, pero recuerda que siempre podrás revisar este capítulo como referencia.\n\n##### EcmaScript Modules o ESModules\n\nLos **EcmaScript Modules** es la forma nativa que tiene JavaScript para importar y exportar variables, funciones y clases entre diferentes ficheros. Hoy en día, especialmente si trabajamos con un empaquetador de aplicaciones como Webpack, vamos a estar trabajando constantemente con esta sintaxis.\n\nPor un lado podemos crear módulos exportándolos por defecto:\n\n```js\n\u002F\u002F sayHi.js\n\u002F\u002F exportamos por defecto el módulo sayHi\nexport default sayHi (message) {\n    console.log(message)\n}\n\n\u002F\u002F index.js\n\u002F\u002F este módulo lo podremos importar con el nombre que queramos\nimport sayHi from '.\u002FsayHi.js'\n\n\u002F\u002F al ser el módulo exportado por defecto podríamos usar otro nombre\nimport miduHi from '.\u002FsayHi.js'\n```\n\nTambién podemos hacer exportaciones nombradas de módulos, de forma que un módulo tiene un nombre asignado y para importarlo necesitamos usar exactamente el nombre usado al exportarlo:\n\n```js\n\u002F\u002F sayHi.js\n\u002F\u002F podemos usar exportaciones nombradas para mejorar esto\nexport const sayHi = message => console.log(message)\n\n\u002F\u002F y se pueden hacer tantas exportaciones de módulos nombrados como queramos\nexport const anotherHi = msg => alert(msg)\n\n\u002F\u002F index.js\n\u002F\u002F ahora para importar estos módulos en otro archivo podríamos hacerlo así\nimport { sayHi, anotherHi } from '.\u002FsayHi.js'\n```\n\nLos _imports_ que hemos visto hasta aquí se conocen como _imports estáticos_. Esto significa que ese módulo será cargado en el momento de la carga del archivo que lo importa.\n\nTambién existen los _imports dinámicos_, de forma que podamos importar módulos que se carguen en el momento de la ejecución del programa o cuando nosotros decidamos (por ejemplo, como respuesta a un click).\n\n```js\ndocument.querySelector('button').addEventListener('click', () => {\n  \u002F\u002F los imports dinámicos devuelven una Promesa\n  import('.\u002FsayHi.js').then(module => {\n    \u002F\u002F ahora podemos ejecutar el módulo que hemos cargado\n    module.default('Hola')\n  })\n})\n```\n\nLos imports dinámicos son útiles también cuando trabajamos con empaquetadores como Webpack o Vite, ya que esto creará unos _chunks_ (fragmentos) que se cargarán fuera del bundle general. ¿El objetivo? Mejorar el rendimiento de la aplicación.\n\nExisten más sintaxis para trabajar con módulos, pero con saber las que hemos visto ya sería suficiente para seguir el libro.\n\n**¿Por qué es importante?**\n\nPara empezar React te ofrece diferentes partes de su biblioteca a través de módulos que podrás importar. Además nuestros componentes los tendremos separados en ficheros y, cada uno de ellos, se podrá importar utilizando _ESModules_.\n\nAdemás, por temas de optimización de rendimiento, podremos importar de forma dinámica componentes y así mejorar la experiencia de nuestros usuarios al necesitar cargar menos información para poder utilizar la página.\n\n##### Operador condicional (ternario)\n\nLas ternarias son una forma de realizar condiciones sin la necesidad de usar la sintaxis con `if`. Se podría decir que es una forma de atajo para evitar escribir tanto código.\n\n```js\nif (number % 2 === 0) {\n  console.log('Es par')\n} else {\n  console.log('Es impar')\n}\n\n\u002F\u002F usando ternaria\nnumber % 2 === 0 ? console.log('Es par') : console.log('Es impar')\n```\n\n**¿Por qué es importante?**\n\nEn las interfaces gráficas es muy normal que, dependiendo del estado de la aplicación o los datos que nos lleguen, vamos a querer renderizar una cosa u otra en pantalla. Para realizar esto, en lugar de utilizar `if` se usan las ternarias ya que queda mucho más legible dentro del _JSX_.\n\n##### Funciones flecha o Arrow Functions\n\nLas _funciones flecha_ o _arrow function_ fueron añadidas a JavaScript en el estándar ECMAScript 6 (o ES2015). En principio parece que simplemente se trata de una sintaxis alternativa más simple a la hora de crear expresiones de funciones:\n\n```js\nconst nombreDeLaFuncion = function (param1, param2) {\n  \u002F\u002F instrucciones de la función\n}\n\nconst nombreDeLaFuncion = (param1, param2) => {\n  \u002F\u002F con arrow function\n  \u002F\u002F instrucciones de la función\n}\n```\n\nPero además del cambio de sintaxis existen otras características de las funciones flechas que se usan constantemente en React.\n\n```js\n\u002F\u002F return implícito al escribir una sola línea\nconst getName = () => 'midudev'\n\n\u002F\u002F ahorro de parentésis para función de un parámetro\nconst duplicateNumber = num => num * 2\n\n\u002F\u002F se usan mucho como callback en funciones de arrays\nconst numbers = [2, 4, 6]\nconst newNumbers = numbers.map(n => n \u002F 2)\nconsole.log(newNumbers) \u002F\u002F [1, 2, 3]\n```\n\nTambién tiene algunos cambios respecto al valor de `this` pero, aunque es aconsejable dominarlo, no es realmente necesario para poder seguir con garantías el libro.\n\n**¿Por qué es importante?**\n\nAunque hace unos años con React se trabajaba principalmente con clases, desde la irrupción de los hooks en la versión 16.8 ya no se usan mucho. Esto hace que se usen mucho más funciones.\n\nLas funciones flecha, además, puedes verlas fácilmente conviviendo dentro de tus componentes. Por ejemplo, a la hora de renderizar una lista de elementos ejecutarás el método `.map` del array y, como callback, seguramente usarás una función flecha anónima.\n\n##### Parámetros predeterminados (default values)\n\nEn JavaScript puedes proporcionar valores por defecto a los parámetros de una función en caso que no se le pase ningún argumento.\n\n```js\n\u002F\u002F al parámetro b le damos un valor por defecto de 1\nfunction multiply(a, b = 1) {\n  return a * b\n}\n\n\u002F\u002F si le pasamos un argumento con valor, se ignora el valor por defecto\nconsole.log(multiply(5, 2)) \u002F\u002F 10\n\n\u002F\u002F si no le pasamos un argumento, se usa el valor por defecto\nconsole.log(multiply(5)) \u002F\u002F 5\n\n\u002F\u002F las funciones flecha también pueden usarlos\nconst sayHi = (msg = 'Hola React!') => console.log(msg)\nsayHi() \u002F\u002F 'Hola React!'\n```\n\n**¿Por qué es importante?**\n\nEn React existen dos conceptos muy importantes: **componentes y hooks**. No vamos a entrar en detalle ahora en ellos pero lo importante es que ambos son construidos con funciones.\n\nPoder añadir valores por defecto a los parámetros de esas funciones en el caso que no venga ningún argumento **es clave** para poder controlar React con éxito.\n\nLos componentes, por ejemplo, pueden no recibir parámetros y, pese a ello, seguramente vas a querer que tengan algún comportamiento por defecto. Lo podrás conseguir de esta forma.\n\n##### Template Literals\n\nLos template literals o plantillas de cadenas llevan las cadenas de texto al siguiente nivel permitiendo expresiones incrustadas en ellas.\n\n```js\nconst inicio = 'Hola'\nconst final = 'React'\n\n\u002F\u002F usando una concatenación normal sería\nconst mensaje = inicio + ' ' + final\n\n\u002F\u002F con los template literals podemos evaluar expresiones\nconst mensaje = `${inicio} ${final}`\n```\n\nComo ves, para poder usar los template literals, necesitas usar el símbolo ```\n\nAdemás, nos permiten utilizar cadenas de texto de más de una línea.\n\n**¿Por qué es importante?**\n\nEn React esto se puede utilizar para diferentes cosas. No sólo es normal crear cadenas de texto para mostrar en la interfaz... también puede ser útil para crear clases para tus elementos HTML de forma dinámica. Verás que los template literales están en todas partes.\n\n##### Propiedades abreviadas\n\nDesde _ECMAScript 2015_ se puede iniciar un objeto utilizado nombre de propiedades abreviadas. Esto es que si quieres utilizar como valor una variable que tiene el mismo nombre que la key, entonces puedes indicar la inicialización una vez:\n\n```js\nconst name = 'Miguel'\nconst age = 36\nconst book = 'React'\n\n\u002F\u002F antes haríamos esto\nconst persona = { name: name, age: age, book: book }\n\n\u002F\u002F ahora podemos hacer esto, sin repetir\nconst persona = { name, age, book }\n```\n\n**¿Por qué es importante?**\n\nEn React se trata muchas veces con objetos y siempre vamos a querer escribir el menor número de líneas posible para mantener nuestro código fácil de mantener y entender.\n\n##### La desestructuración\n\nLa sintaxis de _desestructuración_ es una expresión de JavaScript que permite extraer valores de Arrays o propiedades de objetos en distintas variables.\n\n```js\n\u002F\u002F antes\nconst array = [1, 2, 3]\nconst primerNumero = array[0]\nconst segundoNumero = array[1]\n\n\u002F\u002F ahora\nconst [primerNumero, segundoNumero] = array\n\n\u002F\u002F antes con objetos\nconst persona = { name: 'Miguel', age: 36, book: 'React' }\nconst name = persona.name\nconst age = persona.age\n\n\u002F\u002F ahora con objetos\nconst { age, name } = persona\n\n\u002F\u002F también podemos añadir valores por defecto\nconst { books = 2 } = persona\nconsole.log(persona.books) \u002F\u002F -> 2\n\n\u002F\u002F también funciona en funciones\nconst getName = ({ name }) => `El nombre es ${name}`\ngetName(persona)\n```\n\n**¿Por qué es importante?**\n\nEn React hay mucho código básico que da por sentado que conoces y dominas esta sintaxis. Piensa que los objetos y los arreglos son tipos de datos que son perfectos para guardar datos a representar en una interfaz. Así que poder tratarlos fácilmente te va a hacer la vida mucho más fácil.\n\n##### Métodos de Array\n\nSaber manipular arreglos en JavaScript es básico para considerar que se domina. Cada método realiza una operación en concreto y devuelve diferentes tipos de datos. Todos los métodos que veremos reciben un callback (función) que se ejecutará para cada uno de los elementos del array.\n\nVamos a revisar algunos de los métodos más usados:\n\n```js\n\u002F\u002F tenemos este array con diferentes elementos\nconst networks = [\n  {\n    id: 'youtube',\n    url: 'https:\u002F\u002Fmidu.tube',\n    needsUpdate: true\n  },\n  {\n    id: 'twitter',\n    url: 'https:\u002F\u002Ftwitter.com\u002Fmidudev',\n    needsUpdate: true\n  },\n  {\n    id: 'instagram',\n    url: 'https:\u002F\u002Finstagram.com\u002Fmidu.dev',\n    needsUpdate: false\n  }\n]\n\n\u002F\u002F con .map podemos transformar cada elemento\n\u002F\u002F y devolver un nuevo array\nnetworks.map(singleNetwork => singleNetwork.url)\n\u002F\u002F Resultado:\n  [\n    'https:\u002F\u002Fmidu.tube',\n    'https:\u002F\u002Ftwitter.com\u002Fmidudev',\n    'https:\u002F\u002Finstagram.com\u002Fmidu.dev'\n  ]\n\n\u002F\u002F con .filter podemos filtrar elementos de un array que no\n\u002F\u002F pasen una condición determinada por la función que se le pasa.\n\u002F\u002F Devuelve un nuevo array.\nnetworks.filter(singleNetwork => singleNetwork.needsUpdate === true)\n\u002F\u002F Resultado:\n[\n  { ","该项目是一个收集了React面试常见问题的资源库，旨在帮助开发者从零基础到专家级别准备React相关技术面试。它提供了详细的西班牙语解答，涵盖了从React基本概念、组件和JSX的使用方法到状态管理等各个方面的问题。利用JavaScript编写，适合所有希望提升React技能或准备相关职位面试的前端开发人员。无论是初学者还是有一定经验的开发者，都能通过这个项目加深对React框架的理解，并学习如何在实际工作中应用这些知识。",2,"2026-06-11 03:36:37","high_star"]