Para entender el concepto de reactividad vamos a trabajar a lo largo de estos capítulos en un ejercicio para que entendamos bien como funciona. Crearemos una carpeta dentro de nuestro servidor a la que llamaremos justamente reactividad, y el primer archivo que vamos a crear se va a llamar dom-manipulacion.html, donde lo que vamos a hacer es una manipulación básica del DOM de un formulario que vaya agregando a una lista de tareas más tareas.
Sintaxis de dom-manipulacion.js (sin reactividad).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Manipulación manual del DOM</title>
</head>
<body>
<h1>Manipulación manual del DOM</h1>
<form id="todo-form">
<input type="text" id="todo-item" placeholder="Tarea por hacer" />
<input type="submit" value="Agregar" />
</form>
<h2>Lista de tareas</h2>
<ul id="todo-list"></ul>
<script>
const d = document,
$item = d.getElementById("todo-item"),
$list = d.getElementById("todo-list");
d.addEventListener("submit", (e) => {
if (!e.target.matches("#todo-form")) return false;
e.preventDefault();
// Agregar item a la lista
let $li = d.createElement("li");
$li.textContent = $item.value;
$list.appendChild($li);
// Limpiar el input
$item.value = "";
$item.focus();
});
</script>
</body>
</html>
El siguiente paso que haremos en el siguiente capítulo es, esta manipulación común y corriente del DOM que ya hemos visto, como podemos pasarla para que esa interfaz visual sea una interfaz basada en el estado, es decir, crear una variable que manipule todos los datos de la aplicación, y cuando haya algún cambio, entonces renderice ese cambio.