Laboratorios opcionales en Windows#

Este curso es material de estudio fundamentado en la observación y verificación empírica; no instala ni entrega una aplicación prefabricada ni gestiona entornos en la nube. Sigue únicamente la configuración del tramo específico que desees practicar.

Todos los comandos descritos a continuación operan de forma aislada en una carpeta privada dentro de tu propio perfil de usuario ($HOME\rust-fullstack-practice), sin interferir con los archivos de este curso ni requerir privilegios de administrador. La biblioteca estándar de Rust opera completamente sin conexión a internet; la descarga de dependencias externas (crates en Cargo o paquetes en npm) se realiza exclusivamente cuando tú decides invocar comandos de red en los tramos avanzados.

Diccionario del laboratorio (Herramientas, banderas y entorno)#

Para entender exactamente qué ocurre cuando ejecutas una orden en tu terminal, familiarízate con los diez conceptos técnicos fundamentales del laboratorio:

1. Codificación UTF-8#

• Intuición cotidiana: Un abecedario internacional universal donde cada letra, símbolo o emoji de cualquier idioma del planeta tiene asignada una combinación única de números que todas las computadoras del mundo saben leer sin confundir los caracteres.
• Definición técnica precisa: Formato de codificación de caracteres de longitud variable (de 1 a 4 bytes) para el estándar Unicode. Es retrocompatible con ASCII (los primeros 128 caracteres ocupan un solo byte) y es el estándar estricto que exige el compilador de Rust para todos los archivos de código fuente (.rs).
• Ejemplo en el sistema: Al guardar sample.rs en un editor como VS Code o Notepad, debes asegurarte de que la codificación seleccionada sea "UTF-8" (sin BOM) para que el compilador no reporte errores de bytes inesperados al procesar acentos o caracteres especiales.
• Lo que NO es: No es codificación Windows-1252 o UTF-16 con BOM, que insertan secuencias de bytes iniciales que confunden a ciertos compiladores y herramientas de línea de comandos.

2. Atributo #[test]#

• Intuición cotidiana: Una etiqueta adhesiva de color rojo brillante colocada sobre una pieza de maquinaria que dice: "Esta pieza es una herramienta de prueba para control de calidad; no la instale en el motor final que se vende al cliente".
• Definición técnica precisa: Metadato de atributo de Rust que se antepone a una función para marcarla como un caso de prueba unitaria. En una compilación normal (rustc sample.rs), estas funciones son completamente ignoradas y descartadas; al compilar con la bandera --test, el compilador las recopila para integrarlas en el arnés de pruebas.
• Ejemplo en código:

  #[test]
  fn adds_two_numbers() {
      assert_eq!(add(2, 3), 5);
  }

• Lo que NO es: No es una función ordinaria ejecutable desde un bucle normal. Una función anotada con #[test] no debe recibir parámetros y no debe retornar valores que no implementen el trait Termination.

3. Macro assert_eq!#

• Intuición cotidiana: Un árbitro en una báscula que pesa dos objetos idénticos. Si los pesos coinciden exactamente, el árbitro guarda silencio y el juego continúa; si hay una diferencia de un solo gramo, hace sonar su silbato, detiene el juego y muestra a todos el peso exacto de cada lado.
• Definición técnica precisa: Macro de la biblioteca estándar de Rust que compara dos expresiones mediante el operador de igualdad (left == right, requiriendo que los tipos implementen PartialEq). Si la comparación evalúa a falso, invoca a la macro panic!, imprimiendo en la salida estándar un mensaje estructurado con el valor formateado de ambos lados (mediante Debug) y la línea de código exacta del fallo.
• Ejemplo en código:

  let calculated_total = 10 + 15;
  // Fails with a panic if calculated_total is not 25
  assert_eq!(calculated_total, 25);

• Lo que NO es: No es un simple condicional if (a != b). A diferencia de una sentencia condicional, assert_eq! aborta inmediatamente el hilo de ejecución actual e imprime los valores dispares con máxima fidelidad diagnóstica.

4. Enlazador (Linker) y binario ejecutable (.exe)#

• Intuición cotidiana: El equipo de ensambladores finales de una fábrica automotriz que toma el motor recién fundido, la transmisión, los frenos comprados a un tercero y el chasis, y los atornilla todos juntos en una unidad móvil completa capaz de arrancar al girar la llave.
• Definición técnica precisa:
• *Enlazador (Linker, como link.exe de Microsoft MSVC o lld):* Herramienta del sistema invocada por el compilador al final del proceso de traducción. Toma los archivos de código objeto intermedio (.o u .obj) generados por el compilador, resuelve las direcciones de memoria de las funciones externas en las bibliotecas estáticas (.rlib, .lib) o dinámicas (.dll), y genera el archivo ejecutable final.
• Binario ejecutable (.exe): Archivo en formato Portable Executable (PE) para Windows que contiene encabezados de arquitectura (x86_64), secciones de código máquina ejecutable (.text), secciones de datos constantes (.rdata) y tablas de importación de símbolos para que el sistema operativo pueda cargarlo en memoria virtual y cederle el control de la CPU.
• Ejemplo en el sistema: El comando rustc --test .\sample.rs -o .\sample-tests.exe genera físicamente el archivo sample-tests.exe en tu disco.
• Lo que NO es: Un archivo ejecutable no es un script interpretado que requiere que rustc esté abierto para funcionar. Es código binario autónomo que se ejecuta directamente sobre el microprocesador y el núcleo de Windows.

5. Manifiesto Cargo.toml#

• Intuición cotidiana: La receta de cocina oficial de un restaurante de alta gama: lista el nombre del platillo, la versión de la receta, las normas de la cocina que aplican y la lista exacta de ingredientes certificados que deben comprarse antes de encender el fuego.
• Definición técnica precisa: Archivo de configuración en formato TOML (Tom's Obvious Minimal Language) que describe un paquete o espacio de trabajo de Rust. Declara el nombre del paquete, la versión semántica, la edición de Rust (ej. 2021), las dependencias requeridas con sus rangos de versión permitidos y la configuración de perfiles de compilación (dev, release).
• Ejemplo en archivo:

  [package]
  name = "actix-boundary-lab"
  version = "0.1.0"
  edition = "2021"

  [dependencies]
  actix-web = "4"

• Lo que NO es: No contiene código ejecutable ni reemplaza al compilador. Es una declaración estática de configuración consumida por la herramienta cargo.

6. Endpoint y Handler HTTP#

• Intuición cotidiana:
• Endpoint: La ventanilla número 4 de una oficina de correos, identificada con el cartel "Recepción de paquetes internacionales".
• Handler: El funcionario que atiende detrás de esa ventanilla específica: recibe la caja, verifica los sellos de aduana, pesa el paquete y te entrega un recibo sellado.
• Definición técnica precisa:
• Endpoint (Punto final HTTP): Combinación de una ruta de URL (/tasks) y un método HTTP (POST, GET, etc.) que expone una operación disponible en el servidor web.
• Handler (Manejador HTTP): Función asíncrona en el código de backend asociada a un endpoint específico. Recibe la solicitud HTTP entrante, extrae y deserializa sus datos, ejecuta la lógica de dominio o persistencia requerida y construye la respuesta HTTP adecuada (200 OK, 400 Bad Request, etc.).
• Ejemplo en código:

  // HTTP Handler associated with the POST /tasks endpoint
  async fn create_task_handler(payload: web::Json<CreateTaskPayload>) -> HttpResponse {
      HttpResponse::Created().json(payload.into_inner())
  }

• Lo que NO es: Un handler no es un socket TCP en crudo ni una página web completa; es una función pura o asíncrona de procesamiento dentro de un pipeline de enrutamiento.

7. Prueba en proceso (In-process test) frente a Socket TCP/TLS/CORS#

• Intuición cotidiana:
• Prueba en proceso: Entrenar a un conserje pasándole cartas directamente en la mano dentro de una habitación cerrada para ver si sabe clasificarlas en los casilleros correctos.
• Prueba con Socket real: Enviar una carta real desde otra ciudad por el servicio postal para comprobar si el cartero encuentra la dirección física, si la cerradura del buzón abre y si el perro del vecino no muerde al cartero.
• Definición técnica precisa:
• *Prueba en proceso (In-process test):* Prueba de integración donde el cliente HTTP y el servidor se ejecutan dentro del mismo proceso y espacio de memoria del sistema operativo. La solicitud HTTP se construye como una estructura de datos en memoria y se pasa directamente al pipeline de enrutadores y middlewares sin abrir sockets de red reales en el kernel de Windows.
• Prueba con Socket real (TCP/TLS/CORS): Prueba donde el servidor escucha en un puerto de red real (127.0.0.1:8080) a través de la pila de red del sistema operativo. Implica resolución de puertos, negociación de paquetes SYN/ACK de TCP, cifrado TLS si aplica, políticas de seguridad de origen cruzado (CORS) en navegadores y reglas del cortafuegos de Windows.
• Ejemplo en el sistema: Las pruebas con actix_web::test::TestRequest se ejecutan en proceso, lo que las hace deterministas y de velocidad de microsegundos.
• Lo que NO es: Una prueba en proceso exitosa jamás garantiza que tu servidor sea accesible desde una red real o que un navegador web no bloquee las solicitudes debido a cabeceras CORS ausentes.

8. DOM (Document Object Model)#

• Intuición cotidiana: El árbol genealógico físico y estructurado que el navegador construye en la memoria de la computadora tras leer una página web de texto, permitiendo ubicar y cambiar el color de una rama específica sin tener que quemar y rehacer todo el árbol.
• Definición técnica precisa: Interfaz de programación de aplicaciones orientada a objetos que representa la estructura jerárquica de un documento HTML o XML como un árbol de nodos en memoria (implementado típicamente en C++ dentro del motor del navegador). Permite que lenguajes de script como JavaScript y TypeScript lean, manipulen, añadan o eliminen elementos y estilos en tiempo de ejecución de manera programática.
• Ejemplo en código:

  const heading = document.createElement("h1");
  heading.textContent = "Lab Status: Active";
  document.body.appendChild(heading);

• Lo que NO es: El DOM no es el archivo .html guardado en el disco. El archivo en disco es solo una cadena estática de bytes de texto; el DOM es la estructura de objetos viva que reside en la memoria RAM del navegador.

9. Narrowing de tipos en TypeScript (instanceof)#

• Intuición cotidiana: Ver una silueta oscura a lo lejos en la niebla y saber solo que es un "animal"; al acercarte y comprobar con tus propios ojos que tiene pico, plumas y grazna, adquieres la certeza absoluta de que es un "pato" y sabes con seguridad que puedes pedirle que nade.
• Definición técnica precisa: Proceso de análisis de flujo de control mediante el cual el compilador de TypeScript refina un tipo genérico o unión amplia hacia un tipo mucho más específico y restringido dentro de un bloque condicional. El operador instanceof comprueba en tiempo de ejecución la presencia del constructor en la cadena de prototipos del objeto, lo que le permite a TypeScript inferir estáticamente que dicho nodo posee propiedades especializadas (como .value en un HTMLInputElement).
• Ejemplo en código:

  const element: Element | null = document.querySelector("#user-input");

  // Type narrowing check
  if (element instanceof HTMLInputElement) {
      // TypeScript now knows element is strictly HTMLInputElement
      console.log(element.value);
  }

• Lo que NO es: No es un casteo forzado de tipos (type assertion como element as HTMLInputElement). El casteo ciego le miente al compilador sin verificar nada; el narrowing con instanceof comprueba la realidad del objeto en tiempo de ejecución antes de habilitar el acceso a sus campos.

10. Banderas --target y --lib de tsc#

• Intuición cotidiana:
• --target: Decidir en qué dialecto histórico de un idioma vas a escribir un libro (¿español antiguo del siglo XVI o español moderno del siglo XXI?).
• --lib: La lista de enciclopedias oficiales que le permites consultar al traductor para verificar qué palabras existen en el mundo real antes de traducir.
• Definición técnica precisa:
• --target (como ES2022 o ES5): Especifica la versión del estándar ECMAScript a la que el compilador tsc transformará el código TypeScript emitido. Si se elige una versión antigua (ES5), TypeScript transformará clases, funciones flecha y operadores modernos en funciones y prototipos clásicos.
• --lib (como DOM,ES2022): Declara los archivos de definición de tipos globales (.d.ts) que tsc debe incluir en la verificación estática. Indicar DOM le enseña al compilador qué métodos existen en window, document y HTMLElement.
• Ejemplo en comando:

  npx tsc --strict --target ES2022 --lib DOM,ES2022 .\main.ts

• Lo que NO es: Estas banderas no descargan librerías adicionales de internet; activan definiciones y reglas sintácticas que ya vienen empaquetadas dentro de la instalación de typescript.

1. Verifica antes de crear el laboratorio#

Abre una terminal de PowerShell y consulta las versiones disponibles en tu entorno:

rustc --version
cargo --version
node --version
npm --version

• Si Rust no está disponible, consulta la documentación oficial en rustup.rs y decide por separado si deseas instalarlo.
• Para herramientas de TypeScript o React, revisa los requisitos vigentes en la documentación oficial de Node.js. Un número observado en una máquina concreta no representa una recomendación universal.

Crea un directorio de práctica privado y seguro en tu perfil de usuario:

$lab = Join-Path $HOME "rust-fullstack-practice"
New-Item -ItemType Directory -Force -Path $lab | Out-Null
Set-Location $lab

El comando crea la carpeta o la reutiliza si ya existía. No borres archivos que desees conservar; acostúmbrate a guardar cada ejercicio con un nombre representativo.

2. Un ejemplo Rust con la biblioteca estándar#

Desde tu carpeta de práctica $lab, crea un archivo llamado sample.rs en tu editor de texto y asegúrate de guardarlo con codificación UTF-8:

fn add(left: u32, right: u32) -> u32 {
    left + right
}

#[test]
fn adds_two_numbers() {
    assert_eq!(add(2, 3), 5);
}

Compila el archivo como una suite de pruebas autónoma y ejecútala:

rustc --test .\sample.rs -o .\sample-tests.exe
.\sample-tests.exe

¿Qué sucede entre bastidores en este paso?#

flowchart TD
    Src["sample.rs (Texto UTF-8)"] --> Parser["Frontend rustc (Lexing, AST, #[test])"]
    Parser --> TypeCheck["Type & Borrow Checker"]
    TypeCheck --> LLVM["Backend LLVM (Código máquina x86_64)"]
    LLVM --> Linker["Enlazador link.exe (libstd + kernel32)"]
    Linker --> Exe["sample-tests.exe (PE binario nativo)"]
    Exe --> OS["Ejecución multihilo en Windows"]

1. Frontend del compilador: rustc realiza el análisis léxico y sintáctico de sample.rs. Al detectar la bandera --test, el compilador activa el arnés de pruebas e identifica todas las funciones decoradas con #[test].
2. Sintetización del punto de entrada: El compilador inyecta automáticamente una función main oculta que instancia el corredor de pruebas estándar (test::test_main_static).
3. Análisis de tipos y borrow checker: Comprueba que add(2, 3) satisfaga los tipos u32 y que las aserciones implementen Debug y PartialEq.
4. Optimización y generación de código: LLVM traduce las representaciones intermedias a instrucciones de código máquina x86_64 nativas de Windows.
5. Enlace estático y dinámico: El enlazador (link.exe) combina el código compilado con las rutinas de la biblioteca estándar de Rust y las librerías dinámicas del sistema operativo (kernel32.dll, ucrtbase.dll), emitiendo el binario sample-tests.exe.
6. Ejecución del proceso: Al invocar .\sample-tests.exe, Windows crea un nuevo proceso en memoria. El corredor ejecuta cada test en su propio hilo de ejecución aislado, capturando cualquier señal de pánico e imprimiendo el informe de resultados en pantalla.

Experimentos guiados y diagnóstico de la Sección 2#

Experimento 2.1: Compilar sin la bandera de pruebas#

• Acción: Intenta compilar el archivo directamente como un binario normal sin el arnés:

  rustc .\sample.rs -o .\sample.exe

• Observación esperada: El compilador se detiene con un error explícito:

  error[E0601]: `main` function not found in crate `sample`

• Mecanismo: Un archivo ejecutable estándar en Windows exige un punto de entrada obligatorio (main) donde colocar la primera instrucción de la CPU. La bandera --test es la que le ordena a rustc generar ese punto de entrada automáticamente a partir de las funciones #[test].

Experimento 2.2: Provocar deliberadamente un fallo en la aserción#

• Acción: Edita sample.rs y modifica la aserción para esperar un resultado incorrecto:

  assert_eq!(add(2, 3), 6);

• Recompila y ejecuta:

  rustc --test .\sample.rs -o .\sample-tests.exe
  .\sample-tests.exe

• Observación esperada: La prueba falla estrepitosamente en rojo:

  running 1 test
  test adds_two_numbers ... FAILED

  failures:

  ---- adds_two_numbers stdout ----
  thread 'adds_two_numbers' panicked at sample.rs:8:5:
  assertion `left == right` failed
    left: 5
   right: 6

• Mecanismo y código de salida: Observa cómo assert_eq! desglosa con absoluta claridad los valores en discordia (left: 5, right: 6). Si ejecutas $LASTEXITCODE en PowerShell, verás que el ejecutable retornó 101, indicando al sistema operativo que la suite terminó con fallos.

3. Proyecto Cargo / Actix cuando lo necesites#

Cargo automatiza la gestión de múltiples módulos, el manifiesto del proyecto y las dependencias de red. Crear el esqueleto de un proyecto no descarga ningún archivo externo:

Set-Location $lab
cargo new actix-boundary-lab
Set-Location .\actix-boundary-lab

Para implementar un endpoint HTTP, consulta la guía oficial de Getting Started de Actix Web y agrega las dependencias vigentes en tu Cargo.toml. Elige versiones que coincidan con la documentación actual y tu instalación local de Rust; el curso no impone versiones obsoletas.

Tras configurar tu endpoint y pruebas, ejecuta:

cargo test

¿Qué sucede entre bastidores en este paso?#

1. Resolución de dependencias: Cargo examina Cargo.toml, calcula el grafo acíclico dirigido de dependencias y plasma las versiones exactas resueltas en Cargo.lock.
2. Compilación incremental: Cargo invoca a rustc para cada una de las dependencias externas (tokio, actix-web, serde), guardando las bibliotecas compiladas (.rlib) en el directorio target/debug/deps/.
3. *Prueba en proceso (In-process test):* En un test de integración de Actix Web (actix_web::test), la aplicación HTTP se inicializa en la memoria del propio proceso de la prueba. El framework simula la canalización HTTP completa (enrutamiento, middlewares, serialización JSON) pasando estructuras de datos internas directamente a las funciones asíncronas, sin consumir puertos de red en el sistema operativo ni requerir permisos de firewall.

Experimentos guiados y diagnóstico de la Sección 3#

Experimento 3.1: Comprender las limitaciones de una prueba en proceso#

• Reflexión y diagnóstico: Una prueba de integración con actix_web::test::TestRequest valida la lógica de tus handlers y la serialización JSON. Sin embargo, no verifica:

1. Si otro proceso en tu máquina ya está ocupando el puerto 8080.
2. Si las políticas de seguridad del navegador bloquearán una solicitud fetch() por violar CORS (Cross-Origin Resource Sharing).
3. Si la latencia física de red degradará el rendimiento bajo alta contienda.

4. TypeScript y enlace HTML sencillo#

Para experimentar con TypeScript en una práctica local limpia, crea un directorio aislado e instala el compilador como dependencia local de desarrollo:

Set-Location $lab
New-Item -ItemType Directory -Force -Path .\typescript-lab | Out-Null
Set-Location .\typescript-lab
npm init -y
npm install --save-dev typescript

El comando npm install descarga los paquetes dentro de la subcarpeta local node_modules de tu laboratorio; no modifica tu entorno de forma global. Para instrucciones adicionales, consulta la guía oficial de descarga de TypeScript.

Crea los archivos main.ts e index.html en este directorio:

const title = document.querySelector("#title");
const preview = document.querySelector("#preview");

if (!(title instanceof HTMLInputElement) || !(preview instanceof HTMLElement)) {
  throw new Error("Required form elements are missing");
}

title.addEventListener("input", () => {
  preview.textContent = title.value;
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Local TypeScript lab</title>
  </head>
  <body>
    <label for="title">Title</label>
    <input id="title" type="text">
    <p id="preview" aria-live="polite"></p>
    <script defer src="./dist/main.js"></script>
  </body>
</html>

Verifica la coherencia de tipos sin generar archivos y luego emite la compilación final a la carpeta dist/:

npx tsc --noEmit --strict --target ES2022 --lib DOM,ES2022 .\main.ts
npx tsc --strict --target ES2022 --lib DOM,ES2022 --outDir .\dist .\main.ts

Abre index.html en tu navegador web. Al escribir en el campo de texto, la vista previa debe actualizarse inmediatamente.

¿Qué sucede entre bastidores en este paso?#

1. Análisis de tipos estáticos: tsc lee main.ts y carga las declaraciones estándar de lib.dom.d.ts. Comprende que document.querySelector devuelve un tipo genérico Element | null.
2. Control de flujo y Narrowing: La condición !(title instanceof HTMLInputElement) le indica al compilador que, si el código continúa más allá de la línea 5, la variable title es obligatoriamente un HTMLInputElement. Esto valida formalmente que la propiedad .value existe y es segura de invocar.
3. Type Erasure (Eliminación de tipos): tsc elimina todas las anotaciones de tipo y emite código JavaScript puro compatible con ES2022 en dist/main.js.
4. Ciclo de eventos en el navegador: Al abrir index.html, el navegador procesa el HTML, crea los nodos en el árbol DOM de memoria C++, procesa el script diferido (defer), asocia el manejador al evento input, y ante cada pulsación de tecla, despacha el callback en el hilo principal del Event Loop.

Experimentos guiados y diagnóstico de la Sección 4#

Experimento 4.1: Eliminar el estrechamiento de tipos (Narrowing)#

• Acción: Comenta la cláusula condicional de verificación en main.ts:

  const title = document.querySelector("#title");
  const preview = document.querySelector("#preview");

  // if (!(title instanceof HTMLInputElement) || !(preview instanceof HTMLElement)) {
  //   throw new Error("Required form elements are missing");
  // }

  title.addEventListener("input", () => {
    preview.textContent = title.value;
  });

• Comprobación: Ejecuta npx tsc --noEmit --strict --target ES2022 --lib DOM,ES2022 .\main.ts.
• Observación esperada: TypeScript rechaza el código con múltiples errores estrictos:

  main.ts:8:1 - error TS18047: 'title' is possibly 'null'.
  main.ts:9:25 - error TS2339: Property 'value' does not exist on type 'Element'.

• Mecanismo: TypeScript te protege contra fallos en tiempo de ejecución. El método querySelector puede devolver null (si el elemento no existe en el HTML), y devuelve un Element genérico, el cual no tiene la propiedad value (un elemento <div> no tiene valor de entrada). El guard con instanceof es indispensable para garantizar seguridad de tipos.

5. React con TypeScript y Vite (opcional)#

Si deseas avanzar hacia el estudio de interfaces basadas en componentes reactivos, consulta primero los requisitos de compatibilidad en la guía oficial de Vite.

En una carpeta de práctica independiente:

Set-Location $lab
npm create vite@latest react-ts-lab -- --template react-ts
Set-Location .\react-ts-lab
npm install
npm run dev

El asistente crea una estructura moderna con Vite y TypeScript. El servidor de desarrollo emitirá una URL local en tu terminal (típicamente http://localhost:5173/). Ábrela en tu navegador para interactuar con la aplicación.

¿Qué sucede entre bastidores en este paso?#

1. Servidor HTTP con ESM nativo: A diferencia de los empaquetadores clásicos que construían un bundle gigante en disco antes de poder probar, Vite inicia un servidor local instantáneo y deja que el propio navegador solicite cada archivo TypeScript/JSX como un módulo ES nativo (import).
2. Transpilación ultrarrápida con esbuild: Vite utiliza esbuild (escrito en Go) para transpilar los archivos .tsx a JavaScript nativo en milisegundos en memoria al momento en que el navegador los pide.
3. Virtual DOM y Reconciliación en React: React mantiene una representación interna de la interfaz (árbol Fiber). Al cambiar el estado mediante hooks, calcula la diferencia (diffing) entre el estado actual y el anterior, y actualiza de forma quirúrgica únicamente los nodos del DOM real que sufrieron cambios.

Experimentos guiados y diagnóstico de la Sección 5#

Experimento 5.1: Inspección de módulos en las Herramientas de Desarrollador#

• Acción: Con el servidor de Vite corriendo, abre tu navegador en http://localhost:5173/, pulsa F12 y abre la pestaña Network (Red). Recarga la página con Ctrl + F5.
• Observación: Observa la lista de peticiones de red: no verás un único archivo bundle.js masivo, sino peticiones HTTP individuales a main.tsx, App.tsx y las dependencias de React. Vite transforma cada archivo bajo demanda.

A qué volver#

• Regresa a la ruta principal para continuar el estudio guiado.
• Documenta tus experimentos, salidas de terminal y preguntas conceptuales en PROGRESS.md.
• Apóyate en el catálogo de recursos oficiales ante cualquier duda técnica sobre especificaciones del lenguaje o herramientas.