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, junto con la forma de pensar en React para convertir un diseño en una app funcional y el trabajo de mantener esa app accesible. Es el núcleo de la biblioteca, y es suficiente para construir interfaces reales y funcionales. Hay algunas cosas que quedan fuera de ese núcleo, y casi todas las apps de React en producción recurren a una combinación de ellas tarde o temprano. Este capítulo es el mapa: para qué sirve cada una, dónde encaja, y dónde aprender sobre ella.
Patrones de componentes reutilizables
Una vez que has escrito algunos componentes, la pregunta cambia de cómo construir uno a cómo construir uno que sobreviva a su segundo uso. La respuesta de React es composición: un componente envuelve contenido en lugar de recibir un prop nombrado para cada variación que pueda necesitar. Children y composición empieza ahí, componentes compuestos divide un componente en piezas que cooperan y que quien lo usa puede organizar como markup, render props y componentes headless devuelven el estado interno de un componente a quien lo renderiza, y custom hooks en la práctica extraen la lógica con estado de los componentes para que cualquiera pueda compartirla. Juntos, así es como una librería de componentes se mantiene pequeña mientras cubre un amplio rango de usos.
Enrutamiento
El enrutamiento mapea una URL a la vista que debe mostrarse, mantiene la barra de direcciones sincronizada mientras el usuario se mueve por la app, y hace que el botón atrás siga funcionando, todo sin recargar la página completa. React Router es la librería que la mayoría de las apps de React usan, y Enrutamiento la cubre completamente, incluyendo layouts anidados, parámetros de URL, y rutas protegidas.
Estado compartido
El estado que varias partes distantes de la app leen es lo otro que crece más allá de lo que los props manejan bien. La respuesta de React es Context, que entrega un valor a cualquier componente debajo de un provider sin pasarlo por las capas intermedias. Pasado cierto tamaño, las apps recurren a un store dedicado: Redux Toolkit y Zustand son los dos que encontrarás con más frecuencia. Agregan herramientas para organizar actualizaciones, depurarlas, y mantenerlas predecibles conforme crece el número de escritores. Context es suficiente para un tema, un usuario autenticado, o el estado abierto de un menú, así que comienza ahí y deja que un store se gane su lugar.
El modelo de renderizado
React vuelve a ejecutar una función de componente cuando su estado cambia, luego determina qué cambiar en el DOM a partir de lo que esa función devuelve. Conocer los pasos que atraviesa explica por qué un componente se ejecuta cuándo lo hace, por qué la mayoría de los re-renders cuesta poco como para ignorarlos, y de dónde viene realmente la lentitud de una app cuando se siente lenta. Cómo React renderiza camina a través de esos pasos y las herramientas que los hacen visibles, StrictMode y React Profiler.
Rendimiento
El trabajo de rendimiento se construye sobre el modelo de renderizado, porque la mayoría viene de hacer menos de lo que un render cuesta. 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 ayuda. Code splitting maneja la otra mitad, el tamaño del bundle que el navegador descarga antes de que aparezca nada, cargando partes de la app bajo demanda con lazy y Suspense. Ambas agregan complejidad, así que úsalas una vez que hayas medido un problema que valga la pena arreglar.
Meta-frameworks
React por sí solo solo renderiza la interfaz. No opina sobre enrutamiento, cómo cargar datos antes de que aparezca una página, o cómo renderizar una página en el servidor antes de que llegue al navegador, tres cosas que casi todas las apps en producción necesitan. Un meta-framework es un framework construido sobre React que provee esas piezas faltantes, y Next.js es el que la mayoría del mundo React usa. Por eso la mayoría de las apps de React en producción no son React por sí solo: son React ejecutándose dentro de Next.js o algo similar. Los tipos de frameworks cubre meta-frameworks con más profundidad, incluyendo cómo Next.js se relaciona con React.
Herramientas
Esta parte ya tiene un capítulo por sí sola. Configurar un proyecto de React cubrió por qué el JSX usado a lo largo de este manual no es JavaScript válido por sí mismo, y cómo Vite ejecuta un servidor de desarrollo, compila JSX sobre la marcha, y agrupa todo en archivos optimizados cuando es hora de ponerlo en producción. Pertenece a este mapa porque queda debajo de cada otra cosa aquí: un router, un meta-framework, y un paso de deploy todos asumen que una herramienta de build ya está haciendo ese trabajo. Vuelve al capítulo de configuración cuando quieras los detalles de nuevo.
TypeScript
La mayoría de los trabajos de React y la mayoría de los codebases existentes usan TypeScript, que agrega tipos sobre JavaScript para que el editor y el build puedan detectar un prop con nombre incorrecto o un valor que podría faltar antes de que la app se ejecute. React funciona igual de cualquier forma; lo que cambia es que los componentes, props, y estado llevan anotaciones de tipo. TypeScript en React cubre las partes específicas de React una vez que te sientas cómodo con los fundamentos aquí.
Despliegue
Una vez que la app está construida, necesita un hogar. Ejecutar un comando de build, vite build para un proyecto de Vite, produce una carpeta de archivos HTML, CSS, y JavaScript planos: la salida estática de la app. Enviar esa carpeta a un host, como Netlify, Vercel, o Cloudflare Pages, es lo que pone la app en internet para que otras personas la usen.
Dónde te deja esto
Ese es el mapa: patrones de composición para componentes que se usan más de una vez, enrutamiento para moverte entre vistas, context o un store para estado que viaja, el modelo de renderizado y el trabajo de rendimiento que descansa sobre él, un meta-framework como Next.js para manejar lo que React deja fuera, TypeScript para la red de seguridad con la que la mayoría de los equipos trabajan, el build de Vite del capítulo de configuración convirtiendo el código en archivos que un navegador puede cargar, y un host para poner el resultado en línea. Nada de esto necesita aprenderse hoy. Elegir y aprender un framework es la guía para decidir si y cuándo agregar una pieza como Next.js, y cómo sopesar las opciones una vez que llega ese momento. La forma más rápida a través de todo es el mismo enfoque que te llevó hasta aquí: construir un pequeño proyecto real. Elige algo que valga la pena hacer, apóyate en los fundamentos de este manual, e integra las piezas de arriba solo una vez que el proyecto realmente las pida. Los capítulos después de este van más profundo en varias de ellas: patrones de componentes reutilizables construidos sobre children y context, React Router de principio a fin, cómo React renderiza y el trabajo de rendimiento que descansa sobre él, y finalmente autenticación y TypeScript.
Vite ya está en tus manos desde el capítulo de configuración, y enrutamiento, Next.js, y despliegue son piezas que aprenderás naturalmente una vez que un proyecto realmente las necesite.
Construye algo pequeño siguiente. Estás listo para ello.
Siguiente: Children y composición, donde los componentes reutilizables comienzan con permitir a quien los usa poner contenido dentro de ellos.