Mes: enero 2025

App

import React, { useState, useEffect } from "react";
import Post from "./Post";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => setData(json));
  
      return () => {
        console.log("Limpieza de efecto (si aplica)");
      };
    }, []); // Solo se ejecuta una vez, al montar el componente.
    const removePost=(id)=>{
        setData(data.filter(post=>post.id!=id))
    }
    return (
      <div>
        {data ? <table class="table table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Body</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
            {data.map((post)=>
               
                <Post key={post.id} post={post} remove={removePost}/>
               )}
        </tbody>
        </table>
        : <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Cargando...
      </button>}
      </div>
    );
  }
  
  export default App;

Post

const Post= ({post,remove}) => {
    return <tr>
        <td>{post.id}</td>
        <td>{post.title}</td>
        <td>{post.body.slice(0,20)}...</td>
        <td><button class="btn btn-danger" onClick={()=>{remove(post.id)}}>Borrar</button></td>
    </tr>
}

export default Post;

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.

https://react.dev/learn/tutorial-tic-tac-toe

https://fullstackopen.com/es/about/

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;

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.

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.