Introducción a React - Formación básica

[alejandroVG2305]

Lo que se incluye en el issue es un resumen de los conceptos de React, pero si tenéis tiempo es mucho más recomendable consultar los enlaces para conocer la tecnología en profundidad.

Páginas de referencia

React - Primeros pasos: https://developer.mozilla.org/es/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started
React - Creando componentes en una app React: https://developer.mozilla.org/es/docs/Learn_web_development/Core/Frameworks_libraries/React_components#resumen
React - Iniciar un nuevo proyecto de React. Frameworks populares: https://es.react.dev/learn/start-a-new-react-project

Información relevante

Introducción

• React es una biblioteca de JavaScript diseñada para construir interfaces de usuario de manera eficiente y modular, mediante el uso de componentes.
  • Piezas de código autocontenidas que describen una parte de la interfaz de usuario.
• El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario.
  • Los componentes se pueden juntar para construir una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, para poder enfocarse en el diseño de la interfaz.

Ámbito

• Aunque React se puede usar para pequeñas piezas de una interfaz, no resulta fácil inyectarlas en una aplicación.
  • Por lo tanto, será más abordable si construimos la aplicación completamente con React.

Conceptos básicos

Componente

• Unidad fundamental de React
• Pieza de código independiente y reutilizable que define una parte de la interfaz de usuario.
• Pueden ser de clase o funcionales, y pueden anidarse para formar interfaces más complejas, de forma similar a HTML.
• Se pueden parametrizar a través de props (propiedades).
  • Un prop es cualquier dato que se pasa a un componente de React.
  • Los props se escriben dentro de las llamadas a los componentes y utilizan la misma sintaxis que los atributos HTML: prop="value".

JSX (JavaScript XML)

• Extensión de la sintaxis de JavaScript que permite escribir código similar a HTML dentro de los archivos de JavaScript.
• Facilita la creación de elementos de React y la definición de la estructura de los componentes de manera muy legible e intuitiva.

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);

• Esta expresión será compilada automáticamente para ser entendible por el navegador. Quedaría así:

const header = React.createElement(
  "header",
  null,
  React.createElement("h1", null, "Mozilla Developer Network"),
);

• Se pueden leer las variables JSX poniéndolas entre llaves, {así}
• Algunos atributos JSX son diferentes a los atributos HTML, para evitar conflictos con las palabras reservadas de JavaScript. Por ejemplo, el atributo class de HTML se convierte en className en JSX.

Usar React con la API de Wikidata

¿Qué es React y cómo interactúa con APIs?

• En un contexto como el de consultar Wikidata, React puede ayudarnos a construir una interfaz web que interactúe con la base de datos de Wikidata usando SPARQL (el lenguaje para consultas).

¿Cómo consultar Wikidata desde React?

• Para hacer una consulta a Wikidata desde una aplicación React deberemos:
  • Llamar a la API de Wikidata utilizando una consulta SPARQL.
  • Mostrar los resultados en la aplicación React de manera dinámica.

Pasos para consultar Wikidata con React

• Primero, necesitamos crear un componente que pueda hacer la consulta SPARQL y luego mostrar los resultados.
• Importar React y Hooks:

import React, { useState, useEffect } from 'react';

• Declarar el componente : Este componente se va a encargar de hacer la consulta a Wikidata y mostrar los resultados en la página web, declarando tres variables de estado.
  • data: almacena los datos que recibimos de la consulta SPARQL.
  • loading: es una bandera que indica si los datos aún se están cargando.
  • error: almacena cualquier error que ocurra durante la consulta a la API.

const WikidataQuery = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

• La URL de la API de Wikidata y la consulta SPARQL:

  // URL de la API de Wikidata
  const endpoint = "https://query.wikidata.org/sparql";

  // Consulta SPARQL para obtener los hijos de Bach y Maria Magdalena Bach
  const query = `
    SELECT ?hijo ?hijoLabel WHERE {
      ?hijo wdt:P22 wd:Q1339.  # Busca los hijos de Bach
      ?hijo wdt:P25 wd:Q57487. # Y que también sean hijos de Maria Magdalena Bach
      SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE]". } # Obtiene las etiquetas en el idioma adecuado
    }
  `;

• Utilizamos useEffect para ejecutar la consulta: es un hook que se ejecuta después de que el componente se haya montado en la pantalla. En este caso, queremos que se ejecute justo después de que el componente WikidataQuery se cargue.
  • fetchData: Es una función asíncrona que realiza la solicitud a la API de Wikidata. Usa fetch para enviar una solicitud POST a la API de Wikidata con nuestra consulta SPARQL y cuando obtenemos la respuesta, la convertimos a JSON para poder trabajar con ella.

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(endpoint, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/sparql-query',
          },
          body: `query=${encodeURIComponent(query)}&format=json`
        });

        const json = await response.json();
        setData(json.results.bindings); // Almacena los resultados de la consulta
      } catch (err) {
        setError(err.message); // Si hay un error, lo muestra
      } finally {
        setLoading(false); // Cambia el estado a "no cargando"
      }
    };

    fetchData();
  }, []);

• Mostrar y renderizar los resultados:

  // Mostrar resultados o mensajes de carga/error
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Hijos de Bach y Maria Magdalena Bach</h1>
      <ul>
        {data.map((item, index) => (
          <li key={index}>
            <strong>{item.hijoLabel.value}</strong>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default WikidataQuery;

Ventajas e Inconvenientes Usar React con Wikidata

##Ventajas##:

1. Actualización en tiempo real: Con React, podemos hacer que la interfaz se actualice al instante con los datos de Wikidata, lo que mejora muchísimo la experiencia del usuario, haciéndola más interactiva y fluida.
2. Componentes reutilizables: React nos permite crear componentes pequeños que podemos usar en diferentes partes de la aplicación. Esto hace que el código sea más organizado, fácil de mantener y reutilizable a lo largo del proyecto.

##Desventajas##:

1. Manejo de peticiones complejas: Gestionar las consultas a Wikidata y los resultados puede ser algo complicado, sobre todo si los datos son grandes o si necesitamos actualizaciones constantes, lo que puede generar algo de confusión en el código.
2. Problemas con la configuración: Si no configuramos bien ciertos detalles, como los permisos de CORS o la conexión con Wikidata, podríamos tener dificultades para que todo funcione correctamente. Dependemos de la red y de que Wikidata esté disponible en ese momento.

[alejandroVG2305]

Quizá no sería mala idea añadir también una serie de ventajas e inconvenientes de utilizar React para el desarrollo. Así nos resultaría más fácil a todos tomar la decisión. Podemos preparar algo antes de la reunión del lunes o discutirlo allí y documentarlo en el acta o en este mismo issue, como vosotros prefiráis.