¿Cómo configurar tu entorno de desarrollo para React?

Para configurar tu entorno de desarrollo para React necesitas instalar Node.js, npm y crear un proyecto con Vite o Create React App en tu computadora.

Sin este entorno, no puedes ejecutar ni compilar código React. Esta lección te lleva paso a paso desde cero.

¿Qué necesitas antes de empezar?

Antes de instalar cualquier herramienta, verifica que tu computadora cumple los requisitos mínimos. React funciona en Windows 10 o superior, macOS 11 o superior, y la mayoría de distribuciones de Linux.

Necesitas al menos 4 GB de RAM y conexión a internet. El proceso completo tarda menos de 15 minutos.

Las herramientas esenciales

El entorno de React se apoya en tres herramientas clave:

Node.js es el motor que permite correr JavaScript en tu máquina. npm (Node Package Manager) es el gestor de paquetes que descarga librerías como React.

Paso 1 — Instalar Node.js y npm

Ve a nodejs.org y descarga la versión LTS (Long Term Support). Esta versión es la más estable y la recomendada para proyectos de producción.

Elige el instalador según tu sistema operativo:

• Windows: descarga el archivo .msi y sigue el asistente.
• macOS: descarga el archivo .pkg y sigue el asistente.

Una vez instalado, abre la terminal (en Windows usa PowerShell o CMD; en macOS usa Terminal). Escribe los siguientes comandos para verificar la instalación:

node --version
npm --version

Debes ver algo similar a esto:

v20.11.0
10.2.4

Si ves números de versión, la instalación fue exitosa. Si ves un error como command not found, reinicia tu computadora e intenta de nuevo.

Paso 2 — Instalar VS Code

Visual Studio Code es el editor de código más usado para React. Es gratuito y está disponible en code.visualstudio.com.

Descarga e instala la versión para tu sistema operativo. Después de instalarlo, agrega estas dos extensiones desde el panel de extensiones:

• ES7+ React/Redux/React-Native snippets: genera código React con atajos de teclado.
• Prettier: formatea tu código automáticamente al guardar.

Estas extensiones aceleran tu trabajo considerablemente.

Paso 3 — Crear tu primer proyecto con Vite

Vite es la herramienta recomendada hoy en día para crear proyectos React. Es más rápida que Create React App y es la opción preferida en empresas como las que trabajan con stacks modernos en México.

En tu terminal, navega a la carpeta donde quieres guardar tu proyecto. Por ejemplo:

cd Documents

Luego ejecuta este comando:

npm create vite@latest mi-app-react -- --template react

Vite te creará una carpeta llamada mi-app-react con todos los archivos necesarios. Entra a esa carpeta e instala las dependencias:

cd mi-app-react
npm install

Finalmente, inicia el servidor de desarrollo:

npm run dev

Verás en la terminal una dirección como http://localhost:5173. Ábrela en tu navegador. Si ves el logo de React girando, tu entorno está listo.

Paso 3 (alternativa) — Crear un proyecto con Create React App

Create React App (CRA) es la herramienta oficial de React. Es más lenta que Vite pero sigue siendo válida para aprender.

Ejecuta este comando en la terminal:

npx create-react-app mi-app-react

Luego entra a la carpeta e inicia el servidor:

cd mi-app-react
npm start

El proyecto se abrirá automáticamente en http://localhost:3000.

Estructura de archivos que genera Vite

Cuando Vite crea tu proyecto, genera esta estructura:

mi-app-react/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

Conoce los archivos más importantes:

• src/main.jsx: punto de entrada de la aplicación. Aquí React se "monta" en el HTML.
• src/App.jsx: el componente principal donde empieza tu interfaz.
• package.json: lista las dependencias y los scripts del proyecto.
• index.html: el único archivo HTML. React inyecta todo aquí.

No necesitas tocar node_modules/ ni vite.config.js por ahora.

Ejemplo práctico: modificar App.jsx

Abre src/App.jsx en VS Code. Verás código generado automáticamente. Reemplázalo con esto:

function App() {
  return (
    <div>
      <h1>Hola desde mi primer proyecto React</h1>
      <p>Bienvenido al catálogo de Liverpool</p>
    </div>
  );
}

export default App;

Guarda el archivo. El navegador se actualiza solo gracias al Hot Module Replacement (HMR) de Vite. Verás el texto nuevo sin recargar manualmente.

Este comportamiento en tiempo real es una de las razones por las que Vite es preferido en equipos de desarrollo modernos.

Vite vs Create React App

Aquí tienes una comparación directa para que elijas según tu situación:

Para proyectos nuevos, usa Vite. Para proyectos existentes en tu trabajo, probablemente ya usarán Create React App o Webpack.

Errores comunes al configurar el entorno

Error 1: Instalar la versión "Current" de Node.js en lugar de la LTS. La versión Current puede tener inestabilidades. Siempre descarga la versión marcada como LTS en nodejs.org.

Error 2: No instalar las dependencias con npm install antes de correr el proyecto. Si omites npm install, el servidor no arranca y verás errores de módulos no encontrados. Siempre ejecuta npm install después de crear o clonar un proyecto.

Error 3: Usar espacios en el nombre de la carpeta del proyecto. Nombres como mi app react causan errores en la terminal. Usa guiones: mi-app-react. Nunca uses espacios ni caracteres especiales como acentos en rutas de proyecto.

Error 4: Abrir el archivo index.html directamente en el navegador. React necesita un servidor de desarrollo para funcionar. Siempre usa npm run dev o npm start y abre la dirección localhost en tu navegador.

Resumen de comandos esenciales

Memoriza estos comandos. Los usarás en cada proyecto React que desarrolles.

Puntos clave

• Node.js y npm son la base del entorno React. Sin ellos no puedes instalar ni ejecutar proyectos.
• Vite es la herramienta recomendada para crear proyectos nuevos. Es más rápida y moderna que Create React App.
• La estructura de archivos generada por Vite es simple. Los archivos que editas están en la carpeta src/.
• Ejecutar npm install después de crear un proyecto es obligatorio. Sin ese paso, el proyecto no funciona.
• El Hot Module Replacement de Vite actualiza el navegador automáticamente al guardar cambios, lo que acelera tu flujo de trabajo.