Bienvenida

Biblioteca:ReactVue

En resumen: El curso «Interfaces web» enseña HTML, CSS y el DOM, y después componentes, estado y datos con React o Vue, con ejemplos que se ejecutan directamente en la página.

Problema

El programa es correcto. Los clientes se quejan

El total del carrito es correcto, y los tests pasan. Pero en el teléfono el botón «Pedir» queda fuera de la pantalla. Quien usa un lector de pantalla oye solo «botón», sin saber cuál. La lista de productos se congela mientras carga, y con un doble clic rápido el pedido sale dos veces.

Las personas ven el programa a través de una pantalla. Si la pantalla se rompe, el programa no funciona, por muy correcto que sea por debajo. Este curso enseña cómo se construye la pantalla.

La idea

Cómo muestra el navegador una página

1. El navegador pide la página al servidor y recibe HTML: texto que dice qué hay en ella.
2. Del HTML construye un árbol con los elementos: un encabezado, un párrafo, un botón. Ese árbol se llama DOM.
3. Aplica el CSS: las reglas de color, tamaño y disposición. Calcula dónde va cada elemento y lo dibuja.
4. JavaScript cambia el árbol: añade un producto a la lista, cambia el texto de un botón. El navegador vuelve a dibujar solo lo afectado.

Todo el curso trata de estos cuatro pasos. Primero los haces a mano, y después ves cómo React y Vue hacen el cuarto por ti.

La idea

El sandbox

El código de las lecciones se ejecuta directamente en la página. Pruébalo: pulsa «Ejecutar» y después el botón de la página de abajo. Cambia el texto en script.js y ejecútalo de nuevo.

HTML, CSS, JS

index.htmlstyle.cssscript.js

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>El carrito</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>El carrito</h1>
    <p id="count">El carrito está vacío</p>
    <button type="button" id="add">Añadir pan</button>
    <script src="script.js"></script>
  </body>
</html>
 

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>El carrito</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>El carrito</h1> <p id="count">El carrito está vacío</p> <button type="button" id="add">Añadir pan</button> <script src="script.js"></script> </body> </html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }
 

body { font-family: system-ui, sans-serif; padding: 16px; } button { font-size: 16px; padding: 8px 16px; }

let count = 0;
const text = document.querySelector('#count');
document.querySelector('#add').addEventListener('click', () => {
  count++;
  text.textContent = `En el carrito: ${count} ${count === 1 ? 'producto' : 'productos'}`;
  console.log('pan añadido, en total', count);
});
 

let count = 0; const text = document.querySelector('#count'); document.querySelector('#add').addEventListener('click', () => { count++; text.textContent = `En el carrito: ${count} ${count === 1 ? 'producto' : 'productos'}`; console.log('pan añadido, en total', count); });

▶ EjecutarRestaurar el código

• Los archivos están en pestañas: index.html, style.css, script.js y, más adelante, los componentes. Ctrl+Enter (⌘+Enter en Mac) ejecuta el código, y «Restaurar el código» devuelve el ejemplo.
• La consola está debajo de la página: ahí salen console.log y los errores.
• El sandbox está aislado. El código no ve el sitio, sus cookies ni su almacenamiento, y no tiene red. A fetch('/api/…') responde una API simulada con los datos de la tienda, y las lecciones activan a propósito una respuesta lenta, un error o una lista vacía.
• Las tareas se comprueban por el comportamiento. «Comprobar» pulsa los botones y escribe en los campos como una persona, y busca los elementos por rol y nombre, como los encuentra un lector de pantalla. Un botón sin nombre no se encuentra, por eso la tarea comprueba también la accesibilidad.
• Un bucle infinito en el código bloquea la pestaña del navegador. Entonces recarga la página: tu código está guardado.

La idea

Las dos partes

La primera parte es la plataforma: HTML, CSS y el DOM. Es la misma para React y Vue, por eso el texto y el código son iguales en las dos páginas.

• La estructura de la página: elementos y el árbol, texto y enlaces, formularios, accesibilidad.
• Cómo se ve: la cascada, las cajas, flexbox, grid, una página para el teléfono.
• JavaScript en la página: el DOM, los eventos, una lista a partir de datos, datos de una API.

La segunda parte son los componentes: por qué tocar el DOM a mano falla en una interfaz grande y cómo la interfaz pasa a ser una función de los datos.

• Componentes, Estado, Efectos, datos y formularios, Una aplicación completa (enrutamiento, velocidad, tests, un proyecto real).
• Proyecto: el escaparate de la tienda: catálogo, carrito y pedido en una sola aplicación.

La idea

React o Vue

Las dos bibliotecas resuelven la misma tarea: describes cómo se ve la interfaz para unos datos, y la biblioteca actualiza la página cuando los datos cambian. Aquí está el mismo carrito en las dos:

React

App.jsx

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>El carrito</h1>
      <p>{count === 0 ? 'El carrito está vacío' : `En el carrito: ${count} ${count === 1 ? 'producto' : 'productos'}`}</p>
      <button type="button" onClick={() => setCount(count + 1)}>Añadir pan</button>
    </main>
  );
}
 

import { useState } from 'react'; export default function App() { const [count, setCount] = useState(0); return ( <main> <h1>El carrito</h1> <p>{count === 0 ? 'El carrito está vacío' : `En el carrito: ${count} ${count === 1 ? 'producto' : 'productos'}`}</p> <button type="button" onClick={() => setCount(count + 1)}>Añadir pan</button> </main> ); }

▶ EjecutarRestaurar el código

Este es el código en React: el componente es una función que devuelve JSX. El código en Vue está en la página de Vue.

No las clasificamos. Las ideas son las mismas, y la diferencia está en cómo se escriben: React es JavaScript con HTML dentro, Vue es una plantilla HTML con JavaScript dentro. Elige una con «Biblioteca:» encima de la lección y cámbiala cuando quieras. Si no sabes cuál: mira qué usan las empresas donde quieres trabajar. Cuando conoces una, aprendes la otra en unos días. Hay otras (Angular, Svelte, Solid). Se apoyan en las mismas ideas.

La idea

Qué necesitas saber

De JavaScript necesitas funciones, objetos y arrays con map y filter, módulos con import y async/await: el curso de JavaScript hasta «JavaScript moderno». Donde una lección usa algo de ahí, remite a él.

En el navegador no hace falta instalar nada. Para un proyecto propio fuera del sandbox necesitas Node.js, un editor (por ejemplo VS Code) y Vite, que crea un proyecto vacío:

npm create vite@latest shop -- --template react
cd shop
npm install
npm run dev

Estos comandos no se ejecutan aquí. Cómo es un proyecto real lo muestra la última lección de «Una aplicación completa».

Test

Ponte a prueba

1. El navegador recibió HTML. ¿Qué hace antes de dibujar nada?

Dibuja el texto línea por líneaEjecuta JavaScript, y JavaScript dibuja la páginaConstruye un árbol con los elementos (el DOM) y calcula dónde va cada uno

2. El código del sandbox llama a fetch("https://example.com/data"). ¿Qué pasa?

Los datos llegan de internetLa petición no sale: el sandbox no tiene red y solo responde a /api/… de la tiendaLa página de la lección se recarga

3. React o Vue: ¿cuál es mejor?

Vue, porque es más nuevaNinguna: resuelven la misma tarea de forma distinta, y la elección es del equipoReact, porque es más conocida

Comprobar

Empezar la lección de nuevo