Inicio / Artículos / Guía de configuración de React + Vite (2026): Tu primera aplicación funcional, explicada paso a paso

ReactViteNode.jsnpmJavaScriptFrontend Development

Guía de configuración de React + Vite (2026): Tu primera aplicación funcional, explicada paso a paso

Aprenda paso a paso cómo instalar Node.js, npm, VS Code y Vite para crear una aplicación React, al tiempo que descubre qué función real desempeña cada herramienta en el fondo.

1601 palabras

“El momento adecuado para crear tu primer componente React no es justo después de ver tutoriales sin parar, sino una vez que hayas configurado un entorno adecuado y comprendas realmente por qué cada elemento está allí.”

En el artículo anterior, analizamos qué es React, por qué se creó en Facebook y cómo transformó la forma en que los desarrolladores abordan la creación de aplicaciones web.

Ahora pasamos de los conceptos a la práctica directa.

Antes de escribir cualquier componente, necesitas un espacio de trabajo que pueda ejecutar React, recargar tus cambios al instante y brindarte soporte a medida que tu aplicación crece.

Al final de este artículo, tendrás una aplicación React funcional en tu propia máquina y comprenderás qué función cumple realmente cada herramienta de la configuración.

¿Por qué no podemos simplemente escribir React en un archivo HTML?

Los principiantes casi siempre hacen esta pregunta primero.

React es “solo JavaScript”, ¿entonces no debería ser suficiente un archivo HTML normal?

Técnicamente, eso es cierto en un sentido muy limitado.

Pero los proyectos reales con React dependen de cosas como:

  • JSX
  • Módulos ES
  • Sustitución caliente de módulos
  • Gestión de paquetes
  • Optimización de compilación

Ninguno de estos elementos es comprendido de forma nativa por los navegadores.

Por eso los desarrolladores dependen de herramientas que transforman y preparan el código antes de que llegue al navegador.

Es similar a cocinar una comida.

Los ingredientes crudos no se comen directamente del refrigerador; primero se preparan.

Configurar un proyecto React sigue la misma lógica.

Las herramientas que instalaremos

Existe un pequeño conjunto de herramientas en las que casi todos los desarrolladores de React confían, y las instalaremos todas en esta guía.

Cada herramienta resuelve un problema específico dentro del flujo de trabajo.

Una vez que todo está en su lugar, apenas notarás que están ejecutándose en segundo plano.

Entendiendo Node.js

Un concepto erróneo común es pensar que React en sí mismo funciona sobre Node.js.

Eso no es cierto.

React se ejecuta en el navegador, no en Node.

Node.js está ahí para ayudarte mientras construyes la aplicación, no mientras esta se ejecuta para los usuarios finales.

Te permite:

  • Instalar bibliotecas
  • iniciar servidores de desarrollo
  • crear paquetes optimizados para producción
  • gestionar las dependencias del proyecto

Sin Node.js, instalar y ejecutar React sería mucho más complicado.

¿Qué es exactamente npm?

La instalación de Node.js incluye automáticamente npm, abreviatura de Node Package Manager.

Imagínese comenzar un sitio desde cero y necesitar varias bibliotecas al mismo tiempo, como:

  • React
  • React Router
  • Axios
  • Tailwind CSS
  • Redux Toolkit

En lugar de descargar manualmente cada una de ellas, npm se encarga de la instalación mediante un único comando.

Por ejemplo:

npm install axios

Eso es suficiente: npm obtiene el paquete, lo integra en su proyecto y registra qué versión está utilizando.

Por qué React moderno utiliza Vite

Los tutoriales antiguos solían mostrar un comando similar para crear una estructura básica de proyecto:

npx create-react-app my-app

Durante mucho tiempo, ese fue el método más utilizado.

No obstante, en la actualidad la comunidad de React ha pasado en gran medida a utilizar Vite.

¿Qué motivó ese cambio?

Básicamente, el deseo de contar con una experiencia de desarrollo más ágil en el día a día.

Vite ofrece:

  • Inicio instantáneo del proyecto
  • Sustitución rápida de módulos en tiempo real (HMR)
  • Tamaños más pequeños de los archivos de compilación para producción
  • Configuración general más sencilla
  • Rendimiento general mejorado

Para quienes estén aprendiendo React ahora, comenzar con Vite es la opción más sensata.

Paso 1: Instalar Node.js

Descargue la versión LTS (Soporte a Largo Plazo) más reciente de Node.js desde su sitio oficial.

Una vez instalado, abra una terminal para confirmar que la instalación funcionó.

node -v

El resultado debería ser similar a:

v24.x.x

Luego verifique también npm:

npm -v

Si ambos comandos muestran números de versión, su equipo está configurado correctamente.

Paso 2: Instalar Visual Studio Code

Técnicamente se puede escribir React en cualquier editor, pero VS Code se ha convertido en la opción por defecto gracias a su velocidad, su ecosistema de extensiones y sus potentes herramientas para JavaScript.

Extensiones de VS Code que todo desarrollador de React debería instalar

Instalar un pequeño conjunto de complementos desde el principio marca una gran diferencia en la comodidad diaria. Vale la pena incluirlos en tu configuración:

  • ESLint, para detectar problemas en tu código
  • Prettier, para un formato consistente
  • Error Lens, para mostrar errores directamente en el código
  • Auto Rename Tag, para mantener sincronizadas las etiquetas correspondientes
  • Path Intellisense, para completar automáticamente las rutas de los archivos
  • GitLens, para obtener información más detallada sobre Git dentro del editor
  • ES7+ React Snippets, para generar plantillas de React rápidamente

Juntos, estos complementos abarcan el formato, la detección temprana de errores, la autocompletación y la productividad en general.

Paso 3: Crea tu primer proyecto React

Abre una ventana de terminal y ejecuta:

npm create vite@latest

Se te pedirá que respondas a algunas preguntas de configuración:

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

Una vez finalice la creación del esqueleto, navega hasta la nueva carpeta del proyecto:

cd react-beginners

Luego instala las dependencias del proyecto:

npm install

Y finalmente, inicia el servidor de desarrollo:

npm run dev

La salida de la terminal se verá más o menos así:

Local: http://localhost:5173

Abre esa dirección en tu navegador.

Tu primera aplicación React ya está funcionando.

Entendiendo la estructura del proyecto

Un proyecto React recién generado puede parecer intimidante a primera vista, pero en la práctica solo hay un puñado de archivos con los que interactuarás regularmente.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Casi todo el código que escribes a diario se encuentra dentro de esta carpeta.

App.jsx

Considere esto como el componente raíz de su aplicación.

Toda función que desarrolle a partir de ahora comenzará desde aquí.

main.jsx

Este es el archivo que conecta su aplicación React con la página web real.

Es lo que indica a React exactamente dónde debe renderizar su aplicación en el DOM.

package.json

Aquí encontrará la metadatos de su proyecto, junto con sus dependencias y los scripts utilizados para ejecutarlo o compilarlo.

node_modules

Este directorio contiene todos los paquetes de los que depende su proyecto.

No lo modifique; no hay razón para cambiar nada manualmente dentro de él.

Haga su primer cambio

Abra App.jsx y reemplace el contenido genérico por:

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Guarde el archivo y observe el navegador.

¿Lo notaste? La página se actualizó por sí sola, sin necesidad de refrescarla manualmente.

Ese comportamiento se denomina Reemplazo de Módulos en Tiempo Real, o HMR.

Pequeñas comodidades como esta suman y ahorran tiempo considerable a lo largo de la vida útil de un proyecto.

Desarrolladores de Angular: Esto es lo que diferencia

Viniendo de Angular, encontrarás que el flujo de trabajo general es reconocible, solo que con menos formalidades.

React se inclina hacia la flexibilidad, permitiéndote armar las cosas a tu manera, mientras que Angular viene con más estructura integrada desde el principio.

Ningún enfoque es objetivamente superior; simplemente resuelven el problema de forma diferente.

Errores comunes que cometen los principiantes

Mientras te familiarizas con React, probablemente te encontrarás con algunos problemas recurrentes.

  • Olvidar ejecutar npm install
  • Ejecutar comandos desde el directorio incorrecto, fuera de la carpeta del proyecto
  • Realizar ediciones dentro de node_modules
  • Trabajar con una versión obsoleta de Node.js
  • Cerrar la ventana de la terminal mientras el servidor de desarrollo sigue en ejecución

    • Una vez que reconozcas estos patrones, será sencillo evitarlos.

    Lo que has aprendido

    Al seguir este artículo, has abordado:

    • La razón por la que se necesita un entorno de desarrollo dedicado para React
    • Qué son en realidad Node.js y npm
    • Por qué Vite se ha convertido en la herramienta estándar para crear proyectos React
    • Los pasos para estructurar y ejecutar tu primera aplicación React
    • Para qué sirve cada uno de los archivos principales del proyecto
    • Cómo el reemplazo dinámico de módulos cambia la forma en que iteras sobre el código

    En este punto, ya cuenta con todo lo necesario para comenzar a desarrollar aplicaciones reales con React.

    Desafío de práctica

    Antes de pasar a la siguiente sección, intente resolver estos ejercicios:

    • Cree un proyecto completamente nuevo de React con Vite.
    • Modifique el texto del encabezado dentro de App.jsx.
    • Agregue una breve introducción con su propio nombre.
    • Ajuste el color del texto utilizando CSS.
    • Deténgase y reinicie manualmente el servidor de desarrollo usted mismo.

    Trabajar directamente con estos pasos es el camino más rápido para ganar confianza en la herramienta.

    ¿Qué viene después?

    Con su entorno listo para usar, el siguiente paso es adentrarse en una de las ideas fundamentales detrás de React.

    La parte 3 se centrará en JSX: la sintaxis que integra marcado similar al HTML directamente en su código JavaScript.

    Cubrirá lo siguiente:

    • Qué es realmente JSX
  • La razón detrás del uso de JSX en React
  • Las reglas que impone JSX
  • Cómo funcionan las expresiones dentro de JSX
  • Las diferencias entre HTML y JSX
  • Errores comunes que cometen los principiantes
  • Prácticas para mantener tu JSX limpio y legible

    • Para cuando termines ese artículo, estarás listo para escribir tus propios componentes React reales con confianza.

    Lecturas relacionadas

    Todos los artículosEnviar el brief