¿Qué función principal cumple la librería React en el desarrollo frontend?
Actúa como una herramienta para construir interfaces de usuario basadas en componentes reutilizables.
Flashcards con solución de React
¿Cuál es la unidad básica de construcción en una aplicación de React?
El componente, que encapsula su propia lógica y apariencia.
En React, ¿qué diferencia existe entre el nombre de un componente y una etiqueta HTML estándar?
Los nombres de los componentes deben comenzar con mayúscula, mientras que las etiquetas HTML están en minúsculas.
¿Qué es JSX en el contexto de React?
Es una extensión de la sintaxis de JavaScript que permite escribir marcado similar a HTML dentro de archivos JS.
Al convertir HTML a JSX, ¿qué regla debe seguirse respecto al cierre de etiquetas como `<br>` o `<img>`?
Todas las etiquetas deben cerrarse obligatoriamente, por ejemplo: `<br />` o `<img />`.
¿Cómo se deben agrupar múltiples elementos devueltos por un solo componente de React?
Deben envolverse en un padre compartido, como un `<div>` o un fragmento vacío `<>...</>`.
¿Qué atributo se utiliza en JSX para asignar una clase de CSS a un elemento?
Se utiliza el atributo `className` en lugar de `class`.
¿Cómo se incrusta una variable o expresión de JavaScript dentro del marcado JSX?
Se utilizan llaves `{ }` para escapar de JSX hacia JavaScript.
Para pasar una cadena de texto dinámica a un atributo como `src`, ¿qué sintaxis se debe emplear?
Se usan llaves sin comillas, por ejemplo: `src={user.imageUrl}`.
¿Qué técnica de JavaScript se utiliza comúnmente en React para renderizar listas de elementos?
Se utiliza la función `map()` de los arreglos para transformar datos en elementos JSX.
¿Por qué es obligatorio asignar una prop `key` única a cada elemento de una lista en React?
Para que React identifique qué elementos han cambiado, se han agregado o eliminado, optimizando el re-renderizado.
Al asignar un controlador de eventos como `onClick`, ¿qué error común debe evitarse con la función pasada?
No se debe llamar a la función con paréntesis (ej. `onClick={handleClick()}`), sino pasar la referencia (ej. `onClick={handleClick}`).
¿Qué herramienta de React permite que un componente 'recuerde' información y actualice la pantalla?
El estado (State), gestionado comúnmente mediante el Hook `useState`.
¿Qué dos elementos devuelve la función `useState(0)`?
Devuelve el valor actual del estado y una función para actualizar dicho valor.
¿Cómo se denominan las funciones de React que comienzan con la palabra 'use'?
Se denominan Hooks.
¿Cuál es la regla fundamental sobre dónde se pueden llamar los Hooks dentro de un componente?
Solo se pueden llamar en el primer nivel del componente, nunca dentro de condicionales o bucles.
¿Qué significa el concepto de 'levantar el estado' (lifting state up)?
Mover el estado al componente padre común más cercano para que varios componentes hijos puedan compartir y sincronizar datos.
¿Cómo se denomina a la información que un componente padre pasa a su hijo?
Se denominan Props (propiedades).
Concepto: Virtual DOM
Definición: Representación del DOM real en memoria que React utiliza para comparar cambios y actualizar solo las partes necesarias del navegador.
¿Qué ventaja principal ofrece el Virtual DOM respecto al rendimiento?
Evita la actualización completa de la interfaz en cada cambio de datos, realizando solo las modificaciones mínimas necesarias en el DOM real.
¿Qué significa que React es 'isomórfico'?
Significa que puede renderizar HTML tanto en el servidor como en el cliente usando la misma base de código.
¿Cuál es el beneficio de la renderización isomórfica para el SEO?
Permite que los buscadores indexen el contenido completo de la página porque el servidor entrega el HTML ya procesado.
¿Qué diferencia fundamental existe entre React Server Components (RSC) y Client Components?
Los RSC se ejecutan exclusivamente en el servidor y no envían código JavaScript al cliente, mientras que los Client Components se ejecutan en el navegador.
¿En qué situación es preferible usar un Client Component en lugar de un Server Component?
Cuando el componente requiere interactividad inmediata, uso de Hooks de estado (`useState`) o efectos (`useEffect`).
¿Por qué los RSC ayudan a reducir el tamaño del 'bundle' de la aplicación?
Porque el código fuente del componente se queda en el servidor y solo se envía el resultado (HTML y datos) al navegador.
¿Qué herramienta se recomienda actualmente para iniciar proyectos de React por su velocidad de arranque?
Vite.
¿Cuál es el propósito del paquete 'Create React App' según el manual de desarrolloweb.com?
Facilitar la configuración inicial de un proyecto de React ocultando la complejidad de herramientas como Webpack y Babel.
¿Qué comando se utiliza para generar una versión optimizada para producción de una app de React?
El comando `npm run build`.
¿Qué indica el término 'flujo de datos unidireccional' en React?
Que los datos fluyen siempre de los componentes padres hacia los hijos a través de las props.
¿Qué diferencia hay entre un enfoque declarativo y uno imperativo en el desarrollo de UIs?
El declarativo describe 'cómo debe verse' la interfaz según el estado, mientras que el imperativo da instrucciones paso a paso para modificar el DOM.
¿Qué es un 'componente controlado'?
Un componente que no gestiona su propio estado interno, sino que recibe su valor y sus cambios a través de props enviadas por un padre.
¿Por qué es importante la inmutabilidad al actualizar el estado en React?
Porque permite a React detectar cambios de forma eficiente comparando referencias de objetos, lo que facilita el viaje en el tiempo y previene errores.
¿Para qué sirve el método `useEffect`?
Para ejecutar efectos secundarios como peticiones de datos, suscripciones o actualizaciones manuales del DOM después del renderizado.
¿Cuándo se ejecuta un `useEffect` si se le pasa un array vacío `[]` como segundo argumento?
Se ejecuta únicamente una vez, después del primer renderizado (equivalente a `componentDidMount`).
¿Cómo se realiza el 'saneamiento' o limpieza de un efecto en `useEffect`?
Haciendo que la función pasada al Hook devuelva otra función que contenga la lógica de limpieza.
¿Qué sucede si no se incluyen las variables de estado usadas dentro de un `useEffect` en su array de dependencias?
El efecto podría utilizar valores obsoletos ('stale') de renderizados anteriores.
¿Qué diferencia hay entre un componente funcional y uno de clase en React moderno?
Los componentes funcionales son funciones simples que usan Hooks para el estado, mientras que los de clase usan herencia y métodos de ciclo de vida.
¿Cuál es la función del archivo `package.json` en un proyecto de React?
Contiene los metadatos del proyecto y la lista de dependencias necesarias para desarrollo y producción.
¿Qué permite hacer el comando `npm start` en un entorno de desarrollo?
Inicia un servidor local con 'live reload' que refresca el navegador automáticamente al guardar cambios.
¿Qué herramienta permite inspeccionar el árbol de componentes y el estado de una app React desde el navegador?
React Developer Tools (extensión de Chrome/Firefox).
¿Cómo se define la 'composición de componentes'?
Es el patrón de crear interfaces complejas combinando y anidando componentes más pequeños y especializados.
En JSX, ¿qué representa la sintaxis `<> ... </>`?
Representa un Fragmento, que permite agrupar elementos sin añadir nodos adicionales innecesarios al DOM real.
¿Qué sucede con el componente `Square` en el tutorial de Tic-Tac-Toe cuando se convierte en un 'componente de función'?
Pasa de ser una clase a una función que recibe props y solo devuelve JSX, eliminando el constructor y el método `render`.
¿Qué utilidad tiene el método `.slice()` al manejar arreglos en el estado de React?
Crea una copia superficial del arreglo original, permitiendo modificar los datos sin mutar directamente el estado previo.
¿Qué es React Native?
Una extensión del ecosistema React que permite compilar aplicaciones móviles nativas para iOS y Android usando JavaScript.
¿Cuál es la mentalidad de React resumida en una frase?
La interfaz de usuario es una función del estado.
¿Qué problema resuelve el enfoque declarativo de React frente a JavaScript 'vanilla'?
Reduce los errores de sincronización entre los datos y la UI que ocurren cuando se manipulan nodos del DOM uno por uno.
¿Qué funcionalidad ofrece el Hook `useLayoutEffect` frente a `useEffect`?
Se ejecuta de forma síncrona después de todas las mutaciones del DOM pero antes de que el navegador pinte, útil para mediciones de diseño.
¿Qué ocurre si intentas llamar a `setState` directamente en el cuerpo de la función de un componente?
Se producirá un bucle infinito de renderizados, ya que cada actualización del estado provoca un nuevo renderizado.
¿Cuál es la función de `export default` al final de un archivo de componente?
Define qué componente es el principal del archivo para que pueda ser importado por otros archivos con cualquier nombre.
Página 1 / 1