Vite es una herramienta moderna para crear proyectos de React desde cero, y en pocos minutos puedes tener todo listo gracias a su velocidad. Si estás aprendiendo React y buscas una alternativa rápida a configuraciones manuales, aquí te explico cómo funciona y por qué vale la pena probarla.

Lo primero: se pronuncia Vite (como en francés), no bite. Hasta el propio repositorio lo aclara en el ReadMe como una de las primeras cosas que verás [00:33]. Así que evita el error clásico de decirlo mal en público.

Por qué Vite se volvió tan popular para crear proyectos de React

Vite es la herramienta más nueva entre las opciones para crear proyectos de React, pero su crecimiento ha sido espectacular. Viene del mismo creador de Vue.js, Evan You [00:14].

Y aunque pienses "uy, Vue, no es lo mío", aquí viene lo interesante: Vite está diseñado para funcionar sin importar el framework que uses. No te amarra a Vue ni a ninguna tecnología específica.

Su gran apuesta son dos cosas: la velocidad y la developer experience [02:30]. Cuando corres la instalación, la diferencia de rapidez salta a la vista.

¿Quién creó Vite? Lo creó Evan You, el mismo desarrollador detrás de Vue.js. Aunque nació cerca del ecosistema de Vue, Vite funciona con cualquier framework, incluido React.

Cómo crear tu primer proyecto de React con Vite paso a paso

Para crear un proyecto necesitas el comando correcto en tu terminal. Aquí la sintaxis cambia un poco respecto a otras herramientas que quizás ya conoces.

El comando base es:

bash npm create vite@latest vitetest -- --template react

En este ejemplo el proyecto se llama vitetest y usamos el template oficial de ReactJS [01:38]. Un detalle importante: entre el nombre y el template no va un igual, va un espacio con doble guion [02:03].

Los pasos son sencillos:

1. Ejecuta el comando npm create vite@latest seguido del nombre de tu carpeta.
2. Entra a la carpeta del proyecto con cd vitetest.
3. Corre npm install para instalar las dependencias [02:20].
4. Abre tu editor, por ejemplo Visual Studio Code, y empieza a trabajar.

Un aviso que te ahorra dolores de cabeza: dependiendo de tu versión de npm, el comando puede cambiar un poco. En la clase se usa la versión 8.10.0 [01:12]. Si tienes una versión por debajo de la 7, la sintaxis varía, así que lo ideal es actualizar npm siempre que puedas.

¿Qué comando usa Vite para crear un proyecto de React? Usa npm create vite@latest seguido del nombre de la carpeta y el template react. Luego entras a la carpeta y corres npm install.

Qué estructura y archivos genera un proyecto de Vite

Una vez instalado, vale la pena revisar qué te entrega Vite para entender cómo trabaja por dentro.

En el package.json encuentras a React y a React DOM, y en las dev dependencies está Vite con las herramientas que necesita para su configuración interna de ReactJS [03:00].

Estos son los elementos clave que vas a notar:

• El archivo vite.config.js, donde se manipula la configuración por defecto y se usa un plugin de React para que funcione sin problemas [03:20].
• El index.html vive en la raíz del proyecto, no dentro de la carpeta public como en otras herramientas [03:34].
• Existen tanto una carpeta public como una carpeta src con sus propios assets [03:45].

¿Por qué hay un SVG en public y otro en src/assets? Porque Vite está presumiendo todas las formas en que puede manejar archivos estáticos [03:55]. Es su manera de mostrarte su flexibilidad.

Por qué Vite recomienda usar la extensión .jsx

Aquí hay un cambio que quizás no esperabas. Durante muchos proyectos de React se usa JSX con archivos .js, pero Vite recomienda usar la extensión .jsx [04:18].

La razón es técnica: cualquier empaquetador necesita saber qué tipo de extensión soporta la sintaxis especial de JSX. Si configuraras Webpack manualmente, tendrías que definirlo tú. Vite te sugiere directamente usar .jsx.

Tanto NextJS como Create React App también lo soportan, aunque son un poco más flexibles con las extensiones de archivo [04:40]. Y dentro de tus componentes puedes importar un SVG y usarlo como src de una imagen sin complicaciones [04:50].

Qué otras opciones existen para configurar proyectos de React

Vite no es la única salida. También puedes crear tu propia configuración con las herramientas que prefieras.

Webpack sigue siendo muy popular, y cada día aparecen nuevos empaquetadores: algunos escritos en JavaScript, otros apostando por C++ para ganar velocidad [05:30]. Construir esta parte manualmente es más tedioso, pero te da más flexibilidad.

Y ojo con esto: muchas empresas evalúan si sabes hacer esa configuración manual cuando preguntan por tu nivel en ReactJS [05:50]. Es una habilidad que suma puntos en entrevistas.

Lo bueno es que los fundamentos de React son universales. Aunque salgan las versiones 19, 20 o incluso la 50, los conceptos base probablemente sigan siendo los mismos [06:20]. Eso hace que migrar entre versiones sea mucho más sencillo.

Así que ya lo sabes: construye proyectos, arma tu portafolio y sigue practicando. ¿Ya probaste crear tu primer proyecto con Vite? Cuéntame cómo te fue en los comentarios.