Jeff Bruchado
Volver al blog

Create React App Deprecado: Migrando para Vite y el Futuro de React en 2025

Hola HaWkers, febrero de 2025 marcó el fin de una era: Create React App (CRA) fue oficialmente deprecado por el equipo de React.

¿Te acuerdas cuando npx create-react-app my-app era la forma estándar de iniciar cualquier proyecto React? Esa era acabó, y una nueva comenzó.

El Anuncio Oficial

El 14 de febrero de 2025, el equipo de React publicó en el blog oficial: "Sunsetting Create React App". El mensaje fue claro:

"Create React App fue deprecado para nuevas apps. Aplicaciones existentes deben migrar para un framework, o migrar para una build tool como Vite, Parcel, o RSBuild."

¿Por Qué Create React App Fue Deprecado?

Varios factores llevaron a esta decisión:

1. Velocidad de Build

# Create React App (Webpack)
npm start
# Cold start: ~30-45 segundos
# Hot reload: ~2-5 segundos

# Vite (Rollup + esbuild)
npm run dev
# Cold start: ~1-3 segundos 🚀
# Hot reload: ~50-200ms ⚡

2. Mantenimiento Estancado

  • Última actualización significativa: 2021
  • Issues acumuladas sin respuesta
  • Dependencias desactualizadas

3. Cambio de Paradigma
React cambió su recomendación de SPA (Single Page Application) para frameworks full-stack con Server Components.

Las Alternativas Recomendadas

El equipo de React recomienda tres caminos diferentes dependiendo de tu caso de uso:

1. Frameworks Full-Stack (Recomendación Principal)

Next.js (Vercel)

npx create-next-app@latest my-app

Ideal para:

  • Sites y aplicaciones de producción
  • SEO es importante
  • Servidor y cliente integrados
  • Quieres React Server Components

Remix (Shopify)

npx create-remix@latest my-app

Ideal para:

  • Performance optimizada
  • Progressive enhancement
  • Nested routing avanzado

2. Build Tools Modernas (Para SPAs)

Vite (Recomendación para SPAs)

npm create vite@latest my-app -- --template react-ts

Ideal para:

  • SPAs tradicionales
  • Prototipado rápido
  • Aplicaciones sin necesidad de SSR
  • Máxima velocidad de desarrollo

Parcel

npx create-react-app my-app --template parcel

Ideal para:

  • Zero configuración
  • Build simple

RSBuild (Basado en Rspack)

npm create rsbuild@latest my-app

Ideal para:

  • Performance extrema
  • Compatibilidad con Webpack

Migración de CRA para Vite: Guía Paso a Paso

Vamos a migrar un proyecto Create React App existente para Vite. Este es el camino más común para SPAs.

Paso 1: Análisis del Proyecto Actual

# Proyecto CRA típico
my-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── package.json
└── node_modules/

Paso 2: Backup y Preparación

# Crear branch para migración
git checkout -b migrate-to-vite

# Backup del package.json
cp package.json package.json.backup

Paso 3: Instalar Vite

# Remover dependencias de CRA
npm uninstall react-scripts

# Instalar Vite y plugins
npm install -D vite @vitejs/plugin-react

Paso 4: Crear vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],

  // Resolver paths (si usabas jsconfig.json o tsconfig paths)
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    }
  },

  // Configuración de servidor dev
  server: {
    port: 3000,
    open: true,
    host: true
  },

  // Build config
  build: {
    outDir: 'dist',
    sourcemap: true,
    // Configuración para chunk splitting optimizado
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'ui-vendor': ['@mui/material', '@emotion/react', '@emotion/styled']
        }
      }
    }
  },

  // Variables de entorno
  envPrefix: 'VITE_',

  // CSS
  css: {
    modules: {
      localsConvention: 'camelCase'
    }
  }
});

Paso 5: Mover y Actualizar index.html

# CRA mantiene index.html en public/
# Vite lo necesita en la raíz
mv public/index.html index.html

Actualizar el index.html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!-- IMPORTANTE: Vite necesita esta referencia -->
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

Paso 6: Actualizar Variables de Entorno

# CRA usa REACT_APP_*
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=abc123

# Vite usa VITE_*
VITE_API_URL=https://api.example.com
VITE_API_KEY=abc123

Actualizar código:

// Antes (CRA)
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

// Después (Vite)
const apiUrl = import.meta.env.VITE_API_URL;
const apiKey = import.meta.env.VITE_API_KEY;

Para TypeScript, crear src/vite-env.d.ts:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_API_KEY: string;
  // Añade otras variables aquí
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Paso 7: Actualizar package.json Scripts

{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.0",
    "typescript": "^5.6.0",
    "vite": "^5.4.0"
  }
}

Paso 8: Ajustes Comunes

1. Importaciones de Assets

// CRA permite importar archivos de la carpeta public
// ❌ No funciona en Vite
<img src="/images/logo.png" alt="Logo" />

// ✅ Vite
import logoUrl from './assets/logo.png';
<img src={logoUrl} alt="Logo" />

// O mantén en la carpeta public y usa camino absoluto
// public/images/logo.png
<img src="/images/logo.png" alt="Logo" />

2. SVG como Componentes

// CRA con SVGR incorporado
import { ReactComponent as Logo } from './logo.svg';

// Vite necesita configuración
npm install -D vite-plugin-svgr
// vite.config.ts
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgr()
  ]
});
// Ahora funciona
import { ReactComponent as Logo } from './logo.svg?react';

3. Global CSS

// index.tsx o App.tsx
import './index.css';
import './App.css';

Funciona de la misma forma, sin cambios.

4. CSS Modules

// Button.module.css
.button {
  background: blue;
}

// Button.tsx
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click</button>;
}

Funciona de la misma forma.

Paso 9: Testar la Migración

# Desarrollo
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

Comparación de Performance

Tiempo de Build

# Create React App (Webpack)
npm run build
# Tiempo: ~45-60 segundos
# Bundle size: ~200-300 KB (minified + gzipped)

# Vite (Rollup + esbuild)
npm run build
# Tiempo: ~5-10 segundos 🚀
# Bundle size: ~150-200 KB (minified + gzipped)

# Mejora: 6-10x más rápido

Tiempo de Dev Server

# CRA
npm start
# Cold start: 30-45s
# Hot reload: 2-5s

# Vite
npm run dev
# Cold start: 1-3s 🚀
# Hot reload: 50-200ms ⚡

# Mejora: 10-30x más rápido

Troubleshooting: Problemas Comunes

1. "require is not defined"

// ❌ CommonJS no funciona en Vite
const module = require('./module');

// ✅ Usa ES modules
import module from './module';

2. "process is not defined"

// ❌ No funciona
if (process.env.NODE_ENV === 'production') {}

// ✅ Vite way
if (import.meta.env.PROD) {}

O configura en vite.config.ts:

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
});

3. Absolute Imports

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
// vite.config.ts
resolve: {
  alias: {
    '@': path.resolve(__dirname, './src')
  }
}

El Futuro del Tooling React

Tendencias para 2025-2026

1. Vite como Estándar

  • Stack Overflow Survey 2025: Vite supera Webpack
  • Adoptado por Vue, React, Svelte, Solid

2. Rspack (Rust-based)

  • Compatible con Webpack
  • Performance próxima a Vite
  • Migración más fácil de proyectos Webpack grandes

3. Turbopack (Vercel)

  • Integrado a Next.js
  • Escrito en Rust
  • Promete ser aún más rápido que Vite

4. Farm (Nueva Generación)

  • Extremadamente rápido
  • Compatibilidad con Vite plugins
  • Optimizaciones automáticas

Checklist de Migración

- [ ] Backup del proyecto (git branch o copia)
- [ ] Instalar Vite y dependencias
- [ ] Crear vite.config.ts
- [ ] Mover index.html para raíz
- [ ] Actualizar index.html con script module
- [ ] Renombrar variables de entorno (REACT_APP_* → VITE_*)
- [ ] Actualizar código para import.meta.env
- [ ] Ajustar imports de assets si necesario
- [ ] Configurar SVGR si usa SVG como componentes
- [ ] Actualizar scripts del package.json
- [ ] Testar npm run dev
- [ ] Testar npm run build
- [ ] Testar npm run preview
- [ ] Verificar funcionalidades críticas
- [ ] Actualizar CI/CD si necesario
- [ ] Actualizar documentación del proyecto

Si estás interesado en otros cambios importantes en el ecosistema React, recomiendo revisar otro artículo: React Foundation: La Nueva Era del Ecosistema React Bajo la Linux Foundation donde descubrirás cómo la gobernanza de React está cambiando en 2025.

¡Vamos a por ello! 🦅

📚 ¿Quieres Profundizar Tus Conocimientos en JavaScript?

Este artículo cubrió herramientas de build modernas para React, pero hay mucho más para explorar en el desarrollo web moderno.

Desarrolladores que invierten en conocimiento sólido y estructurado tienden a tener más oportunidades en el mercado.

Material de Estudio Completo

Si quieres dominar JavaScript de básico a avanzado, preparé un guía completo:

Opciones de inversión:

  • $9.90 USD (pago único)

👉 Conocer la Guía JavaScript

💡 Material actualizado con las mejores prácticas del mercado

Comentarios (0)

Este artículo aún no tiene comentarios 😢. ¡Sé el primero! 🚀🦅

Añadir comentarios