LuisLlamas Logo
ES
creacion-proyecto-react

Cómo crear un proyecto de React con Vite

  • 2 min
  • Iniciación

Vamos a comenzar con React creando nuestro primer proyecto. Para eso, usaremos Vite, que es la recomendación oficial.

Vite una herramienta de construcción moderna para proyectos web que ofrece una experiencia de desarrollo extremadamente rápida.

Anteriormente se empleaba create-react-app ha quedado obsoleto. Ya no es la opción recomendada para crear proyectos en React.

Requisitos previos

Antes de meternos en harina con React, es necesario tener estos requisitos básicos:

  1. Node.js y NPM: Para gestionar dependencias y ejecutar scripts.
  2. Editores de código: Como Visual Studio Code

Es decir, más o menos las herramientas habituales para hacer cualquier desarrollo web. Pero, por si no conocéis alguno, os dejo enlacitos 👇.

Si queréis saber más, consultad

Creación de un proyecto React

Si tenemos todo instalado, ya podemos crear nuestro proyecto de React. Abre tu terminal y ejecuta el siguiente comando:

npm create vite@latest mi-app --template react
  • mi-app es el nombre del proyecto (puedes cambiarlo por el que desees).
  • --template react indica que el proyecto usará React.

Te saldrá un asistente con opciones. Selecciona React

create-vite-react

Luego, puedes seleccionar una variante (TypeScript o JavaScript). Para este tutorial, selecciona JavaScript.

Finalmente, navega al directorio del proyecto e instala las dependencias necesarias:

cd mi-app
npm install

Enhorabuena, ya tienes tu proyecto inicializado 🎉.

Si en algún momento tienes que instalar Vite en un proyecto ya existente, simplemente tienes que añadir estos dos paquetes.

npm install -D react react-dom @vitejs/plugin-react

Iniciar el servidor de desarrollo

Ahora, para trabajar en nuestro proyecto, tenemos que poder verlo (estaría bien, sí, la verdad). Para eso, podemos iniciar el servidor de desarrollo.

Navegamos a la carpeta del proyecto (si aún no estás ahí) e inicia el servidor de desarrollo ejecutando:

npm run dev

Este comando iniciará un servidor de desarrollo y te proporcionará la URL (normalmente http://localhost:5173) donde se está ejecutando tu aplicación.

La terminal te mostrará un enlace similar a este:

VITE vX.X.X  ready in Xms
Local: http://localhost:5173/

Ahora abre el navegador y visita http://localhost:5173/ para ver tu aplicación funcionando. 🚀

first-react-app

No es la mejor App del mundo pero ¡oye!. Significa que todo te ha funcionado correctamente 😉.

Vite tiene Hot Reload. Esto significa que los cambios que hagas en el codigo se muestran instantáneamente en este “preview”, y es una gran ayuda para el desarrollo.

Construcción y Despliegue

Cuando hayas terminado de programar tu aplicación (dentro de muchos muchos días), en algún momento tendremos que construir la aplicación final

Para hacer el generar una versión optimizada de tu aplicación, usa:

npm run build

Esto creará una carpeta dist/ con los archivos listos para desplegar en un servidor o servicio.

En esta página