React

React es una biblioteca 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.

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 (
    <details>
      <summary>{props.titulo}</summary>
      <p>{props.contenido}</p>
    </details>
  )
}

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:

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(<App />)

Quiere decir que asociaremos el componente App al elemento de la web que tenga id="root" como podemos ver en el fichero index.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>
(...)

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 (
    <button onClick={handleClick}>Tomar prestado</button>
  )
}

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 (
    <button onClick={() => alert(title)}>Tomar prestado</button>
  )
}

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 (
    <>
      <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>
    </>
  )
}

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