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

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.