Empezar
Prepara tu espacio de práctica
Arranca el proyecto, encuentra su punto de entrada y ejecuta los primeros ejemplos.
Qué aprenderás
- Ejecutar el proyecto en tu equipo.
- Ubicar el código y la consola del navegador.
- Comprobar que los ejercicios pasan sus pruebas.
Índice de esta lección
Paso 1
Comprueba tus herramientas
Necesitas Git, Node.js con npm, un editor y un navegador. Los temas y las extensiones del editor son opcionales: no cambian lo que vas a aprender.
Estas prácticas usan el ejecutor de pruebas de Node y archivos TypeScript. El entorno verificado para esta edición es Node 26.10.0.
node --versionnpm --versiongit --versionQué deberías observar
Cada comando imprime su versión. Si uno no existe, instala esa herramienta antes de continuar.
Paso 2
Abre el proyecto de práctica
Clona el repositorio y entra en la carpeta del proyecto. Las comillas son importantes porque “clase 1” contiene un espacio.
Instala sus dependencias y ejecuta el script de desarrollo. Abre la dirección local que imprima la terminal.
git clone https://github.com/My-free-time/solid-clean-code.gitcd "solid-clean-code/clase 1/clean-course"npm installnpm run devQué deberías observar
El navegador muestra “CleanCode y SOLID”. Mantén la terminal abierta mientras practicas.
Paso 3
Sigue el recorrido del código
Abre src/main.ts. Es el punto de entrada: importa estilos, presenta el encabezado y ejecuta los ejercicios.
En el navegador, abre Inspeccionar y después Consola. La tabla y el total se generan con las funciones de la carpeta clean-code.
import { getFilesToDelete, studyFiles } from './clean-code/01-names';import { calculateOrderTotal } from './clean-code/02-refactor'; console.table(getFilesToDelete(studyFiles));console.log('Total del pedido:', calculateOrderTotal(50, 2, 0.1));Qué deberías observar
La tabla contiene los archivos 2 y 3. El total del pedido es 90.
Paso 4
Establece un punto de partida
Abre otra terminal en la misma carpeta. Ejecuta las pruebas y la compilación antes de cambiar el código.
Una comprobación en verde te da una referencia: después de un cambio podrás distinguir un problema nuevo de uno que ya existía.
npm testnpm run buildQué deberías observar
Las cuatro pruebas pasan y se genera la carpeta dist. No necesitas subir dist ni node_modules al repositorio.
Ahora te toca
Prueba la idea por tu cuenta
Cambia el título de la página por “Mi laboratorio de código”. Comprueba que la consola sigue mostrando la misma tabla y el mismo total.
Necesito una pista
El título visible está en la plantilla de app.innerHTML de src/main.ts.
Comparar con una solución
Cambia únicamente el contenido del h1. Conserva las llamadas a getFilesToDelete y calculateOrderTotal; una modificación visual no debe alterar sus resultados.
Antes de seguir
Comprueba lo que aprendiste
No es una nota. Es una pausa para comprobar que la idea quedó clara.
¿Terminaste la práctica?
Haz el ejercicio y comprueba tus respuestas antes de marcar la lección como completada.