React useref

useRef es una función de React Hooks que te permite crear una referencia a un elemento del DOM en un componente de React. Una referencia es simplemente una forma de guardar una referencia al elemento del DOM en una variable, para que puedas acceder y manipularlo más tarde.

Por ejemplo, puedes usar useRef para guardar una referencia a un elemento de entrada de texto y luego utilizar esa referencia para limpiar el valor de ese campo después de que el usuario haya enviado un formulario:

import { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    inputRef.current.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

En este ejemplo, se crea una referencia a inputRef utilizando useRef y se le pasa null como valor inicial. Luego se asigna esta referencia al elemento de entrada <input> mediante la propiedad ref. Al enviar el formulario, el evento onSubmit activa una función manejadora en la que se accede al valor actual de inputRef.current y se limpia.

useRef también es útil si necesitas guardar una referencia a un objeto o una función en un componente de React, en lugar de un elemento del DOM. Por ejemplo, puedes guardar una referencia a una instancia de una clase o a un objeto de configuración, y luego acceder a él desde diferentes lugares en tu componente.

https://latteandcode.medium.com/react-el-hook-useref-6e20f026d5b
https://keepcoding.io/blog/para-que-sirven-las-refs-en-react/
https://keepcoding.io/blog/useref-en-react/
https://beta.reactjs.org/reference/react/useRef

Ejercicio CRUD

Vamos a crear un mantenimiento de una BD de alumnos:

{
  "alumno": [
    {
      "id": 1,
      "nombre": "Ana Pi",
      "email": "ana@pi.com",
      "nota": 8
    },
    {
      "id": 2,
      "nombre": "Eva Buj",
      "email": "eva@buj.com",
      "nota": 7
    },
    {
      "id": 3,
      "nombre": "Juan Ra",
      "email": "juan@ra.com",
      "nota": 4
    }
  ]
}

La haremos como hemos estado haciendo los CRUD de C# de MVC, una lista de alumnos con botones de editar y borrar y un botón de añadir nuevo.

Juego piedra papel tijera

Vamos a crear un componente react que nos muestre tres botones [piedra],[papel], [tijera]. Cuando se pulse el ordenador escogerá al azar y nos dirá si se ha ganado perdido o emparado y se guardará:
– En un array todas las jugadas hasta el momento
– Veces que se han ganado.
– resultado última jugada.

React useState

import React, { useState } from 'react'
import ReactDOM from 'react-dom/client'

// ES UN COMPONENTE
function FavoriteColor () {
  //hook de estado (state) Me define:
  // nombre de la variable, nombre de la función y valor inicial
  const [color, Pepito] = useState('rosa palo')
  // Cada vez que se cambie el valor de color se repinta el componente
  const azul = () => {
    // Solo podemos cambiar el valor con la funcíón
    Pepito('blue')
  }
  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button type='button' onClick={azul}>
        Blue
      </button>
      <button type='button' onClick={() => Pepito('red')}>
        Red
      </button>
      <button type='button' onClick={() => Pepito('pink')}>
        Pink
      </button>
      <button type='button' onClick={() => Pepito('green')}>
        Green
      </button>
    </>
  )
}
export default FavoriteColor