Instalar React

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.x o superior). Puedes verificar si tienes Node y npm: node -v npm -v

Pasos para instalar React con Vite

Instalar NVM

A continuación, encontrara cómo realizar la instalación y configuración de NodeJs, recomiendo trabajar con NVM por si desea o tiene distintas.

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

Cómo 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: