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.

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.

Escogemos JavaScript como lenguaje de desarrollo y al presionar intro ya tendremos creado nuestro nuevo proyecto.

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.

Comando para desinstalar la instalación global de Create React App con npm, yarn y limpiar la caché sin romper tus proyectos.

Cada vez que ocurren algunos cambios en el ecosistema JavaScript, es fácil encontrarse con pequeños errores que frenan el flujo de trabajo. Uno bastante habitual aparece al intentar crear una nueva aplicación React y descubrir que existe una instalación global antigua de Create React App.

Esto puede generar conflictos porque, desde hace tiempo, la recomendación es evitar depender de una versión global instalada en tu equipo y usar directamente npx. Si estás trabajando en proyectos React, también puede venirte bien repasar esta guía sobre TypeScript: primeros pasos para mejorar la base técnica de tus aplicaciones.

El aviso suele aparecer de forma parecida a este mensaje:

You are running `create-react-app` 5.0.1, which is behind the latest release.

La instalación global de Create React App puede quedar desactualizada y provocar errores al iniciar nuevos proyectos. Por eso, lo más recomendable es eliminar esa instalación global, limpiar la caché y volver a ejecutar el comando correcto.

Eliminar la instalación global de Create React App con npm

Si instalaste Create React App de forma global usando npm, puedes eliminarlo con este comando

npm uninstall -g create-react-app

Este comando desinstala el paquete global de tu sistema. Es decir, elimina esa versión antigua que puede estar interfiriendo cada vez que intentas crear una nueva aplicación React.

Si sueles trabajar desde terminal, quizá también te interese este artículo sobre atajos y trucos para usar Visual Studio Code desde la terminal en Mac, porque ayuda a mejorar bastante el flujo de trabajo diario.

Eliminar Create React App global con Yarn

Si en lugar de npm utilizaste Yarn para instalarlo de forma global, el comando sería este:

yarn global remove create-react-app

El resultado es el mismo: quitar la instalación global para evitar que el sistema siga utilizando una versión antigua de Create React App.

Limpiar la caché 🧹

npx clear-npx-cache

Y con esto ya podemos continuar creando nuestra nueva aplicación con React ✌

npx create-react-app your-app-name

Por qué conviene evitar la instalación global

Instalar herramientas globalmente puede parecer cómodo, pero tiene un inconveniente importante: con el tiempo pueden quedar desactualizadas. Cuando eso ocurre, los nuevos proyectos pueden empezar con una configuración antigua o mostrar avisos inesperados.

Por eso, en muchos casos es preferible usar herramientas como npx, que permiten ejecutar paquetes sin mantener una instalación permanente en tu equipo. Este enfoque ayuda a mantener un entorno de trabajo más limpio y reduce los conflictos entre versiones.

En resumen: si Create React App te muestra un aviso de versión antigua, lo mejor es desinstalar la versión global, limpiar la caché y crear el proyecto con npx. Es una solución rápida, sencilla y suficiente para evitar conflictos al iniciar nuevas aplicaciones React.