React: Introducción y entorno

¿Qué es Vite?

Vite es una herramienta de construcción que proporciona un entorno de desarrollo rápido y eficiente. Su principal ventaja es la velocidad, gracias a su servidor de desarrollo basado en módulos ES y su técnica de preempaquetado. Esto permite una recarga en caliente casi instantánea, mejorando significativamente la experiencia del desarrollador.

Instalación de Vite

Para empezar, necesitamos tener Node.js y npm instalados en nuestro sistema. Si no los tienes, puedes descargarlos desde nodejs.org.

Primero, crea un nuevo proyecto utilizando Vite. Abre tu terminal y ejecuta:

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

Este comando creará una nueva aplicación React 19 utilizando Vite como herramienta de construcción. El argumento --template react especifica que queremos usar la plantilla de React.

Configuración del proyecto

Navega al directorio del proyecto recién creado:

cd my-react-app

Instala las dependencias necesarias:

npm install

Una vez instaladas las dependencias, puedes iniciar el servidor de desarrollo:

npm run dev

Esto iniciará el servidor de desarrollo y podrás ver tu aplicación React 19 en el navegador en http://localhost:3000.

Estructura del proyecto

La estructura del proyecto generado por Vite es bastante sencilla y limpia:

• index.html: El punto de entrada de la aplicación.
• src/: Carpeta donde reside el código fuente de la aplicación.
• main.jsx: Punto de entrada de JavaScript, donde se monta el componente raíz de React.
• App.jsx: Componente principal de la aplicación.
• package.json: Archivo de configuración del proyecto, donde se gestionan las dependencias y scripts.

Ventajas de usar Vite con React 19

1. Velocidad: Vite utiliza un servidor de desarrollo basado en módulos ES, lo que permite una recarga en caliente casi instantánea. Esto mejora la productividad del desarrollador.
2. Configuración mínima: Vite proporciona una configuración por defecto que es suficiente para la mayoría de los proyectos. No es necesario configurar Webpack o Babel manualmente.
3. Soporte para módulos ES: Vite utiliza módulos ES nativos del navegador, lo que reduce el tiempo de construcción y mejora el rendimiento.

Integración con herramientas adicionales

Vite es compatible con una amplia gama de herramientas y plugins. Por ejemplo, si quieres añadir soporte para TypeScript, simplemente instala las dependencias necesarias y configura tu proyecto.

Para añadir TypeScript, ejecuta:

npm install --save-dev typescript @types/react @types/react-dom

Crea un archivo tsconfig.json en la raíz del proyecto con la configuración básica:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Renombra tus archivos .jsx a .tsx y ajusta los importes según sea necesario.