⚛️

Laboratorio de React

Aprende React paso a paso con ejemplos interactivos

▶️Interactivo
✅

Laboratorio Interactivo: Todos los ejemplos se ejecutan en tiempo real usando StackBlitz. Puedes editar el código y ver los cambios instantáneamente. ¡No necesitas instalar nada!

🚀 Instalación de React

Aprende cómo instalar y configurar un proyecto de React desde cero usando StackBlitz.

📋 Prerrequisitos

  • Navegador web moderno (Chrome, Firefox, Safari, Edge)
  • Conexión a internet
  • ¡Eso es todo! No necesitas instalar Node.js ni nada más

🆚 StackBlitz vs Instalación Local

✅ Con StackBlitz

  • • No requiere instalación
  • • Funciona en cualquier navegador
  • • Carga instantánea
  • • Compartible con un enlace
  • • Terminal integrado

💻 Instalación Local

  • • Requiere Node.js
  • • Más control del entorno
  • • Mejor para proyectos grandes
  • • Acceso completo al sistema
  • • Mejor rendimiento

⚡ Comandos en StackBlitz

npm start
Inicia el servidor de desarrollo (automático en StackBlitz)
npm install [paquete]
Instala nuevas dependencias
npm run build
Construye la aplicación para producción

🖥️ Instalación de React - Terminal Interactiva

Sigue estos pasos para instalar React en tu sistema. Selecciona tu sistema operativo y copia los comandos.

💡 Nota: Los comandos se muestran por separado para compatibilidad con CMD de Windows. En PowerShell y terminales Unix puedes usar && para ejecutar comandos en secuencia.

Terminal - Linux/macOS
1
$node --version

Verifica que tengas Node.js instalado (versión 16 o superior)

2
$mkdir mi-proyecto-react
$cd mi-proyecto-react

Crea una carpeta para tu proyecto y entra en ella

3
$npx create-react-app .

Crea un nuevo proyecto React en el directorio actual

4
$npm install

Instala todas las dependencias del proyecto

5
$npm start

Inicia el servidor de desarrollo en http://localhost:3000

💡 Consejos:
  • • Asegúrate de tener Node.js instalado antes de comenzar
  • • Los comandos se ejecutan en secuencia, uno por uno
  • • El servidor de desarrollo se abrirá automáticamente en tu navegador
  • • Presiona Ctrl+C para detener el servidor cuando termines
🚀 Alternativa Rápida:

¿Prefieres probar React sin instalar nada? Usa nuestro laboratorio interactivo de StackBlitz, en el puedes continuar con los siguientes pasos.