Cómo crear un proyecto React con Vite

Crear un proyecto React con Vite es el primer paso práctico para levantar una aplicación desde cero sin configuraciones complicadas. Aquí verás la estructura técnica de un proyecto simple, qué archivos importan y por qué Vite es la opción recomendada. Ideal para quien empieza en React y quiere una base limpia.

¿Qué necesitas antes de crear un proyecto con Vite?

Antes de escribir cualquier comando, necesitas tener Node instalado en tu máquina. Es el requisito base y sin él nada funciona.

Para verificar tu versión, ejecuta node --version en la terminal. En el ejemplo se usa la versión 22.22.0, pero lo importante es este dato: necesitas al menos la versión 21 o superior para que los comandos de hoy sean compatibles [00:31].

¿Qué terminal usar? La que prefieras. En la clase se trabaja con Warp, pero cualquier terminal donde puedas conectarte y correr comandos sirve. No hay una respuesta correcta única aquí.

¿Qué versión de Node necesito para usar Vite con React? Necesitas Node 21 o superior. Verifica tu versión con node --version antes de crear el proyecto.

¿Por qué usar Vite para empezar un proyecto React desde cero?

Cuando entras a la documentación oficial en react.dev, la recomendación general es usar frameworks como Next.js, React Router v7 o Expo para aplicaciones nativas.

Pero aquí viene lo interesante: cuando quieres empezar desde cero, la primera recomendación de la propia documentación de React es Vite. Por eso es la herramienta elegida para este primer ejemplo [02:20].

Vite es un compilador que funciona con varios lenguajes, no solo con React. Por eso, al crear el proyecto, tienes que especificarle de forma directa que quieres la plantilla de React. Otra ventaja concreta: la inicialización con Vite suele ser más rápida que otras alternativas [03:02].

¿Cómo se ejecuta el comando para crear el proyecto?

El comando que usamos le pide a npm que cree un proyecto Vite con la versión más reciente. Desglosemos qué hace cada parte antes de correrlo.

• El proyecto o carpeta se llama vite-basico.
• Se le pasan flags para que use la plantilla de React.
• Como Vite no trabaja solo con React, hay que indicarlo de forma explícita.

Durante la instalación, npm hace una pregunta que no respondiste en el primer comando: si quiere inicializar de una vez. Respondes que sí y empieza a generar el scaffolding junto con las dependencias predefinidas para un proyecto React [02:44].

Un detalle práctico sobre puertos: por defecto, estas aplicaciones de Vite usan el puerto 5173. Si ya está ocupado, como en el ejemplo donde estaban en uso el 5173 y el 5174, Vite ofrece automáticamente otro, en este caso el 5175 [03:14].

¿Qué puerto usa Vite por defecto? El puerto 5173. Si está ocupado, Vite asigna uno alternativo de forma automática, como el 5174 o 5175.

¿Qué archivos contiene un proyecto React con Vite?

Una vez creado el proyecto, puedes abrirlo en tu editor favorito: Visual Studio Code, Cursor, Antigravity o Windsurf, que es el que se usa en la clase. Cualquiera funciona.

La estructura base incluye estos elementos clave:

• La carpeta node_modules, donde viven todas las dependencias ya instaladas.
• La carpeta public, con dos iconos que se usan directamente en la interfaz.
• La carpeta source, donde está todo el contenido importante de la aplicación.
• El archivo package.json, que con solo el comando inicial ya trae React, React DOM y dependencias de desarrollo como ESLint y Vite [04:10].

Un consejo sobre las versiones: no te preocupes si ves números distintos a los del ejemplo. Cada proyecto es independiente y recibe actualizaciones por seguridad y nuevas funcionalidades.

¿Qué hay dentro de la carpeta source?

Aquí vive el corazón de la aplicación. Al abrirla encuentras una carpeta assets con las imágenes que usa la interfaz, y un archivo CSS para los estilos.

Los archivos que más importan son estos tres [05:02]:

• App.jsx: es el archivo principal que renderiza todo el contenido de la aplicación. Debe estar relacionado con JSX.
• index: el archivo que se lee principalmente.
• main: el que le indica al HTML que debe renderizar todo lo que se envía desde el archivo App.

El archivo main normalmente no necesita cambios, sobre todo en esta etapa básica. Más adelante verás cómo interactuar con él y con el resto de la estructura.

¿Cómo se migra el HTML original a React?

En el ejemplo, dentro de la rama del proyecto ya se migró el HTML inicial hacia React con Vite. En la rama de la clase dos, solo se migraron el main y el h1 al archivo App.jsx [06:03].

Por eso, si abres el navegador en ese punto, la aplicación muestra únicamente un título: es el único contenido que existe en ese archivo por ahora.

La tarea que se deja es clara y concreta: migra todos los elementos de tu index.html al archivo App.jsx. Luego, en la clase tres, compara tu versión con la migración ya realizada [06:20].

Con esto queda listo tu proyecto en React, Vite y JavaScript, con el código inicial limpio y una estructura de carpetas simple para empezar a construir la parte visual. ¿Te animas a hacer la migración por tu cuenta antes de ver la solución? Cuéntame en los comentarios cómo te fue.