Configurar una interfaz frontal con React utilizando Node, npm y Vite
Asigne herramientas al estilo de Python a una pila React plus Vite: instale Node, ignore node_modules, cree la estructura básica con Vite y ejecute el servidor de desarrollo local.
Pasar de las herramientas de Python a un portafolio con React suele comenzar con una pregunta sencilla: ¿qué elementos reemplazan a venv, pip y requirements.txt?
Python aísla los paquetes en un entorno virtual y los define en un archivo de requisitos. Una interfaz frontal con React utiliza una tecnología diferente: Node.js proporciona el entorno de ejecución, npm instala los paquetes y Vite crea una aplicación local rápida. Los pasos a continuación permiten configurar un entorno de React con Vite a partir de una carpeta vacía.
1. Instalar Node.js
Las herramientas de React requieren Node.js, que incluye por defecto npm (Node Package Manager). Después de instalar Node desde la distribución oficial correspondiente a su sistema operativo, verifique la presencia de ambos archivos binarios en una terminal:
node --version
npm --version
npm desempeña un papel similar al de pip: descarga bibliotecas y registra las versiones para el proyecto. No es necesario crear un entorno virtual de tipo Python separado para este flujo de trabajo; Node y el árbol local node_modules se encargan de la isolación.
2. Crear un repositorio en GitHub
Cree un nuevo repositorio en GitHub para el sitio. Inícielo con un README.md y un .gitignore adecuados para trabajos front-end. Como mínimo, el archivo de ignorar debería listar:
node_modules/
dist/
.env
.env.*
Nunca comprometa node_modules. Esos paquetes son artefactos locales. Cualquiera que clone el repositorio puede recrearlos con npm install a partir de package.json. También mantenga los datos confidenciales fuera de Git: .env y .env.* deben estar en la lista de ignorar para que las claves API nunca aparezcan en el historial.
3. Clonar u abrir el proyecto localmente
Clona el repositorio o crea la carpeta en el disco, luego ábrela en VS Code (u otro editor). Trabajar dentro de esa carpeta mantiene la estructura básica de Vite y los comandos posteriores de npm en el lugar correcto.
4. Inicializar React con Vite
Vite proporciona una forma rápida de comenzar a desarrollar aplicaciones front-end modernas, además de un servidor de desarrollo responsive. Desde la raíz del proyecto, ejecuta:
npm create vite@latest .
El punto final . indica al generador de estructuras que coloque los archivos en la carpeta actual en lugar de crear una carpeta anidada. Cuando aparezcan los mensajes, elige:
Framework: React
Variant: JavaScript
Algunas versiones también preguntan por un herramienta de análisis de sintaxis. Aceptarla ayuda a detectar problemas de sintaxis y estilo desde temprano; puedes ajustar las reglas más tarde.
5. Instalar dependencias
Si el generador de estructuras no instaló los paquetes automáticamente, ejecuta:
npm install
npm lee package.json, crea node_modules e instala cada dependencia declarada. Ese directorio es grande y específico de la máquina, por lo que se mantiene fuera del control de versiones.
6. Iniciar el servidor de desarrollo
Inicia el servidor local con:
npm run dev
Vite muestra una URL local, generalmente:
http://localhost:5173/
Abre esa dirección en un navegador. Al editar y guardar el código fuente de React, la página se actualizará automáticamente mediante la función de actualización en tiempo real de Vite durante el desarrollo, así podrás ver los cambios en la interfaz sin tener que volver a cargarla manualmente cada vez.
Python vs React: La diferencia que me ayudó
La relación que aclara la confusión es la siguiente. Un proyecto típico en Python sigue este flujo:
Python → venv → pip → requirements.txt
Un proyecto con React y Vite sigue este flujo:
Node.js → npm → package.json → node_modules
El portafolio de React no necesita un Python venv. Node.js es el entorno de ejecución, npm es el instalador, package.json es el manifiesto, y node_modules alberga los paquetes instalados. Mantener estas funciones separadas evita que las costumbres de Python se mezclen con el front end en JavaScript.
Consideraciones finales
Si provienes de Python o del área de ciencia de datos, la configuración centrada en Node puede parecer poco clara hasta que se entienda cuál es la función de cada herramienta. Una vez que Node.js, npm, React y Vite estén alineados, el camino a seguir es sencillo:
Create repository
↓
Open project in VS Code
↓
Initialize React + Vite
↓
Install dependencies
↓
npm run dev
↓
Build!
Con esa cadena establecida, el entorno del front end de React está listo para trabajar en portafolios y para agregar más bibliotecas a través de npm.
Lecturas relacionadas
- Sustituyendo ESLint y Prettier por Biome: Velocidad vs. la regla de Hooks que aún necesitas — Tiempos de ejecución de Biome frente a ESLint y Prettier, la brecha entre react-hooks/exhaustive-deps, y cuándo ejecutar ambos plugins de ESLint al mismo tiempo es la migración más adecuada.
- Deja de sincronizar el estado con useEffect: Un patrón más seguro en React — Aprende por qué usar useEffect para sincronizar el estado derivado causa condiciones de carrera y renders adicionales, y cómo reemplazarlo con la derivación en tiempo de renderizado y el atributo key.