A la hora de trabajar con React, podemos llegar a tener distintas dificultades, sobre todo cuando estamos aprendiendo. Una de estas principales dificultades es configurar correctamente el proyecto para poder inicializarlo, y para solucionarnos este problema se creó Vite JS
¿Qué es ViteJS?
Entonces, ¿qué es ViteJS?
Pues ViteJS es una herramienta desarrollada para Frontend por Evan You, la cual permite inicializar un proyecto JavaScript desde 0, dejándolo todo configurado, incluyendo el uso de
frameworks y librerías como ReactJS, VueJS, Angular, etc.
En nuestro caso lo utilizaremos para crear un proyecto de ReactJS, por lo que comenzaremos con los requisitos necesarios para crear nuestro primer proyecto con ViteJS:
¿Qué necesito antes de empezar con ViteJS?
Antes de empezar a montar la estructura de nuestro proyecto con ViteJS, tenemos que asegurarnos de tener ciertos componentes instalados en nuestro PC.
Comenzamos con NodeJS, para comprobar si tenemos NodeJS instalado, debemos abrir una terminal nueva, ponemos el siguiente comando:
Si no nos sale la versión o no lo tenemos instalado, lo podemos descargar desde aquí.
¿Cómo inicializo el proyecto?
Una vez comprobado que tenemos NodeJS
instalado, procedemos a abrir un terminal en la carpeta donde vamos a crear
nuestro proyecto (en este caso la crearemos en ‘Desktop’), y ponemos el
siguiente comando:
Indicamos el nombre del proyecto, el nombre del paquete, seleccionamos un framework / librería y su variante, ya que también se puede escribir en TypeScript y sus derivados.
Por último, escribimos ‘npm run dev’, y
listo, ya tenemos arrancado un servidor en local que nos va mostrando los
cambios según vamos guardando el código y la estructura del proyecto hecha
De tal manera que si abrimos ya el código
en nuestro editor (en nuestro caso es Visual Studio Code), la estructura del
proyecto quedaría de la siguiente manera:
Si abrimos el link que nos aparece en la terminal se nos abre la siguiente página por defecto:
¿Qué te ha parecido? Déjanos en comentarios tu opinión
Si buscas más información acerca de React y nuestros servicios de Desarrollo de Software, dale click a éstos enlaces: