Dominar los frameworks web

Introducción a jQuery

1. Conceptos

a. Presentación

jQuery (https://jquery.com/) es un framework muy común que simplifica la creación de aplicaciones web. Para ello, cuenta con un mecanismo de selectores basado en la sintaxis existente en CSS3 con el fin de filtrar determinados nodos de la página. También se añade una «capa adicional» a los nodos DOM para simplificar su gestión. La gestión de eventos se simplifica para reducir las dependencias entre la página HTML y el código JavaScript. Hay varias utilidades disponibles, como la gestión simplificada de AJAX (véase el capítulo Desarrollar fácilmente en entorno cliente/servidor).

jQuery es probablemente el framework de JavaScript para la Web más utilizado, con una impresionante cantidad de plugins (https://plugins.jquery.com/) que ofrecen diversos servicios (nuevos componentes, efectos gráficos, etc.).

Utilizar jQuery ofrece, sin duda, una gran ventaja, pero también hay que ser consciente de que puede presentar errores y de que su funcionamiento en algunos navegadores es a veces problemático. Esto significa que no estamos eximidos en ningún caso de tener un buen conocimiento de la API DOM para sortearlos.

jQuery viene acompañado de una versión orientada a la interfaz de usuario llamada jQuery UI (https://jqueryui.com/), centrada en componentes gráficos, y de una versión para móviles «jQuery Mobile» (https://jquerymobile.com/) pensada para integrarse en tabletas o teléfonos móviles (iOS, Android...).

Para trabajar, hay que descargar jQuery, que consta de un único archivo disponible en dos formatos:

Un formato compacto, menos legible pero más rápido de descargar para uso en producción (eliminación de espacios en blanco, renombrado...).
Un formato «legible» para cuando se está en fase de desarrollo.

También puede utilizar las herramientas npm, Yarn o Bower para realizar la instalación local.

Si no desea instalar jQuery en su equipo, pero quiere beneficiarse de una caché de usuario, puede utilizar una CDN (Content Delivery Network). Por ejemplo, desde Google obtendrá una URL de inserción del tipo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/ 
VERSION/jquery.min.js"></script> ...

Cómo empezar con React

1. Presentación

React (https://es.react.dev/) es un framework de JavaScript que suele basarse en Node.js. Funciona según el principio de componentes reutilizables. Un componente es una función de JavaScript que devuelve una etiqueta HTML y su contenido. El componente se encarga de toda la configuración, pero también de toda la parte dinámica.

Puede integrar React en su sitio web a través de la API de React, o desarrollar todo su sitio web en React utilizando el formato de componentes JSX. El formato JSX es una extensión de la sintaxis de JavaScript para facilitar el uso de HTML en sus componentes.

2. Primeros pasos

Para empezar, debe disponer de Node.js (ya hemos visto la instalación, que no presenta ninguna dificultad). Una vez instalado, debe situarse en la raíz de su proyecto web y escribir en la línea de comandos:

npx create-next-app@latest

Este comando crea un proyecto que le permitirá beneficiarse del framework Next.js (https://nextjs.org/), el cual se encargará de gestionar el formato JSX de manera que su navegador pueda mostrarlo.

Por defecto, se necesita un archivo package.json en la raíz del proyecto. Dentro, encontrará algo como:

{  
  "name": "ejemplos",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": {  
    "dev": "next dev",  
    "build": "next build",  
    "start": "next start",  
    "lint": "next lint"  
  },  
  "dependencies": {  
    "react": "19.1.0",  
    "react-dom": "19.1.0",  
    "next": "15.4.5"  
  }  
}

La parte «dev» es la que nos interesa para probar nuestro JSX. Si ejecuta el siguiente comando en el directorio raíz de su proyecto, npm run dev, se habilitará por defecto un servidor web local en el puerto 3000 y podrá acceder a una página de prueba utilizando la siguiente URL en su navegador: http://127.0.0.1:3000/. No es necesario reiniciar el servidor cada vez que realice...