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

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.

• Módulo 1: Conceptos previos fundamentales
• Módulo 2: Primeros pasos con React
• Módulo 3: Lógica de componentes
• Módulo 4: Gestión de eventos y manejo del estado
• Módulo 5: El contenedor de estado Redux
• Módulo 6: Comunicación e interacción con el servidor
• Módulo 7: Cuestiones adicionales y avanzadas
• Módulo 8: Despliegue, SSR, aplicaciones móviles

¿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" />

¿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

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:

• 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
• 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.