Diferencias

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

--- informatica:programacion:cursos:desarrollo_web_react_18 [2024/02/01 15:16] – creado tempwin
+++ informatica:programacion:cursos:desarrollo_web_react_18 [2024/03/25 10:29] (actual) – [Cuestiones adicionales y avanzadas] tempwin
@@ Línea 6: / Línea 6: @@
   * Fecha Inicio: 13/02/2024
   * Fecha Fin: 09/04/2024
+===== Objetivos =====
+Si ya conoces bien JavaScript/ECMAScript, esta formación te permite aprender React desde cero, de forma progresiva, práctica y directa al grano. Pero, como en todos nuestros cursos, sin limitarnos a darte "recetas": comprenderás bien los conceptos que hay debajo de cada técnica para que puedas aplicarlos en cualquier situación. Eso sí, tendrás que trabajar y practicar. Este curso es exigente, pero si lo completas dominarás React y sus principales tecnologías relacionadas. En sus más de 100 lecciones, aprenderás, entre otras muchas cosas:
+  * Conceptos previos importantes: ciclo de vida de componentes, efectos secundarios, funciones puras, map/reduce, clases de orden superior, reactividad...
+  * Puesta en marcha de un entorno de desarrollo apropiado para React.
+  * Creación de proyectos React con Vite y sus dependencias.
+  * Uso de las herramientas de desarrollo específicas de React.
+  * Arquitectura y lógica de componentes de React: componentes en forma de clases y en forma de función, sintaxis JSX, renderizado, renderizado condicional, propiedades y estado, composición de componentes, ranuras de contenido, componentes de orden superior (HOC)...
+  * Gestión de eventos, gestión de estado con hooks, transmisión de estado entre componentes, contexto global...Desarrollo y validación de formularios con React.
+  * Gestión del estado con Redux a fondo: conceptos base, slices, selectores, dispatchers, thunks, middlewares, interacciones...
+  * Consumo y uso de APIs: comunicación directa, el hook useEffect, comunicaciones con Redux, thunks asíncronos, consultas y mutaciones con RTK Query, invalidación de cachés...
+  * Aplicación de estilos a componentes con Tailwind CSS.
+  * Navegación entre componentes y páginas con React Router.
+  * Seguridad en aplicaciones React: autenticación y autorización, inicios y cierres de sesión, protección de páginas, JSON Web Tokens (JWT)...
+  * Renderización de React en el servidor (SSR), Next.js.
+  * Despliegue de apps React para la Web (Vercel).
+  * Apps móviles para iOS y Android con React Native y Expo.
+===== Temario =====
+  * Módulo 1: [[informatica:programacion:cursos:desarrollo_web_react_18:conceptos_previos_fundamentales|Conceptos previos fundamentales]]
+  * Módulo 2: [[informatica:programacion:cursos:desarrollo_web_react_18:primeros_pasos_react|Primeros pasos con React]]
+  * 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: [[informatica:programacion:cursos:desarrollo_web_react_18:contenedor_estado_redux|El contenedor de estado Redux]]
+  * Módulo 6: [[informatica:programacion:cursos:desarrollo_web_react_18:comunicacion_interaccion_servidor|Comunicación e interacción con el servidor]]
+  * Módulo 7: [[informatica:programacion:cursos:desarrollo_web_react_18:cuestiones_adicionales_avanzadas|Cuestiones adicionales y avanzadas]]
+  * Módulo 8: [[informatica:programacion:cursos:desarrollo_web_react_18:despliegue_ssr_aplicaciones_moviles|Despliegue, SSR, aplicaciones móviles]]
+===== Tests =====
+==== Fundamentos de React ====
+**¿Qué ventaja tiene Vite sobre Webpack?**
+  * Es más rápido gracias a los módulos ECMAScript (**correcto**)
+  * Verifica la corrección del código
+  * Webpack no puede servir aplicaciones React
+  * No ofrece ninguna ventaja, son herramientas diferentes
+**¿Qué quiere decir la "D" en el acrónimo DHTML?**
+  * Dynamic (**correcto**)
+  * Document
+  * Daemon
+  * Durable
+**¿Para qué sirve un contexto de React?**
+  * Para mantener un estado global al que pueden acceder diversos componentes (**correcto**)
+  * Para modificar el estilo del sitio web
+  * Para reutilizar componentes en distintos lugares del sitio
+  * Para gestionar eventos como click o submit
+**¿Qué es el estado de un componente?**
+  * El conjunto de datos que se pueden preservar de un renderizado a otro (**correcto**)
+  * La lista de propiedades que reciben como parámetro
+  * Los componentes de React no pueden tener estado propio
+  * El contenido de los valores del formulario
+**En sintaxis JSX, ¿cómo crearías un enlace con clase CSS resaltado y texto Ejemplo?**
+  * ''%%<a className="resaltado">Ejemplo</a>%%''  (**correcto**)
+  * ''%%<a className="resaltado" text="Ejemplo" />%%''
+  * ''%%<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.