React – Página 5

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.

Github react

https://github.com/juanpfuentes/React/tree/master/app01/src

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

Ejercicio componentes React

Crear un componente al que le pasemos como props un numero y nos muestre la tabla de multiplicar de ese número.

Crear un componente al que le pasemos como props un ancho y un alto y nos cree una tabla de ese ancho y ese alto con números consecutivos. Ej ancho 3, alto 2:

1 2 3
4 5 6

Crear un componente al que le pasemos un nombre y nos pinte el nombre al revés.

Para practicar: Ejercicios React

Ejemplo de componentes

Lista.js

const Lista = ({ items }) => items.map(x => <li key={x}>{x}</li>)

export default Lista

App2.js

const App = ({ nombre, apellido, edad }) => {
  return (
    <p>
      Ola {nombre} {apellido} k ase con esos {edad} añazos que tienes'??
    </p>
  )
}

export default App

App.js

import logo from './logo.svg'
import './App.css'
import App2 from './App2'
import Lista from './Lista'

const App = () => {
  let year = new Date().getFullYear()
  let nacimiento = 1980
  let alumnos = ['Ana', 'Juan', 'Eva']
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>Hola que tal, yo bien</p>
 
        <App2 nombre='Ana' apellido='Pi' edad={year - nacimiento} />
        <ul>
          <Lista items={alumnos} />
        </ul>
      </header>
    </div>
  )
}

export default App