Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:cursos:desarrollo_web_react_18 [2024/02/29 16:56] – [Temario] tempwin
+++ informatica:programacion:cursos:desarrollo_web_react_18 [2024/03/25 10:29] (actual) – [Cuestiones adicionales y avanzadas] tempwin
@@ Línea 32: / Línea 32: @@
   * Módulo 3: [[informatica:programacion:cursos:desarrollo_web_react_18:logica_de_componentes|Lógica de componentes]]
   * Módulo 4: [[informatica:programacion:cursos:desarrollo_web_react_18:gestion_eventos_manejo_estado|Gestión de eventos y manejo del estado]]
-  * MÓDULO 5: El contenedor de estado Redux
+  * Módulo 5: [[informatica:programacion:cursos:desarrollo_web_react_18:contenedor_estado_redux|El contenedor de estado Redux]]
-  * MÓDULO 6: Comunicación e interacción con el servidor
+  * Módulo 6: [[informatica:programacion:cursos:desarrollo_web_react_18:comunicacion_interaccion_servidor|Comunicación e interacción con el servidor]]
-  * MÓDULO 7: Cuestiones adicionales y avanzadas
+  * Módulo 7: [[informatica:programacion:cursos:desarrollo_web_react_18:cuestiones_adicionales_avanzadas|Cuestiones adicionales y avanzadas]]
-  * MÓDULO 8: Despliegue, SSR, aplicaciones móviles
+  * Módulo 8: [[informatica:programacion:cursos:desarrollo_web_react_18:despliegue_ssr_aplicaciones_moviles|Despliegue, SSR, aplicaciones móviles]]
 ===== Tests =====
@@ Línea 75: / Línea 75: @@
   * ''%%<a class="resaltado">Ejemplo</a>%%''
   * ''%%<a class="resaltado" text="Ejemplo" />%%''
+==== Redux y Comunicaciones ====
+**¿Qué es un reducer?**
+  * Un objeto JavaScript que describe un evento que debe modificar el estado de la aplicación
+  * Una función que toma el estado actual y lo actualiza con la nueva información (**correcto**)
+  * Un objeto que almacena todo el estado global
+  * Una sección que implementa el comportamiento y la gestión del estado de una parte de la aplicación
+**¿Cuál es el propósito de una operación mutation en una API slice definida con RTK Query?**
+  * Exclusivamente consultar datos del servidor
+  * Consultar o modificar datos en el servidor
+  * Exclusivamente modificar datos en el servidor (**correcto**)
+  * Enviar consultas SQL a una base de datos
+**¿Cuáles de las siguientes operaciones puede efectuarse dentro de un thunk?**
+  * Consultar cualquier dato del almacén (**correcto**)
+  * Despachar otras acciones (**correcto**)
+  * Modificar el estado interno de un componente
+  * Modificar el estado del almacén
+**Si en la //slice// con nombre "tareas" creamos un reducer llamado ''eliminada'', ¿cuál será el tipo de la acción correspondiente?**
+  * "tareas/eliminada" (**correcto**)
+  * "tareas.eliminada"
+  * "eliminada/tareas"
+  * "eliminada.tareas"
+**¿En qué lugar del código podemos definir el estilo de un elemento cuando utilizamos Tailwind CSS?**
+  * En las clases CSS (propiedad ''className'') (**correcto**)
+  * En funciones gestoras de eventos
+  * En las propiedades del componente
+  * Como un objeto denominado ''styles'' en el fichero del componente
+==== Cuestiones adicionales y avanzadas ====
+**En React Router, ¿cómo llamamos a la función que se ejecuta al enviar un formulario desde una ruta?**
+  * loader
+  * action (**correcto**)
+  * fetch
+  * form
+**¿Para qué sirve el componente ''<Outlet />'' de React Router?**
+  * Para mostrar el componente correspondiente a la ruta anidada dentro del de la ruta ascendiente (**correcto**)
+  * Para mostrar elementos comunes a varias páginas como barras de menú o paneles laterales
+  * Para mostrar páginas de error cuando alguno de los componentes no se pueda cargar
+  * Para enviar formularios sin refrescar la página
+**¿Podemos mostrar alguna indicación en la página cuando React Router está cargando una nueva ruta?**
+  * Sí, el hook ''useNavigation'' nos da un objeto con información del estado de carga que podemos utilizar (**correcto**)
+  * No, React Router no nos proporciona esa información
+  * Sí, React Router añade transiciones entre páginas automáticamente
+  * No, tendríamos que incluir una biblioteca adicional para detectar los cambios entre rutas
+**¿Qué funcionalidad incorpora React Router?**
+  * Navegación por diferentes rutas correspondientes a diferentes elementos que se pueden anidar (**correcto**)
+  * Almacenamiento de datos persistente en el navegador
+  * Recuperación de datos desde un servidor
+  * Validación de formularios
+**¿Qué elemento usarías para forzar la navegación a otra ruta sin necesidad de interacción por parte del usuario?**
+  * ''<a>''
+  * ''<Link>''
+  * ''<Button>''
+  * ''<Navigate>'' (**correcto**)
+==== Evaluación final ====
+**En Next.js, ¿qué archivo define el componente a mostrar cuando se accede a una ruta?**
+  * ''page.js'' (**correcto**)
+  * ''route.js''
+  * ''main.js''
+  * ''index.html''
+**Entre las siguientes respuestas, elige la ruta de React Router que coincidiría con la URL ''/tableros/103/editar''.**
+  * ''tableros/:id/editar'' (**correcto**)
+  * ''tableros/.../editar''
+  * ''tableros/''
+  * ''tableros.$id.editar''
+**¿Cuáles de las siguientes son etapas del ciclo de vida de un componente?**
+  * Montaje o primer renderizado (**correcto**)
+  * Actualización (**correcto**)
+  * Desmontaje (**correcto**)
+  * Carga de datos externos
+**¿Qué es un componente en el contexto de React?**
+  * Una forma de encapsular elementos de interfaz (**correcto**)
+  * Una clase JavaScript
+  * Un objeto que se comunica con un servidor
+  * Cada página web que el usuario visita
+**¿Para qué sirve el modo estricto de React?**
+  * Para detectar errores de programación en componentes durante el desarrollo (**correcto**)
+  * Acelera la ejecución del código React en producción
+  * Facilita el despliegue de la aplicación
+  * No podemos programar en React sin el modo estricto
+**¿En qué consiste una acción de Redux?**
+  * Un objeto con un tipo (//type//) y un contenido (//payload//) (**correcto**)
+  * Un array de cadenas de caracteres
+  * Un número indicando el código de la acción que ha tenido lugar
+  * Una función que modifica el estado del almacén
+**¿Cuáles de los siguientes son parámetros de la función ''createElement()''?**
+  * El tipo de elemento (**correcto**)
+  * Las propiedades que recibe (**correcto**)
+  * Los elementos descendientes (**correcto**)
+  * Los elementos ascendientes
+**¿Qué es React-Redux?**
+  * La interfaz entre el contenedor de estado Redux y la biblioteca React (**correcto**)
+  * Una biblioteca oficial de React para gestionar el estado global
+  * Una biblioteca JavaScript para añadir estilo a la aplicación
+  * Una biblioteca para desarrollo de interfaces web
+**¿Qué parámetro recibe una función gestora de eventos?**
+  * ''event'', un objeto que representa el evento (**correcto**)
+  * Ningún parámetro
+  * Una referencia al nodo HTML que lo ha desencadenado
+  * Los parámetros que pasemos desde la definición del evento en el elemento
+**¿Cuántos parámetros recibe un componente?**
+  * Uno, el objeto de propiedades (**correcto**)
+  * Ninguno
+  * Tantos como propiedades queramos proporcionar
+  * Dos, propiedades y nodos hijos
+===== Consejos =====
+A medida que desarrollas aplicaciones más grandes y complejas en React, es importante asegurarte de que el rendimiento sea óptimo. Una técnica avanzada para optimizar el rendimiento es el uso estratégico de los **valores memorizados**, que puedes lograr con:
+  * [[https://react.dev/reference/react/memo|React.memo()]]: es una función de orden superior que puedes utilizar para memorizar el resultado de un componente. Al envolver un componente con ''React.memo()'', puedes evitar que se vuelva a renderizar si las propiedades no han cambiado. Esto puede ser especialmente útil para componentes que tienen una gran cantidad de cálculos internos o que no dependen de cambios de estado o propiedades externas
+  * [[https://react.dev/reference/react/useMemo|useMemo()]]: se trata de un hook de React que te permite memorizar el resultado de una función o de un cálculo costoso. Puedes utilizarlo para guardar en memoria valores calculados y, de nuevo, evitar la repetición de cálculos innecesarios en cada renderizado del componente.
+Al utilizar ambos de manera efectiva, puedes mejorar el rendimiento de tus aplicaciones React evitando renderizaciones innecesarias y cálculos repetitivos. Aunque son técnicas avanzadas que no usarás a menudo y, desde luego son opcionales para el curso, te recomendaría explorar más sobre estas técnicas y aprender cómo aplicarlas de manera adecuada en diferentes escenarios.
+Aunque el curso se centra en Redux para la gestión del estado, existen otras bibliotecas y enfoques para este propósito, otras bibliotecas populares para hacer lo mismo:
+  * [[https://docs.pmnd.rs/zustand/getting-started/introduction|Zustand]]: es una biblioteca de gestión del estado con una interfaz mucho más sencilla que Redux, que pasa directamente por crear un único hook para acceder tanto a los datos como a las operaciones sobre el estado. Su "pega": que no es Redux y Redux hay que conocerlo, sí o sí.
+  * [[https://recoiljs.org/|Recoil]]: en este caso se trata de un sistema cuya principal característica es la granularidad y el control que te da, con un mejor rendimiento en aplicaciones grandes. En contra tiene que es mucho más joven que el anterior (y que Redux), y que tiene un ecosistema pequeño y, por lo tanto, una documentación y soporte de la comunidad pobres en caso de que tengas problemas.