Para trabajar con react es necesario instalar NodeJs y tener un manejador de paquetes como npm, pero tenemos la posibilidad de trabajar con Vite que lo mencionaremos mas adelante. En este post trabajaremos con Vite para trabajar con React.
✅ Requisitos previos
-
Tener instalado Node.js (versión recomendada:
18.xo superior). Puedes verificar si tienes Node y npm:node -vnpm -v
🚀 Pasos para instalar React con Vite
⏺️ Instalar NVM
En el siguiente post encontrará a detalle como realizar la instalación y configuración de nodejs, recomiendo trabajar con NVM por si desea o tiene distintas versiones de nodejs Cómo instalar y usar NVM para gestionar versiones de Node.js en Ubuntu y Windows.
Verificamos que la instalación de NodeJs este correcta con:
node -v
npm -v
Recomendamos que trabaje con las versiones de node LTS mas recientes como 18.x o 20.x
⏺️ Trabajar con vite
Vite es un bundler creado por Evan You (el creador de Vue.js) que prioriza la velocidad y la simplicidad. Inicialmente desarrollado para Vue.js, ahora soporta múltiples frameworks como React, Preact, Svelte, y más. Vite tiene dos enfoques principales:
- Desarrollo rápido: Usa un servidor de desarrollo basado en ES Modules para evitar reempaquetar toda la aplicación.
- Producción optimizada: Utiliza Rollup bajo el capó para crear paquetes optimizados.
Para mas información puede consultar vite
⏺️ Como empezar con vite
Para trabajar con vite, necesitamos tener NodeJs, que la instalación se explica en el post, se recomienda que tengamos nodejs superior a v18+
Procedemos a crear un proyecto en vite, para ello procedemos a ejecutar el siguiente comando:
npm create vite@latest
Ahora en la terminar nos pedirá que sigamos unos pasos para crear el proyecto en donde nos pedirá lo siguiente:
- Project name: » nombre-del-proyecto
- Select a framework: » React
- Select a variant: » JavaScript
Finalizado el proceso anterior, procedemos a instalar las dependencias del proyecto, para ello ingresamos a la carpeta del proyecto con `cd nombre-del-proyecto` y ejecutamos el siguiente comando:
cd nombre-del-proyecto
npm install
Por ultimo para probar, ejecutar el servidor
npm run dev
Donde nos dará como resultado:
> react@0.0.0 dev
> vite
VITE v6.0.3 ready in 2782 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
⏺️ Empaquetar tu proyecto para producción
Para empaquetar tu proyecto para producción procedemos a ejecutar el siguiente comando:
npm run build
Como resultado mostrará
> react@0.0.0 build
> vite build
vite v6.0.3 building for production...
✓ 42 modules transformed.
dist/index.html 0.46 kB │ gzip: 0.30 kB
dist/assets/index-n_ryQ3BS.css 1.39 kB │ gzip: 0.71 kB
dist/assets/index-DhWtGeTy.js 178.64 kB │ gzip: 59.09 kB
✓ built in 1.13s
Una vez construido ejecutamos un previo para ver el producto final
npm run preview
Como resultado:
> react@0.0.0 preview
> vite preview
➜ Local: http://localhost:4173/
➜ Network: use --host to expose
➜ press h + enter to show help