====== Desarrollo de aplicaciones web con React 18 ======

Notas del curso **Desarrollo de aplicaciones web con React 18** del Clúster Tic de Galicia. 

  * Horas: 60
  * 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.