React es una librería de JavaScript de código abierto que sirve para construir interfaces de usuario rápidas, interactivas y organizadas en componentes reutilizables.
Fue creada por Meta (antes Facebook) en 2013 y hoy es la herramienta frontend más demandada en ofertas de trabajo tecnológico en México.
El problema que React resuelve
Antes de React, actualizar la pantalla de una aplicación web era lento y complicado. Cada cambio pequeño obligaba al navegador a volver a dibujar toda la página.
Esto causaba aplicaciones lentas y código difícil de mantener. React introduce una solución elegante llamada DOM virtual.
¿Qué es el DOM virtual?
El DOM (Document Object Model) es la representación interna que el navegador hace de tu página web. Modificarlo directamente es costoso en términos de rendimiento.
El DOM virtual es una copia ligera del DOM real que React mantiene en memoria. Cuando algo cambia, React compara el DOM virtual nuevo con el anterior, calcula la diferencia mínima y solo actualiza lo necesario en el navegador.
Este proceso se llama reconciliación y es la razón por la que las aplicaciones React se sienten rápidas.
React no es un framework: es una librería
Esta distinción es importante. Un framework (como Angular) impone una estructura completa con reglas rígidas para toda tu aplicación.
Una librería como React se enfoca en una sola responsabilidad: renderizar la interfaz de usuario. Tú eliges las demás herramientas que quieres usar junto con ella.
Esta flexibilidad es una de las razones por las que React domina el mercado mexicano de desarrollo web.
El mercado laboral de React en México
En México, un desarrollador frontend con React puede esperar los siguientes rangos salariales:
| Nivel | Salario mensual aproximado |
|---|---|
| Junior (0–1 año) | $12,000 – $18,000 |
| Mid (1–3 años) | $18,000 – $28,000 |
| Senior (3+ años) | $28,000 – $45,000 |
Empresas como Mercado Libre, Liverpool y startups de fintech en Ciudad de México publican decenas de vacantes de React cada mes. Incluso empresas tradicionales como FEMSA y Bimbo tienen equipos internos de desarrollo digital que usan React en sus portales y aplicaciones internas.
Aprender React no es solo una habilidad técnica: es una inversión con retorno medible en el mercado laboral mexicano.
Cómo funciona React: los tres conceptos clave
1. Componentes
Un componente es una función de JavaScript que devuelve una pieza de la interfaz de usuario. Puedes pensar en ellos como bloques de LEGO: cada uno tiene una forma específica y se puede combinar con otros.
Una tienda en línea como la de Liverpool puede construirse con componentes separados: uno para el encabezado, uno para la tarjeta de producto, uno para el carrito y uno para el pie de página. Cada componente vive en su propio archivo y se puede reutilizar en toda la aplicación.
2. Estado (State)
El estado es la información que un componente recuerda y puede cambiar con el tiempo. Cuando el estado cambia, React actualiza automáticamente la pantalla para reflejar el nuevo valor.
Ejemplo concreto: en un carrito de compras, la cantidad de artículos es un estado. Cada vez que el usuario agrega un producto, el estado cambia y el número en el ícono del carrito se actualiza sin recargar la página.
3. Props
Props (abreviación de "properties") son los datos que un componente recibe de otro. Funcionan en una sola dirección: del componente padre al componente hijo.
Si tienes un componente TarjetaProducto, puedes pasarle props como el nombre, el precio y la imagen del producto. El mismo componente puede renderizar cientos de productos diferentes usando props distintas.
JSX: escribir HTML dentro de JavaScript
React introduce una sintaxis especial llamada JSX (JavaScript XML). JSX permite escribir algo que parece HTML directamente dentro de tus funciones de JavaScript.
Ejemplo básico de JSX:
function Saludo() {
return <h1>Hola, bienvenido a React</h1>;
}
Esto no es HTML real. Babel (una herramienta de compilación) transforma el JSX en llamadas a funciones de JavaScript que el navegador puede entender. JSX hace el código más legible y fácil de mantener.
El ecosistema de React
React por sí solo maneja la interfaz. Para aplicaciones completas, se combina con otras herramientas:
| Necesidad | Herramienta común |
|---|---|
| Navegación entre páginas | React Router |
| Manejo de estado global | Redux, Zustand |
| Peticiones a APIs | Axios, Fetch API |
| Estilos | Tailwind CSS, CSS Modules |
| Build y desarrollo | Vite, Create React App |
| Pruebas | Jest, React Testing Library |
No necesitas aprender todo esto desde el primer día. Este curso se enfoca en los fundamentos que te permitirán entender y usar el resto del ecosistema cuando lo necesites.
Errores comunes al empezar con React
Error 1: Confundir React con un lenguaje de programación. React no reemplaza a JavaScript. Es una librería que se escribe con JavaScript. Si no tienes bases de JavaScript (funciones, arrays, objetos), estudia JavaScript primero.
Error 2: Intentar aprender todo el ecosistema al mismo tiempo. Muchos principiantes se abruman con Redux, TypeScript y Next.js antes de entender un componente básico. Aprende React puro primero.
Error 3: Ignorar el flujo de datos unidireccional. En React, los datos fluyen de padre a hijo, no al revés. Intentar forzar el flujo en la dirección opuesta desde el inicio genera código desordenado y difícil de depurar.
Lo que aprenderás en este curso
Este curso cubre el camino completo desde cero hasta tu primera aplicación desplegada en internet:
- Configuración del entorno: Node.js, npm y Vite
- Componentes funcionales: cómo crearlos y organizarlos
- JSX: reglas, diferencias con HTML y buenas prácticas
- Props: cómo pasar y recibir datos entre componentes
- useState: manejo de estado local en tus componentes
- useEffect: conexión con APIs y efectos secundarios
- React Router: navegación entre páginas
- Despliegue: publicar tu aplicación en Vercel o Netlify
Cada lección incluye ejemplos de código funcionales y errores comunes documentados para que no pierdas tiempo en los mismos problemas que otros principiantes enfrentan.
Puntos clave
- React es una librería, no un framework. Se enfoca exclusivamente en la interfaz de usuario.
- El DOM virtual hace que las actualizaciones de pantalla sean rápidas y eficientes.
- Los tres conceptos fundamentales de React son componentes, estado y props.
- JSX permite escribir estructuras de interfaz dentro de JavaScript de forma legible.
- En el mercado mexicano, React es la habilidad frontend más solicitada, con salarios desde $12,000 hasta $45,000 al mes según la experiencia.