====== React ====== **React** es una biblioteca [[informatica:programacion:javascript|Javascript]] de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. * [[https://react.dev/|Web oficial]] ===== Resumen ===== ==== Sintaxis JSX ==== La sintaxis JSX permite escribir código como si fuese HTML. Sin JSX:


import { createElement } from 'react'

const Desplegable = (props) => {
    return createElement(
        "details", null,
        createElement("summary", null, props.titulo),
        createElement("p", null, props.contenido),
    )
}

Con JSX:


import { createElement } from 'react'

const Desplegable = (props) => {
  return (
    
      {props.titulo}
      {props.contenido}
    
  )
}

* Las etiquetas siempre deben cerrarse ('''' o '''') * 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:


npx create-vite

Para ver los cambios que hagamos en directo, conviene lanzar el servicio web con:


npm run dev

Siempre hay que asociar el componente raíz a un elemento del DOM. Esto lo podemos ver en el fichero ''src/main.jsx'':


import { App } from './App.jsx'

ReactDOM.createRoot( 
  document.querySelector('#root')
).render()

Quiere decir que asociaremos el componente ''App'' al elemento de la web que tenga ''%%id="root"%%'' como podemos ver en el fichero ''index.html'':

==== Gestión de eventos ==== En React los eventos se asocian mediante propiedades similares a los atributos HTML.


export default function Product({author, title, stock}) {

  const handleClick = () => {
    alert(`Has tomado prestado el libro ${title}.`)
  }

  return (
    
  )
}

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:


export default function Product({author, title, stock}) {

  return (
    
  )
}

==== Gestión de estados ==== Uso de //hooks//:


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 (
    <>
      A continuación tienes la lista de libros disponibles
      
        {libros.map(({id, ...libro}) => 
          
          )}
       
    
  )
}

* ''libros'': guarda el estado del componente. * ''setLibros'': función que nos permite modificar el estado del componente.