Hoy vamos a aprender a utilizar Vite.js dentro de nuestros proyectos React.
Vite.js es una herramienta de construcción y desarrollo de aplicaciones web que se enfoca en la velocidad y la eficiencia. A continuación, se presentan algunas de las razones por las que es bueno usar Vite.js:
- Rápido tiempo de compilación: Vite.js utiliza una arquitectura de servidor de desarrollo basada en ESM (Módulos JavaScript) que permite una compilación más rápida y eficiente de tu código. Esto significa que los tiempos de compilación son mucho más rápidos que los de otras herramientas de construcción como Webpack.
- Recarga en caliente rápida: Vite.js utiliza una técnica de recarga en caliente basada en ESM que permite una recarga más rápida y eficiente de tu código. Esto significa que los cambios que hagas en tu código se reflejarán en tu aplicación de inmediato, sin necesidad de recargar la página.
- Soporte para múltiples marcos de trabajo: Vite.js es compatible con múltiples marcos de trabajo, incluyendo React, Vue.js y Svelte. Esto significa que puedes utilizar Vite.js para desarrollar aplicaciones web con cualquier marco de trabajo que elijas.
- Configuración simple: Vite.js tiene una configuración simple y fácil de entender que te permite personalizar tu entorno de desarrollo de acuerdo a tus necesidades.
- Integración con TypeScript: Vite.js tiene una excelente integración con TypeScript, lo que significa que puedes utilizar TypeScript en tu proyecto sin tener que configurar nada adicional.
En resumen, Vite.js es una excelente herramienta de construcción y desarrollo de aplicaciones web que te permite desarrollar aplicaciones web de manera más rápida y eficiente. Si buscas una herramienta de construcción y desarrollo de aplicaciones web que sea rápida, eficiente y fácil de usar, Vite.js es una excelente opción.
Vamos a utilizar Vite como bundle, puedes consultarlo en esta web: https://vitejs.dev/guide/
Lo primero que vamos a hacer es utilizar el comando de creación de proyecto con Vite (asegurate de que tienes npm instalado).
npm create vite
Una vez utilizado el comando, nos pedirá instalar la dependencia, decimos que sí.
Nos pedirá un nombre de proyecto.
Una vez instalado nos va a aparecer el menú de frameworks con los que podemos usar Vite.
Elegimos React:
Ahora elegimos el tipo de lenguaje que queremos utilizar. En mi caso elegimos TypeScript.
Una vez instalado, accedemos a la carpeta de nuestro proyecto y escribimos:
npm install
Instalamos todas las dependencias.
Finalmente ejecutamos:
npm run dev
Para ejecutar nuestra web, podemos elegir dónde queremos ejecutarlo pulsando la tecla control (comand si es Mac) y clicando sobre la configuración de arranque:
En mi caso elijo Local (http://localhost:5173/)
Y arranca la web:
Para generar el código desplegable usamos:
npm run build
Y genera los archivos necesarios dentro de la carpeta public.
Os recomiendo una estructura de proyecto para que podáis empezar a desarrollar:
- assets: para añadir los recursos, imágenes o vídeos.
- componets: para añadir los distintos componentes como botones, headers, menús etc.
- contexts: elementos de contexto y guardar/cargar datos
- hooks: elementos comunes a nivel de app
- pages: las distintas páginas compuestas por distintos components.
- services: servicios remotos, API REST.
- styles: CSS con estilos.
- utils: utilidades desarrolladas.
Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.