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
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?
¿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.
¿Cuáles de las siguientes son etapas del ciclo de vida de un componente?
¿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:
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.
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:
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í.
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.