Actualización de la interfaz de usuario con Javascript
En este capítulo, comenzaremos a construir nuestro proyecto usando JavaScript y métodos del DOM para agregar una etiqueta h1 a tu proyecto.
Abre tu editor de código y crea un nuevo archivo index.html. Dentro del archivo HTML, agrega el siguiente código:
<html>
<body>
<div></div>
</body>
</html>Luego asigna un id único al div para poder identificarlo más adelante.
<html>
<body>
<div id="app"></div>
</body>
</html>Para escribir JavaScript dentro de tu archivo HTML, agrega una etiqueta script:
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>Ahora, dentro de la etiqueta script, puedes usar un método del DOM, getElementById(), para seleccionar el elemento <div> por su id:
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>Puedes continuar usando métodos del DOM para crear un nuevo elemento <h1>:
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Selecciona el elemento div con el id 'app'
const app = document.getElementById('app');
// Crea un nuevo elemento H1
const header = document.createElement('h1');
// Crea un nuevo nodo de texto para el elemento H1
const text = 'Desarrolla. Previsualiza. Publica.';
const headerContent = document.createTextNode(text);
// Añade el texto al elemento H1
header.appendChild(headerContent);
// Coloca el elemento H1 dentro del div
app.appendChild(header);
</script>
</body>
</html>Para asegurarte de que todo funciona correctamente, abre tu archivo HTML en el navegador de tu elección. Deberías ver una etiqueta h1 que dice 'Desarrolla. Previsualiza. Publica.'.
HTML vs. el DOM
Si observas los elementos del DOM en las herramientas de desarrollo del navegador, notarás que el DOM incluye el elemento <h1>. El DOM de la página es diferente al código fuente - o en otras palabras, al archivo HTML original que creaste.
Esto ocurre porque el HTML representa el contenido inicial de la página, mientras que el DOM representa el contenido actualizado de la página que fue modificado por el código JavaScript que escribiste.
Actualizar el DOM con JavaScript puro es muy potente pero verboso. Has escrito todo este código solo para agregar un elemento <h1> con algo de texto:
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Desarrolla. Previsualiza. Publica.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>A medida que el tamaño de una aplicación o equipo crece, puede volverse cada vez más difícil construir aplicaciones de esta manera.
Con este enfoque, los desarrolladores pasan mucho tiempo escribiendo instrucciones para decirle a la computadora cómo debe hacer las cosas. Pero ¿no sería mejor poder describir qué quieres mostrar y dejar que la computadora determine cómo actualizar el DOM?
Programación imperativa vs. declarativa
El código anterior es un buen ejemplo de programación imperativa. Estás escribiendo los pasos de cómo debe actualizarse la interfaz de usuario. Pero cuando se trata de construir interfaces de usuario, a menudo se prefiere un enfoque declarativo porque puede acelerar el proceso de desarrollo. En lugar de tener que escribir métodos del DOM, sería útil si los desarrolladores pudieran declarar qué quieren mostrar (en este caso, una etiqueta h1 con algo de texto).
En otras palabras, la programación imperativa es como darle a un chef instrucciones paso a paso sobre cómo hacer una pizza. La programación declarativa es como pedir una pizza sin preocuparte por los pasos necesarios para hacerla. 🍕
React es una biblioteca declarativa popular que puedes usar para construir interfaces de usuario.
React: Una biblioteca declarativa de UI
Como desarrollador, puedes decirle a React qué quieres que ocurra con la interfaz de usuario, y React se encargará de determinar los pasos de cómo actualizar el DOM por ti.
En la siguiente sección, exploraremos cómo puedes comenzar con React.
Recursos adicionales: