React Fundamentals

Este curso sigue la construcción de una pequeña aplicación de turnos para una biblioteca comunitaria. La pantalla inicial muestra libros disponibles, permite seleccionar una categoría y ofrece un formulario breve para reservar un ejemplar. El escenario es deliberadamente limitado: trabajarás con datos locales y estados simulados, de modo que puedas observar con claridad qué pertenece a la interfaz y qué pertenece a la lógica del componente.

El primer módulo establece el mapa mental. Identificarás qué problema resuelve React, prepararás un proyecto y distinguirás JSX de HTML convencional. La decisión importante aquí es describir la interfaz a partir de datos, en lugar de cambiar nodos de pantalla manualmente. El cuestionario final comprobará si puedes reconocer esa diferencia y detectar reglas básicas de JSX.

El segundo módulo convierte la pantalla en piezas combinables. Separarás una cabecera, una tarjeta de libro y un panel de reserva; después decidirás qué información viaja mediante props y qué contenido debe quedar como children. La ruta insiste en una frontera útil: un componente presenta datos recibidos, mientras otro decide qué datos enviar.

El tercer módulo introduce cambios controlados. Usarás useState para una selección, un formulario y un indicador de disponibilidad. Practicarás actualizaciones funcionales cuando el nuevo valor depende del anterior, copias inmutables al modificar objetos y una organización de estados que no mezcle datos de negocio con señales de interfaz. No se busca acumular muchos hooks, sino elegir una representación que haga visibles las transiciones.

El cuarto módulo trata la sincronización con sistemas externos. Un contador actualizará el título del documento y un componente de disponibilidad observará una fuente simulada. Aprenderás a distinguir un cálculo derivado, que puede realizarse durante el render, de un efecto que realmente comunica con algo externo. También instalarás y retirarás un listener local para comprender la limpieza, y revisarás dependencias y cancelación lógica en un patrón de consulta.

El trabajo final será un panel de reservas con seis libros, dos categorías, un formulario de visitante y una vista de confirmación. Deberás mostrar componentes separados, props explícitas, children en al menos un contenedor, estados para selección y formulario, actualización inmutable y un efecto con limpieza. La aplicación no necesita servidor ni persistencia: el objetivo es hacer verificable el flujo local.

Comprobarás el resultado con una lista de casos: cargar la pantalla sin errores, seleccionar un libro, cambiar dos campos, enviar una reserva válida, rechazar un campo vacío, cerrar el panel y desmontar el listener sin actualizaciones posteriores. Además, registrarás una tabla breve que relacione cada requisito con el componente responsable y el estado que lo sostiene. Si una decisión no necesita sincronización externa, deberás justificar por qué no la convertiste en useEffect.