# Generar proyectos de React con Vite

> Vite es una alternativa mejorada a la herramienta Create React app.Con Vite también podemos trabajar con otros frameworks como Vue o lenguajes como Typescript por lo que a…

- URL canónica: https://www.martagonzalez.dev/blog/generar-proyectos-de-react-con-vite/
- Fecha de publicación: 2022-09-17T12:54:32
- Última actualización: 2026-06-15T11:52:37

---

![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/09/generar-proyectos-react-vite-terminal-1024x683.avif)
 
Crear un proyecto de React desde cero no tiene por qué ser un proceso lento ni complicado. Durante mucho tiempo, muchas personas empezaban con herramientas más pesadas o configuraciones manuales que podían resultar abrumadoras, especialmente cuando solo querías comenzar a practicar componentes, hooks o pequeñas interfaces.
 
Hoy, una de las formas más cómodas de iniciar un proyecto moderno es generar proyectos de React con Vite . Vite permite crear una base de desarrollo rápida, sencilla y preparada para trabajar con JavaScript o TypeScript, sin tener que pelearte desde el primer minuto con configuraciones complejas.
 
Si estás dando tus primeros pasos con React, este flujo te ayudará a tener una estructura inicial limpia. Y si ya vienes trabajando con herramientas modernas de frontend, también te servirá para montar proyectos de prueba, prototipos o aplicaciones pequeñas de forma mucho más ágil.
 
## Qué es Vite y por qué usarlo con React
 
Vite es una herramienta de desarrollo frontend pensada para crear proyectos modernos de manera rápida. Su principal ventaja es que ofrece un entorno de desarrollo muy ágil, con recarga rápida y una configuración inicial bastante sencilla.
 
En el caso de React, Vite permite crear un proyecto base con todo lo necesario para empezar: estructura de carpetas, archivos principales, scripts de desarrollo y configuración inicial. Esto resulta especialmente útil cuando quieres centrarte en aprender o construir la interfaz, en lugar de dedicar demasiado tiempo a preparar el entorno.
 
Además, si estás trabajando en proyectos donde también usas animaciones, componentes reutilizables o una arquitectura más cuidada, Vite encaja muy bien con flujos modernos. Por ejemplo, puedes combinarlo más adelante con técnicas explicadas en el artículo sobre cómo combinar Tailwind CSS con animaciones personalizadas o profundizar en decisiones de interfaz desde una perspectiva más visual.
 
## Crear nuevo proyecto
 
Desde nuestra Terminal ejecutaremos el siguiente comando para crear un nuevo proyecto con Vite.
 
npm create vite Escribimos un nombre para nuestro proyecto y le damos a intro.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/09/crear-proyecto-de-react-con-vite-01.jpg)
 
A continuación nos moveremos con las flechas del teclado para escoger la opción de React como framework con el que trabajaremos y presionamos intro.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/09/crear-proyecto-de-react-con-vite-02.jpg)
 
Escogemos JavaScript como lenguaje de desarrollo y al presionar intro ya tendremos creado nuestro nuevo proyecto.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/09/crear-proyecto-de-react-con-vite-03.jpg)
 
Accedemos al directorio del proyecto.
 
cd vite-project Instalamos las dependencias.
 
npm install Y hacemos correr la aplicación.
 
npm run dev Vite nos indica el host y el puerto donde está ejecutandose nuestra aplicación. 
 
Accedemos desde el navegador presionando CTRL+clic (WIN) o COMMAND+clic (MAC) sobre el enlace.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/09/crear-proyecto-de-react-con-vite-05.jpg)