Aprender React

🚀 ¿Con qué iniciar? Usa Vite.js para tus primeros proyectos en React

Si estás empezando con React, la forma más rápida y moderna de crear proyectos es usando Vite.js.
Vite ofrece:

  • Arranque instantáneo del servidor de desarrollo
  • Recargas rápidas
  • Configuración mínima
  • Plantillas listas para React (npm create vite@latest)

Es liviano, sencillo y perfecto para aprender sin complicarte con configuraciones avanzadas.
Una vez domines las bases, podrás pasar a frameworks más completos como Next.js o Remix.

🧱 Bases de React: Lo Esencial para Empezar

Antes de entrar a frameworks, librerías o ecosistemas, React tiene un conjunto de fundamentos que toda persona debe dominar.

1. Componentes (Componentes Funcionales)

  • La unidad mínima de una interfaz.
  • Reutilizables, composables y fáciles de probar.
  • Aprender:
    • function MiComponente() { ... }
    • JSX dentro de un componente
    • Props y retorno del UI

2. JSX (JavaScript + XML)

  • Sintaxis que permite escribir HTML dentro de JavaScript.
  • No es HTML real: tiene reglas propias.
  • Aprender:
    • Expresiones {}
    • Diferencias con HTML (className, htmlFor, etc.)
    • Fragmentos <>...</>

3. Props (Propiedades)

  • Datos que los componentes reciben desde su padre.
  • Inmutables dentro del componente.
  • Aprender:
    • Props como parámetros de función
    • Props por defecto
    • Children (props.children)

4. Estado (State)

  • Datos internos que cambian con el tiempo.
  • React vuelve a renderizar la UI cuando cambia el estado.
  • Aprender:
    • useState
    • Diferencia entre state y variables normales
    • Renderizado basado en estado

5. Renderizado Condicional

  • Renderizar distintas cosas según condiciones.
  • Técnicas:
    • Ternarios
    • &&
    • Retornos tempranos

6. Listas y Keys

  • Cómo renderizar listas con map.
  • Las keys ayudan a React a identificar elementos.
  • Aprender:
    • Por qué las keys deben ser únicas
    • No usar índices si la lista cambia

7. Manejo de Eventos

  • Eventos similares a HTML pero con camelCase.
  • Aprender:
    • onClick, onChange, onSubmit
    • Pasar funciones y evitar ejecuciones accidentales
    • Evitar recargar la página en formularios

8. Hooks Fundamentales

  • React moderno se construye con hooks.
  • Aprender:
    • useState
    • useEffect
    • useRef
    • Reglas de los hooks (llamarlos siempre arriba del componente)

9. Ciclo de Vida (vía Hooks)

  • Antes era con clases; hoy se entiende con useEffect.
  • Aprender:
    • Cuando se ejecuta un efecto
    • Dependencias [ ]
    • Cleanup de efectos

10. Pensar en Componentes (Component Thinking)

  • Separar una interfaz en piezas pequeñas, reutilizables y lógicas.
  • Entender:
    • Contenedores vs. componentes UI
    • Flujo unidireccional de datos

🔜 ¿Qué aprender después de las bases de React?

Una vez que dominas componentes, props, estado, JSX y hooks esenciales, el siguiente paso es avanzar hacia las habilidades que realmente te permiten construir aplicaciones completas y mantenerlas a escala.

1. Manejo de Estado más Avanzado

  • useReducer
  • Context API
  • Librerías externas:
    • Redux Toolkit
    • Zustand
    • Jotai
    • Recoil
      Aprenderás a manejar datos compartidos sin pasar props por múltiples niveles.

2. Manejo de Datos y APIs

  • Fetch API
  • Axios
  • TanStack Query (React Query) → la opción moderna y recomendada
  • Estrategias:
    • Cache de datos
    • Estados de carga y error
    • Revalidación automática

3. Routing

  • React Router (proyectos SPA sin SSR)
  • Entender rutas anidadas, dinámicas y loaders
  • Contexto y navegación programática

4. Formularios y Validación

  • React Hook Form → estándar moderno
  • Validación con Zod o Yup
  • Formularios controlados vs. no controlados

5. Arquitectura y Patrón de Componentes

  • Separar componentes UI, lógicos y contenedores
  • Reutilización y composición
  • Patrones como Render Props y Custom Hooks

6. Estilos en React

  • CSS Modules
  • TailwindCSS (muy recomendado hoy)
  • Styled Components
  • Shadcn/UI, Radix UI, MUI o Chakra UI

7. Optimización y Mejores Prácticas

  • useMemo, useCallback
  • Lazy loading y code splitting
  • Keys correctas
  • Evitar renders innecesarios

🔜 8. Herramientas del Ecosistema (Calidad, Formato, Estado, Testing y Tipado)

Una vez que dominas React como biblioteca, el siguiente paso es aprender a mantener un código consistente, limpio, escalable y mejor tipado.

8.1. Formateo y Estándares de Código

  • Linting: ESLint / Biome
  • Formatting: Prettier
  • Git Hooks: Husky + lint-staged

8.2. Testing

  • Unit Testing: Vitest
  • Component Testing: Testing Library
  • End-to-End Testing: Cypress

8.3. Manejo de Estados

  • Redux Toolkit (store, actions, reducers)
  • Zustand
  • MobX
  • Recoil

8.4. Tipado

  • TypeScript
  • Modelado de tipos básicos y avanzados
  • Tipos para props, estados, hooks y APIs

Esta sección te prepara para proyectos reales donde la calidad, las pruebas, el manejo de estado y el tipado fuerte son esenciales.

🚀 Estrategias de Renderizado para Proyectos React

Antes de profundizar en React, es importante entender las diferentes formas en que una aplicación puede ser generada y renderizada. Cada estrategia ofrece ventajas específicas en rendimiento, SEO, complejidad y experiencia de usuario.

CSR (Client-Side Rendering)

Herramientas como Vite.js con React o Preact producen aplicaciones que se renderizan completamente en el navegador.
Ventajas:

  • Desarrollo extremadamente rápido
  • Menos configuración inicial
  • Experiencia fluida tipo SPA

Ideal para:

  • Paneles internos
  • Aplicaciones altamente interactivas
  • Proyectos donde el SEO no es prioritario

SSR (Server-Side Rendering)

Frameworks como Next.js, Remix y Solid Start renderizan el HTML en el servidor antes de enviarlo al navegador.
Ventajas:

  • Excelente SEO
  • Primera carga más rápida
  • Contenido listo sin esperar JavaScript

Recomendado para:

  • Sitios públicos con contenido dinámico
  • E-commerce
  • Dashboards con datos en tiempo real

SSG (Static Site Generation)

Generadores como Astro crean HTML estático durante el build, permitiendo sitios ultra rápidos y fáciles de desplegar.
Ventajas:

  • Máximo rendimiento
  • Hosting simple y económico
  • React solo donde es necesario (islas de interactividad)

Perfecto para:

  • Blogs
  • Portafolios
  • Documentación
  • Landing pages

Elegir la estrategia de renderizado correcta desde el inicio te permite construir aplicaciones más rápidas, escalables y fáciles de mantener.

🔜 9. Frameworks Full-Stack basados en React

Cuando ya te sientes cómodo con React, el siguiente paso es usar frameworks que añaden routing, SSR, APIs y mejor experiencia de desarrollo para aplicaciones completas.

9.1. Next.js (el estándar actual)

  • File routing y App Router
  • SSR, SSG, ISR
  • Server Components y Server Actions
  • Integración sencilla con bases de datos (Prisma, Drizzle)
  • Despliegue simple en Vercel u otras plataformas

9.2. Remix

  • Loaders y actions para datos y mutaciones
  • Rutas anidadas
  • Enfoque “web estándar” (formularios, HTTP, etc.)
  • Buen manejo de UX en navegaciones y estados

9.3. Astro (React como isla)

  • Islands Architecture
  • Uso de React junto a otros frameworks (Vue, Svelte, etc.)
  • Ideal para sitios de contenido rápidos (blogs, docs, landing pages)

9.4. TanStack Start

  • Integración profunda con TanStack Query
  • Pensado para apps data-driven
  • SSR ligero y enfoque moderno

Estos frameworks llevan tu conocimiento de React a proyectos reales en producción, conectando frontend, servidor y datos.

📚 Otras librerías recomendadas para dominar React

Además de las herramientas principales, estas bibliotecas amplían tus capacidades en áreas como animaciones, 3D, tablas, visualización de datos, mapas y más.

Animaciones

  • Framer Motion – animaciones fluidas y declarativas.
  • React Spring – animaciones basadas en físicas.
  • GSAP (con plugins para React) – animaciones avanzadas y cinematográficas.

3D y Gráficos Avanzados

  • React Three Fiber (R3F) – la forma moderna de usar Three.js dentro de React.
  • Drei – colección de helpers para React Three Fiber.
  • React Babylon.js – alternativa para escenas 3D complejas.

Tablas y Data Grids

  • TanStack Table – tablas altamente configurables.
  • AG Grid – tabla empresarial con herramientas avanzadas.
  • MUI DataGrid – integración con Material UI.

Virtualización (listas grandes)

  • React Virtual (TanStack Virtual) – estándar moderno.
  • React Window – alternativa ligera.
  • React Virtualized – completa y flexible.

Formularios y Validación

  • React Hook Form – manejo de formularios optimizado.
  • Formik – opción clásica pero más pesada.
  • Zod – validación moderna y tipada.
  • Yup – validación tradicional basada en schemas.

Gráficos y Visualización de Datos

  • Recharts – simple y muy usado.
  • Chart.js (react-chartjs-2) – gráficos comunes y personalizables.
  • VisX – visualizaciones avanzadas de Airbnb.
  • ECharts for React – ideal para dashboards complejos.

Componentes UI

  • Shadcn/UI – tendencia actual basada en Radix.
  • Radix UI – componentes accesibles sin estilos.
  • Material UI (MUI) – uno de los más populares.
  • Chakra UI – componentes accesibles y fáciles de estilizar.
  • Ant Design – muy usado a nivel empresarial.

Estado Local y Utilidades

  • Jotai – estado global minimalista.
  • Valtio – estado reactivo basado en proxies.
  • Zustand – estado global simple y rápido.

Manejo de Fechas

  • date-fns – utilidades modernas y modulares.
  • Day.js – alternativa ligera a Moment.

Mapas

  • React Leaflet – mapas interactivos basados en Leaflet.
  • React Map GL – integración con Mapbox utilizando WebGL.
  • Google Maps React – integración sencilla con Google Maps.

Notificaciones y Feedback

  • React Hot Toast – notificaciones modernas.
  • Sonner – notificaciones basadas en Radix.
  • React Query Devtools – visualización del estado de fetching.

Estas librerías completan tu stack y te permiten abordar cualquier tipo de proyecto React, desde interfaces simples hasta aplicaciones altamente interactivas y complejas.

⚙️ Entornos de Ejecución

React se puede utilizar y ejecutar en diferentes runtimes de JavaScript. Conocerlos te permite trabajar con herramientas modernas, servidores, build tools y runtimes optimizados.

  • Node.js
    El entorno más utilizado para herramientas, servidores y ecosistema React en general. Compatibilidad amplia y soporte estable.

  • Bun
    Runtime moderno y muy rápido, con empaquetador, test runner y gestor de paquetes integrados. Ideal para desarrollo veloz.

  • Deno
    Alternativa segura y basada en estándares web, creada por el autor original de Node.js. Usa TypeScript de forma nativa.

Estos entornos te permiten ejecutar scripts, servidores, herramientas de build y proyectos fullstack que complementan tu trabajo con React.

📱 Mobile y 🖥️ Desktop con React

React no solo se utiliza para aplicaciones web; también es una base sólida para crear apps móviles y de escritorio usando el mismo modelo de componentes y JavaScript.

Aplicaciones Móviles

  • React Native
    Framework para construir aplicaciones móviles nativas para iOS y Android.
    Comparte la lógica con React, pero utiliza componentes nativos en lugar de DOM.
    Ideal para apps móviles de alto rendimiento.

  • Expo
    Plataforma que simplifica el desarrollo con React Native.
    Incluye herramientas, APIs preconfiguradas y un flujo de desarrollo más rápido sin configuración compleja.

Aplicaciones de Escritorio

  • Electron + React
    Permite crear aplicaciones de escritorio usando tecnologías web.
    Ideal para apps multiplataforma (Windows, macOS, Linux) con una sola base de código.

  • Tauri + React
    Alternativa moderna y ligera a Electron.
    Usa Rust en el backend y consume muchos menos recursos, ofreciendo mejor rendimiento.

React es una base excelente para proyectos multiplataforma, permitiendo compartir lógica, componentes y herramientas entre web, móvil y desktop.

https://react.new/

Resources

Actualizaciones

  • React Compiler

animaciones