holaaaaa

¿React es una librería o un framework? Justificá la diferencia con una razón concreta. libreria, porque ... framework, porque ...

Marcá las opciones correctas: (i) React fue desarrollado por Facebook. (ii) React impone cómo se organizan los proyectos y las convenciones de código. (iii) React Native permite construir aplicaciones móviles. (iv) Angular es una librería igual que React.

c) Mencioná las tres características principales de React según el apunte de cátedra. Permite la utilización de Hooks. "enganchar" el estado de React y el ciclo de vida desde componentes de función (como useState y useEffect), logrando componentes más simples y modulares sin disminuir funcionalidad. Uso de etiquetas Fragment. Permite renderizar múltiples elementos hijos sin tener que crear un elemento padre adicional en el DOM real. HTML limpio, mejorar rendimiento de página y facilitar el trabajo con listas dinámicas. Flujo de datos mediante el objeto props y funciones Callback. comunicacion padre a hijo con propiedades de lectura (props) y de hijo a padre mediante funciones callbacks. ... ...

¿Para qué sirve una lista blanca de dominios al configurar CORS?. Para limitar qué dominios están autorizados a acceder a los recursos del servidor. Para convertir solicitudes GET en solicitudes POST. Para guardar los errores de Express en un archivo. Para ordenar las rutas de un router por nombre.

¿Qué busca lograr una expresión como path.join(__dirname, "public")?. Construir una ruta completa al directorio public relativa al archivo actual. Crear una ruta HTTP nueva llamada __dirname. Combinar dos middlewares de manejo de errores. Enviar el contenido de public como respuesta JSON.

¿Cuál es el método para usar middleware en una aplicación ExpressJS?. app.post(). app.use(). Ninguna de las anteriores. app.get().

¿Qué es un sistema de middleware en el contexto de Express.js?. Un sistema que se ejecuta antes de la solicitud. Un sistema que se ejecuta en paralelo a la solicitud y la respuesta. Un sistema que se ejecuta entre la solicitud y la respuesta. Un sistema que se ejecuta después de la respuesta.

¿Qué es un enrutador montable en el contexto de Express.js?. Un enrutador que se puede ejecutar en una aplicación Express. Un enrutador que se puede eliminar de una aplicación Express. Un enrutador que se puede añadir a una aplicación Express. Un enrutador que se puede detener en una aplicación Express.

¿Qué es un middleware en Express?. Un objeto que contiene información sobre la aplicación. Una función que conecta dos piezas de la aplicación, como un puente en el que fluye la información. Una función que recibe una petición y retorna una respuesta. Una función que maneja errores en la aplicación.

¿Qué es un enrutador modular en el contexto de Express.js?. Un enrutador que se puede copiar de una aplicación a otra. Un enrutador que se puede mover de una parte de la aplicación a otra. Un enrutador que se puede combinar con otros enrutadores. Un enrutador que se puede dividir en múltiples partes.

¿Cuál es la firma típica de un middleware de Express que no es de manejo de errores?. function(req, res, next) { ... }. function(err, next) { ... }. function(router, app, path) { ... }. function(statusCode) { ... }.

¿Qué paquete se usa comúnmente en Express para habilitar CORS?. cors. path. express-router. fs.

¿Cómo se puede permitir que un dominio acceda a recursos de otro dominio en Express.js?. Usando el módulo de http. Usando el módulo de express. Usando el módulo de url. Usando el módulo de cors.

a) ¿Qué es JSX? ¿Es obligatorio para trabajar con React?. JSX es una extensión de la sintaxis de JavaScript que permite escribir una estructura similar a HTML directamente dentro del código de JavaScript. En la arquitectura de React, sirve para describir de forma declarativa cómo debería verse la interfaz de usuario. No, no es obligatorio. Dado que en React todo es JavaScript puro, se puede prescindir de JSX y escribir la interfaz utilizando funciones nativas como React.createElement(). Sin embargo, se adopta como un estándar porque facilita enormemente la lectura, la escritura y la visualización de la estructura jerárquica de los componentes.

const titulo = 'Mozilla Developer Network'; const header = ( <header> <h1>{titulo}</h1> </header> ); b) ¿Qué función cumplen las llaves en {titulo}?. cumplen la función de actuar como un delimitador de escape para evaluar expresiones de JavaScript. le indican a React que no debe renderizar la palabra "titulo" como texto plano, sino que debe leer e interpolar el valor real de la variable titulo (que contiene el string 'Mozilla Developer Network') dentro de la estructura del elemento.

¿Cuál es el propósito de la seguridad web?. Interferir con el funcionamiento de los sitios web. Modificar la información en los sitios web. Permitir el acceso no autorizado a sitios web. Proteger los sitios web de ataques malintencionados.

¿Cuál es el propósito del método toEqual en Jest?. Verificar si un objeto está incluido en un arreglo. Verificar si un objeto es de un cierto tipo de datos. Verificar si dos objetos son iguales. Verificar si un objeto es un arreglo.

¿Por qué no alcanza con autenticar al usuario en un endpoint como /api/cuentas/:id?. Porque también debe verificarse que el recurso solicitado pertenezca al usuario o que tenga permiso para verlo. Porque todos los endpoints con parámetros deben ser públicos. Porque JWT impide consultar bases de datos. Porque Supertest solo puede probar endpoints sin autenticación.

¿Para qué se usa expect(valor).toBe(esperado) en Jest?. Para verificar igualdad exacta, especialmente útil con valores primitivos. Para enviar una solicitud HTTP POST con un cuerpo JSON. Para firmar un token con una clave secreta. Para definir una ruta Express con parámetros.

¿Para qué se usa helmet en una aplicación Express?. Para configurar cabeceras HTTP de seguridad como CSP, HSTS o X-Frame-Options. Para hashear contraseñas con salt. Para ejecutar pruebas unitarias en paralelo. Para crear modelos Sequelize automáticamente.

¿Qué permite hacer .send({ nombre: "Nuevo Usuario" }) en una prueba con Supertest?. Enviar datos en el cuerpo de una solicitud, por ejemplo al probar un endpoint POST. Comparar dos objetos por igualdad profunda. Configurar cabeceras de seguridad con Helmet. Crear un refresh token como cookie httpOnly.

¿Cuál es la técnica de prueba de caja blanca más elemental que se puede realizar?. Pruebas unitarias. Pruebas de humo. Pruebas de aceptación. Pruebas de integración.

¿Qué práctica ayuda a evitar exponer datos sensibles de un usuario desde una API?. Seleccionar explícitamente atributos públicos, por ejemplo id, username y email, y excluir password o campos internos. Responder siempre el modelo completo devuelto por la base de datos. Enviar el hash de contraseña para que el frontend lo valide. Guardar todos los tokens en variables de entorno del frontend.

¿Qué describe mejor un problema de control de acceso roto?. Un usuario accede a recursos o acciones para los que no tiene permiso suficiente. Una prueba que falla porque esperaba un código 200. Una dependencia instalada solo en devDependencies. Un archivo estático servido desde el directorio public.

¿Para qué sirve aplicar express-rate-limit en rutas como login?. Para limitar intentos repetidos y reducir riesgos como fuerza bruta o consumo abusivo de recursos. Para reemplazar el hasheo de contraseñas. Para convertir todas las respuestas en HTML. Para firmar automáticamente refresh tokens.

Marcar opciones correctas. (i) El navegador puede ejecutar JSX directamente. (ii) JSX es más estricto que HTML: las etiquetas como <br> deben cerrarse (<br />). (iii) JSX solo permite texto fijo, no variables.

a) ¿Cómo se llama el proceso que transforma JSX en JavaScript estándar y qué herramienta lo realiza típicamente?. Se llama Transpilación (o compilación de código a código). Es el proceso donde se toma el código escrito en JSX y se traduce a una sintaxis equivalente de JavaScript estándar. Típicamente es realizado por un transpilador o compilador de JavaScript como Babel.

En un proyecto creado con Vite, ¿el programador debe configurar ese proceso manualmente? Justificá. No, el programador no debe configurarlo manualmente. El entorno ya viene preconfigurado de fábrica con todos los plugins y compiladores necesarios. Cada vez que guardamos un archivo .jsx, Vite toma el código, traduce las etiquetas JSX a funciones nativas React.createElement() y envía al navegador únicamente JavaScript puro y estandarizado de forma transparente para el desarrollador. Si.

d) Mencioná una limitación de JSX frente a HTML. Obligatoriedad de retornar un único elemento padre contenedor (origen del uso de la etiqueta Fragment <React.Fragment> o <>). En JavaScript, una instrucción return o una asignación de variable solo puede retornar un único valor u objeto a la vez. Si intentáramos escribir dos etiquetas hermanas sueltas (por ejemplo, <h1> y <p>), el compilador intentaría ejecutar dos funciones React.createElement() simultáneas sin un contenedor, lo cual produce un error de sintaxis nativo de JavaScript. a.

¿Cómo se acceden a los parámetros pasados a un componente funcional en React?. Utilizando la palabra clave this dentro del componente funcional. Utilizando el hook useParams de React. A través de la variable props. Pasando los parámetros como argumentos en la declaración de la función del componente.

¿Cuál es la ventaja de utilizar parámetros en los componentes funcionales de React?. Mejoran el rendimiento de la aplicación. Simplifican la estructura y el mantenimiento de los componentes. Permiten manipular el estado interno del componente. Proporcionan una forma de comunicación entre componentes.

¿Cuál es el archivo que de manera predeterminada renderiza el componente principal de una aplicación en React?. index.js. package.json. index.html. Component.js. App.js.

¿Cuál de las siguientes opciones es una característica clave de React?. Utiliza un enfoque basado en componentes para construir interfaces de usuario. Permite el desarrollo de aplicaciones nativas para dispositivos móviles. Proporciona un lenguaje de programación propio exclusivo de React. Utiliza el modelo de programación orientado a objetos.

¿Cómo se define un evento onClick en un elemento HTML dentro de un componente funcional en React?. Usando la propiedad "mouseClick" en el elemento HTML. Usando la propiedad "handleClick" en el elemento HTML. Usando la propiedad "click" en el elemento HTML. Usando la propiedad "onClick" en el elemento HTML.

¿Para qué sirve un Fragment en React?. Para agrupar varios elementos hijos sin agregar un nodo HTML extra al DOM. Para ejecutar código cuando se desmonta un componente. Para reemplazar todas las props del componente. Para crear una ruta de servidor.

¿Qué devuelve useState(valorInicial)?. Un par con el valor actual del estado y una función para actualizarlo. Un componente HTML ya renderizado. Una prop enviada automáticamente al padre. Un contexto sin valor por defecto.

¿Cómo se pasa una prop desde un componente padre hacia un componente hijo en JSX?. Como atributo del componente hijo, por ejemplo <Saludo nombre="Juan" />. Creando una variable global que el hijo lea automáticamente. Usando this.props dentro de cualquier componente funcional. Modificando directamente el DOM con appendChild.

En React moderno, ¿qué hace una llamada como root.render(<App />)?. Renderiza el componente App dentro del contenedor asociado al root de React. Declara una variable de estado local. Convierte una prop en una variable global. Crea un contexto sin Provider.

En un componente declarado como function Saludo(props), ¿cómo se accede a una prop llamada nombre?. Con props.nombre. Con this.nombre. Con document.nombre. Con useState(nombre) obligatoriamente.

Definí en una oración: ¿qué es el DOM? ¿Qué es el Virtual DOM?. DOM (Document Object Model): Es la representación en memoria (interfaz de programación) que el navegador crea de una página web. Virtual DOM: Es una representación ligera y en memoria de la estructura del DOM real; React utiliza esta copia para realizar comparaciones eficientes antes de decidir qué cambios mínimos deben aplicarse al DOM real, optimizando el rendimiento.

Describí en orden los tres pasos que sigue React cada vez que se actualiza un componente. Renderizado: React ejecuta la función del componente para obtener la nueva representación. Reconciliación (Diffing): React compara este nuevo árbol virtual con el árbol virtual anterior. Identifica exactamente qué nodos han cambiado, cuáles se han agregado y cuáles se han eliminado. Commit (Actualización del DOM real): React aplica al DOM real únicamente las diferencias mínimas detectadas en el paso anterior. Esto evita el alto costo de tener que volver a dibujar o destruir toda la estructura HTML de la página.

const App = () => { const [contador, setContador] = useState(0); return ( <div> <h1>Contador: {contador}</h1> <button onClick={() => setContador(contador + 1)}>Incrementar</button> </div> ); }; Al hacer clic en el botón, ¿qué partes del DOM real modifica React? ¿El <button> se vuelve a crear? Justificá. React solo modifica el nodo de texto específico que contiene el valor de {contador}. Desde la perspectiva de React, la función App se ejecuta nuevamente (se re-renderiza) para calcular cómo debe lucir la interfaz con el valor contador + 1. Sin embargo, esto no implica que se "destruya y cree" toda la estructura visual en el navegador. Gracias al proceso de reconciliación, aunque la función App se ejecute de nuevo en JavaScript, el navegador no recarga la página ni recrea los elementos DOM (como el botón). React solo inyecta el cambio puntual en el nodo del contador. Esto es lo que permite que una SPA (Single Page Application) sea dinámica y rápida: el componente se "crea" lógicamente en la memoria de React, pero el DOM real se mantiene estable y eficiente.

¿Cuál de las siguientes opciones es una forma válida de pasar datos de un componente padre a un componente hijo en React utilizando props?. <ChildComponent>{...data}</ChildComponent>. <ChildComponent [data] />. <ChildComponent data={data} />. <ChildComponent>{data}</ChildComponent>.

¿Cómo se utiliza el hook useParams en React para obtener los parámetros de una URL?. Utilizando el método getParams() dentro del componente funcional. Pasando los parámetros directamente al componente como props. Importando el hook y llamando a la función useParams() en el componente. Accediendo a los parámetros a través de la variable params.

¿Cuál es la forma correcta de utilizar estilos CSS en un componente de React utilizando el enfoque de estilos en línea?. <div className="myStyle">Contenido</div>. <div classStyle="myStyle">Contenido</div>. <div style={myStyle}>Contenido</div>. <div styleClass="myStyle">Contenido</div>. <div style="myStyle">Contenido</div>.

¿Cuál afirmación sobre Context es más precisa?. Debe usarse para cualquier valor local, incluso si solo lo usa un input. Puede evitar prop drilling en datos compartidos, pero no reemplaza automáticamente toda estrategia de estado. Solo funciona con componentes de clase y rutas anidadas. Sirve exclusivamente para navegar entre páginas.

¿Cuándo es apropiado usar el hook `useNavigate`?. Cuando un componente necesita navegar por código después de una acción o condición. Cuando se quiere pasar datos de padre a hijo mediante props. Cuando se necesita leer el valor de un input no controlado. Cuando se quiere crear un contexto global para temas visuales.

¿Para qué se suele definir una ruta con `path="*"` en React Router?. Para convertir una ruta en un formulario controlado. Para forzar que el navegador haga una petición HTTP tradicional. Para indicar que todas las rutas deben tener parámetros obligatorios. Para mostrar una vista de error o página no encontrada cuando ninguna otra ruta coincide.

¿Qué permite hacer el hook `useContext`?. Ejecutar una redirección programática a otra URL. Convertir un input no controlado en una ruta index. Definir una ruta dinámica con uno o más parámetros. Consumir el valor actual de un contexto desde un componente funcional.

¿Cuál de las siguientes opciones describe mejor un componente funcional en React?. Un componente que solo se utiliza para el diseño y no para la lógica de la aplicación. Un componente que no requiere el uso de funciones. Un componente que utiliza una función en lugar de una clase para su definición. Un componente que no tiene estado interno ni ciclo de vida.

¿Cuál es el propósito principal del hook useParams en React?. Obtener los parámetros de una URL en React. Manejar el estado interno de un componente funcional. Controlar el ciclo de vida de un componente en React. Acceder a los métodos y propiedades de un componente de clase.

Si una ruta se define como `/productos/:categoria/:id`, ¿qué puede devolver `useParams()` dentro del componente?. Un array con todos los componentes definidos dentro de `Routes`. Un objeto con propiedades como `categoria` e `id`, tomadas de la URL actual. El valor actual de todos los inputs controlados del formulario. Un booleano que indica si la ruta existe.

¿Para qué podría usarse un interceptor de solicitud en Axios?. Para convertir automáticamente GET en DELETE. Para registrar un campo obligatorio en un formulario. Para agregar un encabezado de autenticación a las solicitudes antes de enviarlas. Para renderizar una página 404 cuando no existe una ruta.

¿Cuál de las siguientes opciones se utiliza en react-hook-form para validar un campo que es requerido?. mandatory(). required(). max(). min(). pattern().

¿Qué responsabilidad tiene un servicio como `postService` en una aplicación que consume `/posts`?. Definir cuál componente se muestra para cada ruta de la SPA. Encapsular funciones como obtener, crear, actualizar y eliminar posts mediante Axios. Renderizar directamente la lista completa de elementos en el DOM. Validar todos los formularios mediante expresiones regulares.

¿Cuál de los siguientes métodos se utiliza para definir una regla de validación en react-hook-form?. validate(). rules(). required(). pattern. exception.

¿Cuál de los siguientes métodos de Axios se utiliza para realizar una solicitud POST?. axios.get(). axios.fetch(). axios.post(). axios.put(). axios.delete().

¿Qué indica `formState.isDirty` en React Hook Form?. Que el usuario modificó valores respecto de los valores iniciales del formulario. Que la última solicitud HTTP terminó con error de servidor. Que el formulario fue convertido en una instancia Axios. Que todos los campos fueron enviados mediante POST.

¿Qué devuelve o proporciona el hook `useForm` en React Hook Form?. Una instancia de Axios configurada con `baseURL`. Funciones y objetos para registrar campos, validar, manejar el envío y consultar el estado del formulario. Una lista automática de componentes hijos. Los parámetros dinámicos de la URL actual.

¿Para qué se usa la regla `pattern` en React Hook Form?. Para definir la URL base de una API. Para cancelar una solicitud HTTP en curso. Para validar que el valor de un campo coincida con una expresión regular. Para crear un componente visual reutilizable.

¿Cuál es el objetivo principal de extraer las llamadas HTTP a un archivo de servicio en una aplicación React?. Evitar que el componente pueda tener estado local. Reemplazar los métodos HTTP por rutas de React Router. Convertir automáticamente todos los inputs en no controlados. Centralizar y reutilizar la lógica de acceso a la API, separándola de la vista.

¿Qué método de Axios se utiliza para enviar una solicitud DELETE a una API REST en React?. axios.post(url). axios.request("DELETE", url). axios.delete(url). axios.send("DELETE", url). axios.get(url).

Un usuario debería poder consultar productos, pero la API responde 403. El token es válido. ¿Qué causa es compatible con ese síntoma?. El token no contiene el rol esperado o el backend está leyendo los roles desde una claim incorrecta. El payload del token está cifrado y el backend no puede leerlo nunca. El usuario no está autenticado y por eso siempre corresponde 403. La respuesta 403 indica exclusivamente un error de CORS.

¿Cuál es una advertencia válida sobre el almacenamiento de tokens en el navegador?. Guardar tokens sensibles en localStorage puede ser riesgoso si la aplicación es vulnerable a XSS. localStorage cifra automáticamente todos los tokens y elimina cualquier riesgo. El lugar de almacenamiento no importa porque el payload nunca se puede leer. El token debe imprimirse completo en consola para que React lo proteja.

¿Qué uso seguro puede hacer el backend de la información publicada por el proveedor de identidad?. Permitir cualquier audience porque todas las APIs usan el mismo usuario. Copiar el access token en logs para poder reutilizarlo ante errores. Validar que el issuer sea el esperado y usar las claves públicas publicadas para verificar la firma del token. Omitir la validación de expiración si el token proviene de un frontend conocido.

¿Cuál situación corresponde mejor a una respuesta `403 Forbidden`?. El usuario está autenticado, pero no tiene permiso o rol suficiente para ejecutar la acción solicitada. La URL no existe en el servidor. El token no fue enviado o no pudo validarse. El frontend todavía no compiló el CSS.

Antes de llamar a la API, el frontend intenta renovar el token si está por vencer. ¿Cuál es el objetivo principal de esa lógica?. Guardar permanentemente el token en todas las URLs visitadas. Reducir fallos por expiración y enviar al backend un access token vigente. Evitar que el backend valide firma e issuer. Convertir un usuario lector en administrador.

Una ruta de React solo debe mostrarse a usuarios autenticados con rol `admin`. ¿Qué afirmación es la más correcta?. Si React oculta el botón, el backend puede dejar el endpoint público. Un usuario sin rol `admin` debería recibir permisos si conoce la URL exacta. La autorización queda resuelta solo con `useNavigate`. El frontend puede redirigir u ocultar la pantalla, pero el backend también debe validar el rol en cada endpoint protegido.

¿Cuál es el uso esperado de un access token en una llamada desde el frontend hacia una API protegida?. Mostrarlo completo en pantalla para que el usuario lo copie. Usarlo como reemplazo de todas las validaciones de backend. Enviarlo al backend como bearer token para solicitar acceso a recursos protegidos. Enviar siempre el ID token al backend para autorizar operaciones de escritura.

¿Cuál situación corresponde mejor a una respuesta `401 Unauthorized`?. El usuario está autenticado, pero no tiene el rol necesario para borrar un recurso. La validación de un campo obligatorio falló por estar vacío. La API no puede autenticar la sesión porque el token falta, es inválido, venció o está mal enviado. La base de datos no tiene suficiente espacio en disco.

¿Qué permite comprobar la firma de un JWT cuando se valida correctamente?. Que el payload queda oculto para todos los clientes. Que el token puede usarse aunque esté vencido. Que el token fue emitido por quien posee la clave correspondiente y que su contenido no fue alterado. Que el usuario siempre tiene permiso para cualquier recurso de la API.

Una API responde `401` o `403` ante una llamada protegida. ¿Qué comportamiento de frontend es más razonable?. Ante ambos casos reintentar infinitamente sin mostrar error. Ante 403 enviar el token por query string para forzar el acceso. Ignorar ambos códigos porque solo importan los errores de JavaScript. Ante 401 renovar token o pedir login; ante 403 mostrar que el usuario no tiene permiso para esa acción.

Completá los tres comandos para crear y ejecutar un proyecto React con Vite: npm ________ vite@latest npm ________ npm run ________. npm create vite@latest. npm install. npm run dev.

b) Asociá cada archivo con su responsabilidad: index.html. src/main.jsx. src/App.jsx. package.json.

c) Mencioná una razón por la que la cátedra usa Vite en lugar de create-react-app. Vite proporciona un rendimiento notablemente superior. Al no estar acoplado de forma fija a configuraciones globales complejas y pesadas, Vite automatiza todo el flujo de transpilación en segundo plano y en tiempo de ejecución de manera mucho más ligera. Esto optimiza el entorno de desarrollo y agiliza el procesamiento de los archivos .jsx al momento de traducirlos a JavaScript estándar. No se.

El siguiente componente tiene tres errores que impiden que compile o que generan advertencias. Identificá cada uno, explicá por qué es un error function Tarjeta() { return ( <h2 class="titulo">Perfil del estudiante</h2> <p>Cursando DDS<br></p> ); }. Falta de un elemento padre contenedor (Error de renderizado): React exige que cada componente retorne un único elemento padre que envuelva a toda la estructura. En tu código, los elementos <h2> y <p> son hermanos y están "sueltos" dentro del return. Uso de la propiedad class (Conflicto con palabra reservada): En JSX, las etiquetas se parecen a HTML, pero siguen las reglas de JavaScript. class es una palabra reservada del lenguaje JavaScript para definir clases. Al escribir class="titulo", React interpreta erróneamente que estás intentando definir una clase de JS dentro de la etiqueta. Etiqueta <br> no cerrada (Incumplimiento de rigurosidad XML/JSX): JSX es mucho más estricto que el HTML tradicional. Mientras que en HTML un <br> puede quedar abierto, en JSX todas las etiquetas deben cerrarse obligatoriamente.

En JSX los estilos en línea se escriben así: style={{ backgroundColor: 'red', fontSize: '16px' }} . Explicá: ¿por qué hay dos pares de llaves? ¿Por qué backgroundColor y no background-color ?. Por qué hay dos pares de llaves ({{ ... }}): Las llaves externas{ ... } Le indican a React que debe dejar de leer el código como si fuera HTML y pasar a evaluar una expresión activa de JavaScript. Por qué hay dos pares de llaves ({{ ... }}):Las llaves internas { backgroundColor: 'red' ... } representan la declaración literal de un objeto estándar de JavaScript. Está pasando un objeto de JS como valor del atributo style. Por qué backgroundColor y no background-color: Como en React todo es JavaScript puro, las propiedades de los estilos dentro del objeto no pueden usar el guion medio (-), ya que en JavaScript el guion representa el operador aritmético de resta y provocaría un error de sintaxis. JSX exige escribir todas las propiedades de CSS utilizando la nomenclatura camelCase. a.

b) Completá la asignación de clase condicional: si isActive es verdadero la clase debe ser "active-class" , si no "inactive-class" : <div className={ ________________________ }>. className={isActive ? "active-class" : "inactive-class"}. nose.

¿Cómo se importa un archivo estilos.css dentro de un componente?. import './estilos.css';. nose.

¿Qué problema resuelve un fragment en React?. resuelve el problema de tener que agregar elementos padres adicionales e innecesarios (como un <div>) en el DOM real cuando un componente necesita renderizar múltiples elementos hijos hermanos. nose.

Marca las opciones correctas. (i) Un fragment agrega un nodo <div> adicional al DOM. (ii) Usar fragments puede mejorar el rendimiento al reducir nodos innecesarios. (iii) React exige un único elemento padre por componente, y el fragment permite cumplirlo sin ensuciar el DOM.

import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } a) ¿Qué devuelve exactamente useState(0) ? ¿Cómo se llama la sintaxis const [count, setCount] = ... y de dónde viene (¿es de React o de JavaScript?)?. Devuelve un par de valores estructurados en un arreglo de dos elementos: El primer elemento (count) es la variable que almacena el valor de estado actual. Devuelve un par de valores estructurados en un arreglo de dos elementos: El segundo elemento (setCount) es una función actualizadora que nos permite modificar dicho estado y le avisa a React que debe re-renderizar el componente. El argumento (0) define el valor inicial de esa variable. Se llama Desestructuración de Arreglos. Viene de JavaScript puro.

¿Qué muestra el <p> después de hacer clic tres veces en el botón?. Muestra exactamente el texto: You clicked 3 times. a.

c) Un compañero propone reemplazar setCount(count + 1) por count++. ¿Funciona? Explicá por qué con precisión. No, no funciona. Provocará un error y la interfaz visual no se actualizará jamás. Violación de Inmutabilidad: En React, el estado es de solo lectura. Falta de aviso al ciclo de vida: Modificar la variable directamente no dispara el proceso de re-renderizado. La única manera de notificar a React que el estado cambió es invocando de manera explícita a la función actualizadora setCount(). nose.

Enunciá las reglas para trabajar con hooks (al menos dos). Solo llamar a los hooks en el nivel superior (Top Level). Solo llamar a los hooks desde funciones de React.

¿Qué está mal en este código? function Perfil({ mostrarEdad }) { if (mostrarEdad) { const [edad, setEdad] = useState(0); } const [nombre, setNombre] = useState(""); // ... }. Al incluir el hook useState dentro de un bloque if, su ejecución queda sujeta a una condición lógica que puede variar durante la vida del componente. Si mostrarEdad es false en el primer render, el hook no se ejecuta. Si en un render posterior mostrarEdad cambia a true, el hook sí se ejecuta. Esto rompe la estructura interna de React, ya que el motor de la librería espera que la secuencia de hooks sea exactamente idéntica en cada ciclo de actualización. a.

¿Por qué React exige que los hooks se llamen siempre en el mismo orden en cada render?. React asocia el estado con el orden de aparición de los hooks en el componente. La integridad del orden es la única forma que tiene React para saber qué dato pertenece a qué llamada de useState. a.

Asociá cada forma de useEffect con el momento en que se ejecuta su función y con el método equivalente en componentes de clase. useEffect(() => {...}, []). useEffect(() => {...}). useEffect(() => {...}, [empresa]). useEffect(() => { return () => {...}; }, []).

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2> } </div> ); } a) ¿Qué renderiza el componente si se invoca con unreadMessages={['React', 'Re: React', 'Re:Re: React']} ?. Al evaluar la expresión, unreadMessages.length es igual a 3. Como 3 > 0 da como resultado el booleano true, el operador lógico && (AND) continúa evaluando y retorna el segundo operando (el elemento JSX <p>), inyectando el número 3 en la interfaz. nose.

const products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 }, ]; const listItems = products.map(product => <li key={product.id}>{product.title}</li> ); a) ¿Para qué usa React el atributo key en los elementos de una lista?. para darle a cada elemento del arreglo una identidad única y estable en el árbol de componentes. nose.

const products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 }, ]; const listItems = products.map(product => <li key={product.id}>{product.title}</li> ); b) ¿De dónde conviene que provenga la key ? ¿Qué condición debe cumplir?. Conviene que provenga directamente de los datos que se están listando, idealmente de un identificador único que ya exista en la estructura del objeto (por ejemplo, el campo id proveniente de las tablas de la base de datos). Debe cumplir con dos condiciones obligatorias: Ser única entre sus hermanos: Dos elementos de la misma lista no pueden compartir jamás el mismo valor de key. Debe cumplir con dos condiciones obligatorias: Ser estable en el tiempo: El valor asignado a la key de un elemento no debe cambiar entre distintas renderizaciones del componente (no se deben usar números aleatorios generados en el return).

Un compañero propone usar el índice del map como key (products.map((product, index) => ...)). ¿Qué riesgo tiene esa decisión si la lista luego se reordena, o se insertan/eliminan elementos?. El riesgo crítico es que se pueden producir errores graves de renderizado, inconsistencias visuales en la interfaz y fallas en el estado de los componentes hijos. El índice del map (0, 1, 2...) no está atado a la identidad del dato, sino a su posición física momentánea en el arreglo. Si la lista se reordena (por ejemplo, si se ordena alfabéticamente o se elimina el primer elemento), el objeto que antes ocupaba la posición 1 pasará a ocupar la posición 0. nose.

export default function MyApp() { return ( <div> <h1>Contadores</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} veces</button>; } a) Si el usuario hace 3 clics en el primer botón, ¿qué muestra cada botón? ¿Por qué?. Primer botón muestra: Clicked 3 veces. Segundo botón muestra: Clicked 0 veces. nose.

Se pide que ambos botones compartan el mismo contador y se actualicen juntos. ¿Cómo se llama la técnica que resuelve esto y en qué consiste?. Levantar el estado hacia arriba (Lifting state up). Consiste en mover el estado local desde los componentes hijos (MyButton) hacia el componente padre común más cercano que los contiene (en este caso, MyApp). nosw.

Qué diferencia hay entre el ruteo del lado del servidor (páginas web tradicionales) y el ruteo del lado del cliente?. Ruteo del lado del servidor: En las páginas web tradicionales, el enrutamiento se realiza enteramente en el servidor. Cada vez que el usuario hace click en un enlace, el navegador envía una solicitud HTTP (request) al servidor, el cual procesa la petición y devuelve un documento HTML completamente nuevo junto con sus recursos, provocando que toda la página se recargue y parpadee. Ruteo del lado del cliente: Permite que la propia aplicación que corre en el navegador (browser) actualice la URL directamente en la barra de direcciones sin necesidad de hacer una solicitud de página nueva al servidor. En su lugar, intercepta la navegación y renderiza inmediatamente el componente correspondiente de la interfaz de usuario en memoria.

b) Mencioná dos ventajas del ruteo del lado del cliente. Permite experiencias de usuario más rápidas: Esto se debe a que el navegador no necesita solicitar un documento completamente nuevo al servidor. Permite experiencias de usuario más dinámicas: Al no destruirse la interfaz entre cambios de página, es posible aplicar transiciones y animaciones fluidas sobre los elementos visuales.

c) ¿Qué librería usa la cátedra para ruteo en React y con qué comando se instala?. Librería utilizada: La cátedra utiliza la librería React Router. Comando de instalación: npm install react-router-dom.

import { ____________, Routes, Route } from "react-router-dom"; function App() { return ( <____________> <Routes> <Route path="____" element={<Inicio />} /> <Route path="________" element={<Acerca />} /> <Route path="____" element={<Error404 />} /> </Routes> </____________> ); } b) ¿Qué hace el componente Routes cuando varias rutas podrían coincidir?. Cuando varias rutas podrían coincidir con la URL actual, Routes selecciona y renderiza únicamente la mejor coincidencia ("best match") basándose en la especificidad de la ruta, en lugar de hacerlo simplemente por el orden jerárquico en el que fueron escritas en el archivo. nose.

import { ____________, Routes, Route } from "react-router-dom"; function App() { return ( <____________> <Routes> <Route path="____" element={<Inicio />} /> <Route path="________" element={<Acerca />} /> <Route path="____" element={<Error404 />} /> </Routes> </____________> ); } Para navegar a /acerca desde el menú, ¿por qué se usa <Link> en lugar de <a>?. Se debe usar el componente <Link to="/acerca"> porque está diseñado específicamente para realizar ruteo del lado del cliente. El componente <Link> intercepta el click del usuario en el navegador y detiene la recarga de la página. Modifica la URL de la barra de direcciones de forma inmediata y le avisa a React Router que debe intercambiar el componente visual. nose.

Se define la ruta: <Route path="/productos/:categoria/:id" element={<Producto />} /> a) ¿Qué indican los segmentos con dos puntos ( :categoria , :id )?. Los segmentos precedidos por los dos puntos (:) indican parámetros dinámicos (o variables de ruta) en la URL. nose.

Se define la ruta: <Route path="/productos/:categoria/:id" element={<Producto />} /> El usuario navega a /productos/electronica/1 . Dentro de Producto , ¿qué devuelve exactamente la llamada useParams() ?. Devuelve exactamente un objeto de JavaScript cuyas claves son los nombres de los parámetros dinámicos definidos en la ruta y cuyos valores son los strings extraídos directamente de la URL actual. nose.

Asociá cada herramienta de React Router con su caso de uso: <Link to="...">. useNavigate(). <Navigate to="..." />.

En Maps("/404", { replace: true }), ¿qué efecto tiene replace: true?. El parámetro { replace: true } le indica a React Router que debe reemplazar la entrada actual en el historial de navegación del navegador en lugar de agregar una nueva entrada encima. nose.

Según el apunte, ¿cuál es el enfoque recomendado para la navegación programática en React Router v6?. El enfoque recomendado es la utilización del hook useNavigate(), el cual sustituye por completo a los antiguos mecanismos de versiones previas (como la propiedad history). nose.

¿Qué problema resuelve Context respecto del paso de props? Nombrá el problema y explicalo. Resuelve el problema denominado Prop Drilling. Este problema ocurre cuando los datos de la aplicación deben ser pasados de forma manual a través de múltiples niveles de componentes intermedios (padres a hijos, nietos, etc.) con el único fin de hacerla llegar a un componente descendiente ubicado en lo profundo del árbol. noase.

Según el apunte, ¿qué tipo de datos conviene compartir por Context? ¿Por qué debe aplicarse "con moderación"?. Qué datos conviene compartir: Conviene compartir datos que se consideran "globales" para un árbol de componentes de React. Por qué debe aplicarse "con moderación": porque la implementación de Context dificulta la reutilización de los componentes. Al acoplar un componente hijo a un contexto específico mediante useContext, ese componente pierde su autonomía y ya no puede ser usado de forma aislada en otras partes de la aplicación donde ese proveedor de datos no esté presente.

Definición de Componente Controlado y No Controlado. Componente Controlado: Es aquel donde el comportamiento y los datos del formulario son manejados por el propio ciclo de vida de React. La fuente de verdad es el estado local de React (useState). Componente No Controlado: Es aquel donde los datos del formulario son manejados directamente por la estructura nativa del navegador web. La fuente de verdad es el propio DOM (Document Object Model).

Tabla comparativa completa. Fuente de verdad. Acceso al valor. Validación.

Recomendación de React y Justificación según el apunte. Cuál recomienda por defecto y por qué: React recomienda tradicionalmente los componentes controlados. Permiten tener un control absoluto sobre el flujo de datos. En qué caso se justifica el otro (No Controlado): Se justifica principalmente en formularios muy extensos o complejos donde el rendimiento (performance) sea crítico.

a) ¿Qué es Axios y para qué se utiliza en un proyecto React?. Qué es: Axios es una librería cliente HTTP basada en promesas para JavaScript. Para qué se utiliza: En un proyecto React, se utiliza para actuar como puente de comunicación con el backend. Permite realizar solicitudes de red de forma asíncrona hacia una API externa para consultar, enviar, modificar o eliminar datos, abstrayendo la complejidad de las peticiones HTTP y facilitando el manejo de las respuestas del servidor dentro del ciclo de vida de los componentes.

abla completa de mapeo CRUD (Recurso: articulos). axios.get(url). axios.post(url, data). axios.put(url, data). axios.delete(url).

Mencioná dos ventajas de Axios frente a la API Fetch nativa. Transformación automática de datos JSON. Soporte nativo para Interceptores.

¿Por qué la cátedra recomienda poner la llamada a Axios en un servicio separado en lugar de escribirla dentro del componente?. para aplicar el principio arquitectónico de Separación de Responsabilidades y lograr el desacoplamiento de la aplicación. nose.

¿Por qué el useEffect lleva [] como segundo argumento? ¿Qué pasaría si se omitiera, considerando que adentro se hace setArticulos ?. Por qué lleva []: El array de dependencias vacío le indica de forma declarativa a React que este efecto no depende de ninguna variable de estado local o propiedad externa. Qué pasaría si se omitiera: Si se omite por completo el segundo argumento, el useEffect se ejecutará de forma obligatoria en cada ciclo de renderizado. Esto provocaría un bucle infinito de peticiones de red que colapsaría el navegador del cliente y saturaría el servidor.

Describí qué ve el usuario al cargar la página, en orden, y qué evento provoca el cambio. 1. Primer Render (Montaje): El usuario ve en su pantalla únicamente el texto: Cargando datos.... 2. Disparo del Efecto: el useEffect se activa (debido a que se completó el montaje) y dispara la función asíncrona que invoca a articulosService.BuscarTodos(). La interfaz sigue mostrando el mensaje de carga mientras la petición viaja por la red. 3. El Evento de Cambio: El evento que corta la espera es la resolución exitosa de la promesa de Axios. 4. Segundo Render (Actualización): l usuario ve reflejado en pantalla el listado real de artículos renderizados con el map.

¿Qué error ocurriría si se quitara el renderizado condicional y se hiciera data.map(...) directamente?. Ocurriría un error catastrófico de JavaScript en tiempo de ejecución, provocando que la aplicación se rompa por completo y muestre una pantalla en blanco. nose.

Qué es un interceptor de Axios? ¿Qué diferencia hay entre un interceptor de solicitud y uno de respuesta? Casos de uso. Qué es un interceptor: Es una función global provista por la librería Axios que actúa como un "middleware" del lado del cliente. Permite interceptar, inspeccionar o modificar las peticiones HTTP o las respuestas del servidor de manera automática. Diferencia y Casos de uso: Interceptor de Solicitud (request): Se ejecuta antes de que la petición HTTP sea enviada al servidor. Su función es alterar la configuración de la salida. Diferencia y Casos de uso: Interceptor de Respuesta (response): Se ejecuta inmediatamente después de que la respuesta del servidor aterriza en el navegador, pero antes de entregarle los datos al componente de React.

El ejemplo guarda el token en localStorage . Un compañero asegura que "es totalmente seguro porque el navegador lo protege". ¿Qué le observás? Relacioná con una vulnerabilidad vista en desarrollo seguro. La afirmación de tu compañero es falsa y representa un grave error conceptual en seguridad informática. El localStorage no es un entorno blindado; cualquier script de JavaScript que se ejecute en el mismo dominio tiene acceso irrestricto de lectura y escritura a todos los datos guardados en él. Almacenar tokens JWT en el localStorage expone de forma directa la sesión del usuario a la vulnerabilidad conocida como XSS (Cross-Site Scripting / Inyección de Scripts Sitios Cruzados). Si un atacante logra explotar una falla de sanitización en tu frontend e inyecta un fragmento de código JavaScript malicioso. Ese script malicioso se ejecutará en el navegador del operario. Al estar el token en el localStorage, el script atacante puede leer la cadena del JWT mediante una simple instrucción localStorage.getItem('token') y enviarla de forma remota a un servidor externo controlado por el hacker, logrando el robo de identidad digital y el secuestro completo de la sesión de mantenimiento. Cookies seguras con los atributos httpOnly y secure activados. nose.

Qué problema resuelve la librería React Hook Form? Mencioná dos ventajas. Resuelve el problema de rendimiento (performance) y sobrecarga de código provocado por los formularios controlados tradicionales en React. Dos ventajas fundamentales según el apunte: Optimización del rendimiento: Al utilizar referencias directas al DOM (refs), el componente del formulario no se vuelve a ejecutar enteros con cada letra que el usuario escribe. Dos ventajas fundamentales según el apunte: Reducción drástica del código escrito (boilerplate): Automatiza la validación y el seguimiento de los campos en una sola línea limpia.

Asociación de piezas con su responsabilidad. useForm. register. handleSubmit. formState.errors.

En <input {...register('nombre')} />, ¿qué significan los tres puntos? ¿Qué hacen exactamente?. Qué significan los tres puntos (...): Representan el operador de propagación (o spread operator) de JavaScript nativo (ES6). La función register('nombre') devuelve un objeto que contiene cuatro atributos estándar de JavaScript para el manejo de formularios: name, onChange, onBlur y ref Inyecta dinámicamente esos cuatro atributos directamente como propiedades (props) dentro de la etiqueta <input>. nose.

Asociación de cada propiedad de formState con su significado. isDirty. isValid. isSubmitting. errors.

Al cargar el formulario por primera vez (campos vacíos, con reglas required ), ¿el botón está habilitado o deshabilitado? ¿Por qué?. El botón se encuentra deshabilitado. Al cargarse el formulario por primera vez, los campos están completamente vacíos, pero contienen la regla de validación required (obligatorio). nose.

Flujo del botón durante el envío asíncrono (Los 3 segundos de espera). ¿Por qué esto mejora la experiencia y la robustez del sistema (Defensa en Profundidad)? Evita el envío duplicado de datos (Peticiones Concurrentes): Al bloquear físicamente el botón apenas se inicia el proceso asíncrono, se impide de forma absoluta que un operario ansioso o con problemas de latencia en la red haga click múltiples veces seguidas sobre "Enviar". ¿Por qué esto mejora la experiencia y la robustez del sistema (Defensa en Profundidad)? Brinda Feedback Visual Inmediato al Usuario: En las Single Page Applications (SPA), los procesos de red ocurren en segundo plano. Si el texto no cambiara, el operario pensaría que el sistema no reaccionó a su acción, lo que genera confusión.