Ejercicios React

En el juego de los 100 botones vamos a hacer lo siguiente:

Tener un estado con las variables ‘numActual’ y ‘finalizado’. numActual sera 1 y finalizado falso
En los botones llamaremos a una función del padre (como en el ejemplo de trifulcas)
En esa función tenemos que comprobar si el número pulsado es el correcto. Si el número que me pasa el hijo es igual al actual, si es así sumamos 1 al actual.
Si no es así, finalizado true
Si el número es 100 finalizado true

Si alguien quiere tirar de renderizado condicional y si finalizado es true mostrar ‘juego acabado’ y si no los números

Quiero una página que tenga tres botones, cada uno con un nombre de un color y al pulsar el botón en un

me salga ‘Mi color preferido es el ‘ y el color pulsado.

Minicalculadora:
Dos cajas de texto para poner números. Cuando cambien los valores que debajo salga el valor de la suma y el de la multiplicación.

Ejemplo eventos

Boton


const Boton = ({numero,llamada}) => {
    {/* Llamo a la función que me pasan con el número del botón. Esto lo que hace es llamar
        a la función del padre con el valor del botón que se ha pulsado
        Estoy pasando información del hijo al padre */}
    return <button onClick={()=>llamada(numero)} className="btn btn-info">{numero}</button>;
  }
export default Boton;

App

import logo from './logo.svg';
import './App.css';
// Componente importado desde un archivo
import Despedida from './Despedida';
import Boton from './Boton';
import 'bootstrap/dist/css/bootstrap.min.css';
const generateRandomNumbers = () => {
  const arr = Array.from({ length: 100 }, (_, i) => i + 1); // Números del 1 al 100
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]]; // Intercambiar elementos
  }
  return arr;
};
const getNumber=(numero)=>{
  console.log(numero)
}
const saludo=(nombre)=>{
  console.log(nombre)
  console.log("Hola "+nombre+" que tal");
}
// Componente Más o menos una función que nos devuelve una mezcla de HTML y JS
function App() {
  // Creo un array de nombres
  const numeros=generateRandomNumbers();
  
  return (
    <div className="App">
       {/* Paso al hijo una función para que se ejecute en un evento suyo */}
        {numeros.map((numero,i)=>
          <Boton numero={numero} key={i} llamada={getNumber}/>
        )}
        <Despedida nombre="Juan"/>
        {/* Aquí llamo a la función sin parámetros y nos pasará el evento */}
        <button onClick={saludo} >Pinchame</button>
        {/* Aquí uso la función flecha para pasar un parámetro propio */}
        <button onClick={()=>saludo("Ana")} >Pinchame</button>
    </div>
   
  );
}

// Exportamos APP (y lo renderizamos en index.js)
export default App;

Diferencias JSX yHTML

HTML y JSX tienen similitudes, ya que JSX (JavaScript XML) está inspirado en HTML, pero existen diferencias clave que los distinguen.

1. Sintaxis

  • HTML: Es un lenguaje de marcado independiente que utiliza una sintaxis estricta de etiquetas HTML. 
    <div class="container">
    <h1>Hello, World!</h1>
</div>
  • JSX: Es una extensión de sintaxis para JavaScript que permite escribir estructuras similares a HTML dentro del código JavaScript. Es procesado por herramientas como Babel para convertirse en código JavaScript puro. 
    <div className="container">
    <h1>Hello, World!</h1>
</div>

2. Atributos

  • HTML: Utiliza atributos estándar del DOM, como class o for. 
    <label for="input">Name:</label>
<input class="form-control" />
  • JSX: Algunos atributos se renombraron para evitar conflictos con palabras clave de JavaScript, como:
    • class → className
    • for → htmlFor
    <label htmlFor="input">Name:</label>
<input className="form-control" />

3. Expresiones

  • HTML: No soporta expresiones de JavaScript dentro del marcado. 
    <p>This is plain HTML.</p>
  • JSX: Permite incluir expresiones de JavaScript dentro de llaves {}. 
    const name = "John";
<p>Hello, {name}!</p>

4. Cierre de etiquetas

  • HTML: Algunas etiquetas, como <img> o <input>, no requieren cierre explícito. 
    <img src="image.jpg" alt="Image">
  • JSX: Todas las etiquetas deben cerrarse explícitamente, incluso las vacías. 
    <img src="image.jpg" alt="Image" />

5. Comentarios

  • HTML: Usa <!-- ... --> para los comentarios. 
    <!-- This is a comment -->
  • JSX: Los comentarios deben estar dentro de llaves y utilizar la sintaxis de comentarios de JavaScript. 
    {/* This is a JSX comment */}

6. Contexto de ejecución

  • HTML: Es un lenguaje de marcado estático, interpretado por el navegador directamente.
  • JSX: Es un lenguaje intermedio que se compila a JavaScript antes de ser interpretado por el navegador.

7. Interactividad

  • HTML: Depende de JavaScript externo para manejar eventos e interactividad. 
    <button onclick="handleClick()">Click Me</button>
  • JSX: Permite manejar eventos directamente con funciones de JavaScript. 
    <button onClick={handleClick}>Click Me</button>

En resumen, mientras que HTML es un lenguaje de marcado puro, JSX es una extensión de JavaScript diseñada para React que combina la apariencia de HTML con la potencia de JavaScript, lo que lo hace más dinámico y flexible.

Ejercicio React

Crear una app para el juego de los cien botones.

De momento tendremos un componente botón en Boton.js al que le pasamos el numero que tiene que pintar

En la App lo importamos y dibujamos 100 botones aleatorios. Os recomiendo crear un array de 100 números aleatorios y, de manera similar al ejemplo, pintar los botones.

Ejemplo React

import logo from './logo.svg';
import './App.css';
// Componente importado desde un archivo
import Despedida from './Despedida';

// Componente dentro del componente
const Saludo = (props) => {
  return <h1>Hola, {props.nombre}!</h1>;
}


// Componente Más o menos una función que nos devuelve una mezcla de HTML y JS
function App() {
  // Creo un array de nombres
  const alumnos=["Ana","Juan","Rosa","Eva"];
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Hola ¿Qué tal?
        </p>
        <a
          className="App-link"
          href="https://trifulcas.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Visita trifulcas
        </a>
        {/* Utilizo una expresión {} para recorrer el array y dibujar un componente por cada elemento*/}
        {alumnos.map((nombre,i)=>(
          <Saludo nombre={nombre} key={i}/>
        ))}
        <Despedida nombre="Juan"/>
      </header>
    </div>
   
  );
}

// Exportamos APP (y lo renderizamos en index.js)
export default App;

Ejercicio mesa de poker

Vamos a crear una mesa de póker que tendrá:

2 usuarios personas
1 usuario robot
1 usuario que eres tú.

Para ello vamos a necesitar:

1.- Obtener dos usuarios aleatorios. Los podemos sacar de https://randomuser.me/api/?results=2
2.- Una cara de robot. La podemos sacar de: https://robohash.org/(nombre o valor). Ejemplo: https://robohash.org/7 o https://robohash.org/juanpablo
3.- Obtener una cara para nuestro avatar. Similar al anterior: https://api.adorable.io/avatars/200/juanpablo.png
4.- Obtener las cartas
Las podemos sacar de:
https://deckofcardsapi.com/
La url siguiente nos crea una baraja:
https://deckofcardsapi.com/api/deck/new/shuffle/
que tiene un deck-id

{
“success”: true,
“deck_id”: “3p40paa87x90”,
“shuffled”: true,
“remaining”: 52
}

Para obtener cartas tenemos la url:
https://deckofcardsapi.com/api/deck/<>/draw/?count=2
Nos devuelve las cartas:
{
“success”: true,
“cards”: [
{
“image”: “https://deckofcardsapi.com/static/img/KH.png”,
“value”: “KING”,
“suit”: “HEARTS”,
“code”: “KH”
},
{
“image”: “https://deckofcardsapi.com/static/img/8C.png”,
“value”: “8”,
“suit”: “CLUBS”,
“code”: “8C”
}
],
“deck_id”:”3p40paa87x90″,
“remaining”: 50
}

Tendremos que pedir cinco cartas por jugador.

En la página tendremos un botón que se encargará de vaciar la página, crear los usuarios y repartir las cartas.
Opcional: Averiguar la jugada de cada usuario y decir quién ha ganado.

Localstorage

Modificar el juego del 1 al 100 para que guarde el estado dentro del localstorage.

Fase 1: Guarde solo el número y el tiempo que queda

Fase 2: Que al cargar esté igual que al cerrar. Esto implica tener marcados los números que se han marcado (e incluso el orden).

Fetch ejemplos

   fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json()) // Cuando acabes lo que te he pedido ejecuta esto
            .then(json => console.log(json)) // Cuando acabes de convertirlo entra aquí
            .catch();



        let usuario = ` {
    "id": 1,
    "name": "Ana Pi",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }`;

        fetch('https://jsonplaceholder.typicode.com/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: usuario
        })
            .then(response => response.json()) // Cuando acabes lo que te he pedido ejecuta esto
            .then(json => console.log(json)) // Cuando acabes de convertirlo entra aquí
            .catch();
        console.log("fetch1");
        let response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (response.ok) {
            let datos = await response.text();
            console.log(datos);
        } else {
            console.log(response.status);
        }
        console.log("fetch2");

Ejemplos fetch y API

// Consumir API -> Acceder a una API para recuperar valores
// AJAX: Una manera de acceder a una URL de manera asíncrona

// Ahora como se hace con 'fetch'
// Chuleta para recuperar cualquier cosa de una url que devuelve un JSON
/*
fetch(url_donde_esta_la_informacion)
      .then(response => response.json())
      .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
      })
*/

// Asíncrono y una promesa (Promise)
fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json()) // Cuando acabes lo que te he pedido ejecuta esto
    .then(json => console.log(json)); // Cuando acabes de convertirlo entra aquí

console.log("Hola");

// Ejemplo voy a usar https://randomuser.me/api que me devuelve un usuario

fetch("https://randomuser.me/api")
      .then(response => response.json())
      .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
        console.log(resultado);
        console.log("Hola "+resultado.results[0].name.first);
      })

// Ejemplo voy a usar https://rickandmortyapi.com/api/character que me devuelve personajes de rick y morty

fetch("https://rickandmortyapi.com/api/character")
      .then(response => response.json())
      .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
        console.log(resultado);

      })