Tabla de Contenidos

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.

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

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