¿Cómo construir y desplegar tu primera aplicación React?

El proceso de build convierte tu código React en archivos estáticos optimizados, listos para publicarse en internet.

Cuando terminas de desarrollar tu app, tu código fuente no puede publicarse directamente. Necesitas transformarlo en HTML, CSS y JavaScript puro que cualquier navegador pueda leer.

El build de producción

Vite (la herramienta que usaste desde la lección 1) incluye un comando especial para generar el build. Ese comando optimiza, minifica y agrupa todos tus archivos en una carpeta llamada dist.

Ejecuta este comando desde la raíz de tu proyecto:

npm run build

Este proceso puede tardar entre 10 y 30 segundos. Al terminar, verás una carpeta nueva llamada dist en tu proyecto.

¿Qué hay dentro de dist?

El nombre con hash (letras y números aleatorios) sirve para forzar al navegador a descargar la versión nueva cada vez que publicas un cambio. Esto se llama cache busting.

Previsualiza el build antes de publicar

Antes de subir tu app a internet, verifica que el build funcione correctamente en tu máquina. Ejecuta:

npm run preview

Vite levanta un servidor local en http://localhost:4173. Navega tu app completa y revisa que todo funcione. Si algo falla aquí, fallará en producción.

Plataformas para desplegar gratis desde México

Existen varias plataformas donde puedes publicar tu app sin pagar nada. Las dos más populares para desarrolladores en México son Vercel y Netlify.

Comparativa rápida

Ambas plataformas detectan automáticamente que tu proyecto usa Vite y configuran el build sin que toques nada.

Despliegue en Vercel paso a paso

Paso 1 — Sube tu proyecto a GitHub.

Si aún no tienes cuenta en GitHub, créala en github.com. Luego crea un repositorio nuevo y sube tu proyecto:

git init
git add .
git commit -m "primera version de mi app react"
git branch -M main
git remote add origin https://github.com/tu-usuario/mi-app.git
git push -u origin main

Paso 2 — Crea una cuenta en Vercel.

Entra a vercel.com y regístrate con tu cuenta de GitHub. Es un proceso de tres clics.

Paso 3 — Importa tu repositorio.

En el dashboard de Vercel haz clic en Add New Project. Vercel lista todos tus repositorios de GitHub. Selecciona el de tu app React.

Paso 4 — Configura el proyecto.

Vercel detecta Vite automáticamente. Los valores por defecto son correctos:

• Framework Preset: Vite
• Build Command: npm run build
• Output Directory: dist

Haz clic en Deploy. En menos de 2 minutos tu app estará en línea con una URL como mi-app.vercel.app.

Paso 5 — Despliegue automático en el futuro.

Cada vez que hagas git push a la rama main, Vercel despliega la nueva versión automáticamente. No necesitas repetir el proceso.

Despliegue en Netlify paso a paso

Netlify ofrece dos métodos. El más sencillo para principiantes es arrastrar y soltar la carpeta dist.

Método 1 — Drag & Drop (sin GitHub)

1. Entra a netlify.com y crea una cuenta gratuita.
2. En el dashboard verás una zona que dice "drag and drop your site folder here".
3. Arrastra tu carpeta dist a esa zona.
4. En segundos tu app estará publicada con una URL como nombre-aleatorio.netlify.app.

Este método es ideal para demos rápidos. No conecta con GitHub, así que cada actualización requiere repetir el proceso.

Método 2 — Conexión con GitHub (recomendado)

1. En Netlify haz clic en Add new site > Import an existing project.
2. Conecta tu cuenta de GitHub y selecciona el repositorio.
3. Confirma la configuración:
   • Build command: npm run build
   • Publish directory: dist
4. Haz clic en Deploy site.

Desde ahora, cada git push despliega tu app automáticamente.

Problema común: rutas que regresan error 404

Este es el error más frecuente al desplegar una app con React Router. Cuando el usuario navega directamente a una URL como mi-app.vercel.app/productos, el servidor busca un archivo productos/index.html. Ese archivo no existe. Solo existe dist/index.html.

Solución en Vercel

Crea un archivo vercel.json en la raíz de tu proyecto:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Esto le dice a Vercel: "Para cualquier ruta, sirve index.html y deja que React Router maneje la navegación."

Solución en Netlify

Crea un archivo _redirects (sin extensión) dentro de la carpeta public de tu proyecto:

/* /index.html 200

Vite copia automáticamente el contenido de public a dist durante el build. Netlify leerá ese archivo y redirigirá correctamente todas las rutas.

Errores comunes al hacer build y despliegue

Error 1 — Variables de entorno expuestas.

Nunca pongas claves secretas (como tokens de API o contraseñas) directamente en tu código React. El build de producción convierte todo en JavaScript visible en el navegador. Cualquier usuario puede ver esas claves.

Usa variables de entorno con el prefijo VITE_ y guárdalas en un archivo .env:

VITE_API_URL=https://api.miapp.com

En tu código las lees así:

const url = import.meta.env.VITE_API_URL;

Agrega .env a tu .gitignore para que no se suba a GitHub.

Error 2 — Olvidar ejecutar npm run build antes del drag & drop en Netlify.

Algunos principiantes arrastran la carpeta raíz del proyecto en lugar de dist. La carpeta raíz contiene código fuente, no el build optimizado. Siempre arrastra la carpeta dist.

Error 3 — Dependencias instaladas como devDependencies que el build necesita.

Algunas plataformas solo instalan dependencies en producción. Si usas una librería en tu código y la instalaste con npm install --save-dev, el build fallará en la plataforma. Instala las librerías de producción sin la bandera --save-dev.

Lo que lograste en este curso

Completaste las nueve lecciones del curso. Estos son los conceptos que ya dominas:

• Componentes y JSX: La base de cualquier interfaz en React.
• Props y Estado: Cómo los datos fluyen dentro de tu app.
• Eventos y formularios: Interacción real con el usuario.
• useEffect: Sincronización con APIs externas.
• React Router: Navegación entre pantallas sin recargar la página.
• Build y despliegue: Publicar tu app en internet de forma profesional.

Próximos pasos recomendados

Con esta base puedes avanzar hacia temas más avanzados. Estos son los más demandados en el mercado laboral mexicano:

1. Gestión de estado global con Zustand o Redux Toolkit. Útil cuando tu app crece y muchos componentes necesitan los mismos datos.
2. Next.js. El framework más popular sobre React. Agrega renderizado del lado del servidor (SSR), rutas automáticas y mejor SEO. Empresas como Rappi y Clip lo usan en México.
3. TypeScript con React. Agrega tipos estáticos a tu código. Reduce errores y mejora el autocompletado en tu editor.
4. Testing con React Testing Library. Aprende a escribir pruebas automatizadas para tus componentes.
5. Consulta portales de empleo como OCC Mundial, LinkedIn o Computrabajo. Busca posiciones de "Frontend Developer React" en México. Los salarios en empresas medianas van de $18,000 a $28,000 mensuales para perfiles junior con proyectos en su portafolio.

El mejor siguiente paso inmediato es construir un proyecto propio y desplegarlo. Un portafolio con dos o tres apps publicadas vale más que cualquier lista de tecnologías en un CV.