Vamos a crear una app en React y levantarla en cuestión de solo unos minutos con Vite.js.

¿Que es Vite.js?

ViteJS es una herramienta de compilación creada por Evan You (creador de VueJS) que nos ayudará a crear aplicaciones frontend y tener a nuestra disposición una serie de herramientas para desarrollar nuestras aplicaciones web. Se centra en la velocidad y el rendimiento mejorando la experiencia de desarrollo.

ViteJS consta de las siguientes características:

• Un servidor de desarrollo que proporciona amplias mejoras de características sobre los módulos ES nativos, por ejemplo, Hot Module Replacement (HMR) extremadamente rápido.

• Un comando de compilación que agrupa su código con Rollup, preconfigurado para generar activos estáticos altamente optimizados para producción.

ViteJS nos proporciona ajustes preestablecidos para:

1. Vanilla
2. Vue
3. React
4. Preact
5. Lit
6. Svelte

¿Para qué sirve ViteJS?

ViteJS nos ayudará a tener un servidor de compilación para nuestros frameworks frontend. Es decir, ViteJS tomará nuestro proyecto de cualquier framework (React, Vue, Svelte, etc) y lo compilará y empaquetará a módulos ESM nativos con el fin de optimizar nuestra aplicación para los navegadores web de hoy en día.

Actualmente hay muchísimas opciones para poder compilar y transpilar código JavaScript, sin embargo, te contaré un poco de contexto para que podamos entender porque ViteJS es una buena propuesta.

Antes que los módulos ES (ECMAScript) estuvieran disponibles en los navegadores, nosotros los desarrolladores web no teníamos un mecanismo totalmente nativo para hacer nuestras aplicaciones modulares, por eso, se crearon diferentes herramientas como webpack que rastrean, procesan y compilan nuestros proyectos y los transpilan a módulos JS a través de un método llamado “concatenación”.

Sin embargo, a medida que el tiempo va pasando, los desarrollos de aplicaciones se han vuelto cada vez más grandes y complejos, lo que se traduce en archivos o módulos muy pesados por lo tanto, nuestras aplicaciones se vuelven cada vez más lentas y difíciles de procesar en navegadores de baja gama.

¿Por qué utilizar ViteJS?

Una de las cosas por las cuales utilizar ViteJS podría ser un buen punto para tus proyectos es tener aplicaciones modernas altamente optimizadas.

Otra de las cosas por la cual podría ser beneficioso para tus proyectos, es la compatibilidad para TypeScript, ViteJS es una herramienta que se puede utilizar con o sin TypeScript sin ningún problema.

La tercera ventaja que encuentro en ViteJS es que puedes compilar casi cualquier framework de JavaScript, por lo cual, puedes simplificar y unificar los métodos de compilación para todos tus proyectos, ahorrando un tiempo considerable en temas de mantenimiento de tu aplicación.

Creemos una app de React

Para crear una app de React con ViteJs tenemos que seguir los siguientes pasos, dependiendo de la versión de npm que estemos utilizando:

# npm 6.xnpm create vite@latest my-react-app --template react# npm 7+, extra double-dash is needed:npm create vite@latest my-react-app -- --template react

Aquí estamos creando una app con el nombre "my-react-app" utilizando el template "react".

Una vez ejecutemos lo anterior, en tan solo unos segundos, veremos que vite nos indica los pasos a continuación:

Done. Now run:  cd my-react-app  npm install  npm run dev

Siguiendo estos pasos, entramos en nuestra carpeta "my-react-app".

Ejecutamos "npm install" (O "npm i").

Una vez instaladas las dependencias, podemos levantar la apliación con "npm run dev" y vemos que ya esta disponible en el puerto indicado:

  VITE v3.1.3  ready in 511 ms  ➜  Local:   http://localhost:5173/  ➜  Network: use --host to expose

Podemos ver la aplicación creada desde nuestro navegador, entrando a la url indicada y... !Tenemos nuestra app funcionando!

Espero que este artículo te haya sido de ayuda!

Si te ha gustado o quieres saber más sobre esta o cualquier otra tecnología puedes hacérmelo saber a través de los comentarios o siguiéndome en cualquier red social a@fullsnacker!