Learn ReactMás allá de lo básico
Este manual cubrió los fundamentos: configurar un proyecto, componentes, JSX, estilos, props, estado, eventos, formularios, efectos y los hooks que los conectan entre sí, además del proceso de pensar en React para convertir un diseño en una aplicación funcional y el trabajo de mantener esa aplicación accesible. Eso es el núcleo de la librería, y es suficiente para construir interfaces reales y funcionales. Hay un puñado de temas que quedan fuera de ese núcleo, y casi toda aplicación de React en producción termina usando alguna combinación de ellos tarde o temprano. Este capítulo es el mapa: para qué sirve cada uno, dónde encaja y dónde aprenderlo.
Patrones de componentes reutilizables
Una vez que has escrito unos cuantos componentes, la pregunta deja de ser cómo construir uno y pasa a ser cómo construir uno que sobreviva a su segundo uso. La respuesta de React es la composición: un componente envuelve contenido en lugar de recibir una prop distinta para cada variación que pueda necesitar. Children y composición arranca desde ahí, compound components divide un componente en piezas que cooperan entre sí y que quien las usa organiza como si fuera markup, render props y componentes headless le devuelven el estado interno de un componente a quien lo renderiza, y custom hooks en la práctica sacan la lógica con estado de los componentes por completo para que cualquier componente pueda compartirla. Juntos, son la razón por la que una librería de componentes se mantiene pequeña mientras cubre un rango amplio de usos.
Routing
El routing relaciona una URL con la vista que debe mostrarse, mantiene la barra de direcciones sincronizada mientras el usuario navega y hace que el botón de retroceso siga funcionando, todo sin recargar la página completa. React Router es la librería a la que recurre la mayoría de las aplicaciones de React, y Routing la cubre a fondo, incluyendo layouts anidados, parámetros de URL y rutas protegidas.
Estado compartido
El estado que leen varias partes distantes de la aplicación es lo otro que crece más allá de lo que las props solas pueden manejar bien. La respuesta propia de React es Context, que entrega un valor a cualquier componente debajo de un provider sin tener que pasarlo por todas las capas intermedias. A partir de cierto tamaño, las aplicaciones recurren a un store dedicado: Redux Toolkit y Zustand son los dos que más vas a encontrar. Estos agregan herramientas para organizar las actualizaciones, depurarlas y mantenerlas predecibles a medida que crece el número de partes que escriben en el estado. Context es suficiente para un tema visual, un usuario con sesión iniciada o el estado abierto/cerrado de un menú, así que empieza por ahí y deja que un store se gane su lugar.
El modelo de renderizado
React vuelve a ejecutar la función de un componente cuando su estado cambia, y luego calcula qué debe cambiar en el DOM a partir de lo que esa función devuelve. Conocer los pasos por los que pasa explica por qué un componente se ejecuta cuando lo hace, por qué la mayoría de los re-renders cuestan tan poco que se pueden ignorar, y de dónde viene realmente la lentitud de una aplicación cuando se siente pesada. Cómo renderiza React recorre esos pasos y las herramientas que los hacen visibles, StrictMode y el React Profiler.
Rendimiento
El trabajo de rendimiento se apoya en el modelo de renderizado, porque en gran parte se reduce a hacer menos de lo que cuesta un render. Memoización cubre useMemo, memo y useCallback, las tres herramientas para recordar un resultado entre renders, junto con la regla de igualdad referencial que decide si alguna de ellas realmente ayuda. Code splitting se encarga de la otra mitad, el tamaño del bundle que el navegador descarga antes de que aparezca algo en pantalla, cargando partes de la aplicación a demanda con lazy y Suspense. Ambas técnicas agregan complejidad, así que úsalas solo una vez que hayas medido un problema que valga la pena resolver.
Meta-frameworks
React por sí solo únicamente renderiza la interfaz. No trae una postura definida sobre el routing, sobre cómo cargar datos antes de que aparezca una página, ni sobre cómo renderizar una página en un servidor antes de que llegue al navegador, tres cosas que casi toda aplicación en producción necesita. Un meta-framework es un framework construido sobre React que provee esas piezas faltantes, y Next.js es el que usa la mayor parte del mundo de React. Por eso la mayoría de las aplicaciones de React en producción no son React puro: son React corriendo dentro de Next.js o de algo parecido. Los tipos de frameworks cubre los meta-frameworks con más profundidad, incluyendo cómo se relaciona Next.js con React.
Herramientas (tooling)
Este tema ya tiene su propio capítulo. Configurar un proyecto de React explicó por qué el JSX usado en todo este manual no es JavaScript válido por sí mismo, y cómo Vite levanta un servidor de desarrollo, compila JSX al vuelo y empaqueta todo en archivos optimizados cuando llega el momento de publicar. Aparece en este mapa porque está por debajo de todo lo demás: un router, un meta-framework y un paso de despliegue todos asumen que ya hay una herramienta de build haciendo ese trabajo. Vuelve al capítulo de configuración cuando necesites repasar los detalles.
TypeScript
La mayoría de los trabajos de React y la mayoría de los proyectos existentes usan TypeScript, que agrega tipos sobre JavaScript para que el editor y el build puedan detectar una prop mal escrita o un valor que podría faltar antes de que la aplicación se ejecute. React funciona igual en ambos casos; lo que cambia es que los componentes, las props y el estado llevan anotaciones de tipo. TypeScript en React cubre las partes específicas de React una vez que ya te sientes cómodo con los fundamentos vistos aquí.
Despliegue
Una vez que la aplicación está construida, necesita un lugar donde vivir. Ejecutar un comando de build, vite build en el caso de un proyecto con Vite, produce una carpeta con archivos HTML, CSS y JavaScript planos: la salida estática de la aplicación. Subir esa carpeta a un host, como Netlify, Vercel o Cloudflare Pages, es lo que pone la aplicación en internet para que otras personas puedan usarla.
En qué punto quedas
Ese es el mapa: patrones de composición para componentes que se usan más de una vez, routing para moverse entre vistas, context o un store para el estado que viaja por la aplicación, el modelo de renderizado y el trabajo de rendimiento que se apoya en él, un meta-framework como Next.js para encargarse de lo que React deja fuera, TypeScript como red de seguridad que usa la mayoría de los equipos, el build de Vite del capítulo de configuración que convierte el código en archivos que un navegador puede cargar, y un host para publicar el resultado. Nada de esto necesita aprenderse hoy mismo. Elegir y aprender un framework es la guía para decidir si y cuándo agregar una pieza como Next.js, y cómo evaluar las opciones cuando llegue ese momento. La forma más rápida de recorrer todo esto es el mismo enfoque que te trajo hasta aquí: construir un proyecto real y pequeño. Elige algo que valga la pena hacer, apóyate en los fundamentos de este manual, y trae las piezas mencionadas arriba solo cuando el proyecto realmente las necesite. Los capítulos siguientes profundizan en varias de ellas: patrones de componentes reutilizables construidos sobre children y context, React Router de principio a fin, cómo renderiza React y el trabajo de rendimiento que depende de eso, y finalmente autenticación y TypeScript.
Vite ya lo tienes de tu lado desde el capítulo de configuración, y el routing, Next.js y el despliegue son piezas que vas a ir incorporando de forma natural en cuanto un proyecto realmente las necesite.
Ahora ve y construye algo pequeño. Ya estás listo para eso.
Sigue: Children y composición, donde los componentes reutilizables empiezan por dejar que quien los usa ponga contenido dentro de ellos.