Categoría: React

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

Tres soluciones para la tabla

const Fila = ({ tam, inicio }) => (
  <tr>
    {Array.from({ length: tam }).map((x, i) => (
      <td key={Math.random()}>{inicio + i + 1}</td>
    ))}
  </tr>
)
const Tabla = ({ ancho, alto }) => (
  <table>
    <tbody>
      {Array.from({ length: alto }).map((x, i) => (
        <Fila key={i} tam={ancho} inicio={i * ancho} />
      ))}
    </tbody>
  </table>
)

export default Tabla

const Fila = ({ tam, inicio }) => {
  const res = []
  for (let i = 0; i < tam; i++) {
    res.push(<td key={i}>{inicio + i + 1}</td>)
  }

  return res
}
const Tabla = ({ ancho, alto }) => {
  const foo = []
  for (let i = 0; i < alto; i++) {
    foo.push(
      <tr key={i}>
        <Fila tam={ancho} inicio={i * ancho} />
      </tr>
    )
  }

  return (
    <table>
      <tbody>{foo}</tbody>
    </table>
  )
}

export default Tabla

const Tabla = ({ ancho, alto }) => (
  <table>
    <tbody>
      {Array.from({ length: alto }).map((x, i) => (
        <tr key={i}>
          {Array.from({ length: ancho }).map((x, j) => (
            <td key={Math.random()}>{ancho * i + j + 1}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
)

export default Tabla