앱을 만들고 5분 안에 반응하세요.

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

¿Que es Vite.js?

ViteJS는 Evan You(VueJS 작성자)가 컴파일을 생성하여 새로운 애플리케이션 프런트엔드를 만들고 새로운 배치 방식으로 웹 애플리케이션을 새로 만들었습니다. Se centra en la velocidad y el rendimiento mejorando la experiencia de desarrollo.

ViteJS 구성 요소는 다음과 같습니다.

Un servidor de desarrollo que proporciona amplias mejoras de características sobre los modulos 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:

바닐라

뷰

반응

Preact

조명

날씬한

¿Para qué sirve ViteJS?

ViteJS nos ayudará는 새로운 프레임워크 프런트엔드 컴파일 서비스를 제공합니다. Es decir, ViteJS tomará nuestro proyecto de cualquier framework (React, Vue, Svelte, etc) y lo compilará y empaquetará a modulos 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 codigo JavaScript, sin embargo, te contaré un poco de contexto para que podamos entender porque ViteJS es una buena propuesta.

Antes que los modulos ES(ECMAScript) estuvieran disponibles en los navegadores, nosotros los desarrolladores web no teníamos un mecanismo totalmente nativo para hacer nuestras aplicaciones modulees, por eso, se crearon diferentes herramientas como webpack que rastrean, procesan y compilan nuestros proyectos y los transpilan 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.

¿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 osin TypeScript sin ningun 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 상당한 en temas de mantenimiento de tu aplicación.

Creemos와 React 앱

ViteJs Tenemos que seguir los siguientes pasos, npm que estemos utilizando que estemos utilizando:

# npm 6.x
npm create vite@latest my-react-app --template react

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

"my-react-app"이라는 이름의 앱을 만들려면 템플릿 "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 dependsencias, 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 !