Diferencias

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

--- informatica:programacion:javascript:react [2024/03/21 15:21] – [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 37: / Línea 39: @@
 }
 </code>
+  * Las etiquetas siempre deben cerrarse (''<etiqueta></etiqueta>'' o ''<etiqueta />'')
+  * El nombre de los componentes utilizan //Pascal-case//
+  * Variables, constantes, funciones, atributos HTML... en //camel-case//
+  * El atributo HTML ''class'' se escribe ''className'' porque ''class'' es palabra reservada en JavaScript.
+  * El atributo HTML ''for'' se escribe ''htmlFor'' porque ''for'' es palabra reservada en JavaScript.
+Crear un proyecto rápidamente con Vite:
+<code>
+npx create-vite
+</code>
+Para ver los cambios que hagamos en directo, conviene lanzar el servicio web con:
+<code>
+npm run dev
+</code>
+Siempre hay que asociar el componente raíz a un elemento del DOM. Esto lo podemos ver en el fichero ''src/main.jsx'':
+<code javascript>
+import { App } from './App.jsx'
+ReactDOM.createRoot(
+  document.querySelector('#root')
+).render(<App />)
+</code>
+Quiere decir que asociaremos el componente ''App'' al elemento de la web que tenga ''%%id="root"%%'' como podemos ver en el fichero ''index.html'':
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="src/style.css">
+  </head>
+  <body>
+    <div id="root"></div>
+(...)
+</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.