Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:javascript:react [2024/03/21 15:53] – [Resumen] tempwin
+++ informatica:programacion:javascript:react [2024/03/22 12:19] (actual) – [Gestión de estados] tempwin
@@ Línea 7: / Línea 7: @@
 ===== Resumen =====
-  * La sintaxis JSX permite escribir código como si fuese HTML.
+==== Sintaxis JSX ====
+La sintaxis JSX permite escribir código como si fuese HTML.
 Sin JSX:
@@ Línea 80: / Línea 82: @@
 (...)
 </code>
+==== Gestión de eventos ====
+En React los eventos se asocian mediante propiedades similares a los atributos HTML.
+<code javascript>
+export default function Product({author, title, stock}) {
+  const handleClick = () => {
+    alert(`Has tomado prestado el libro ${title}.`)
+  }
+  return (
+    <button onClick={handleClick}>Tomar prestado</button>
+  )
+}
+</code>
+El valor del evento debe ser una función completa y no una llamada a la función (fíjate que no ponemos los paréntesis cuando indicamos la función en la propiedad ''onClick'').
+También podríamos haber metido la función directamente en lugar de definirla y luego usarla:
+<code javascript>
+export default function Product({author, title, stock}) {
+  return (
+    <button onClick={() => alert(title)}>Tomar prestado</button>
+  )
+}
+</code>
+==== Gestión de estados ====
+Uso de //hooks//:
+<code javascript>
+import {useState} from "react";
+import {DB} from "../datos";
+import Product from "./product";
+export default function Index() {
+  const [libros, setLibros] = useState(DB.libros)
+  const handlePrestar = (id) => () => {
+    const i_libro = libros.findIndex(l => l.id === id)
+    const libro = libros[i_libro]
+    setLibros([
+      ...libros.slice(0, i_libro),
+      {...libro, stock: libro.stock - 1 }
+      ...libros.slice(i_libro + 1)
+    ])
+  }
+  return (
+    <>
+      <p className="content">A continuación tienes la lista de libros disponibles</p>
+      <div id="gallery">
+        {libros.map(({id, ...libro}) =>
+          <Product key={id} onPrestar={handlePrestar(id)} {...libro} />
+          )}
+       </div>
+    </>
+  )
+}
+</code>
+  * ''libros'': guarda el estado del componente.
+  * ''setLibros'': función que nos permite modificar el estado del componente.