React

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.
```

```
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.

useContext

crear Contexto: (Contexto.js)

import { createContext } from "react";

const Contexto=createContext("valor por defecto");
export default Contexto;

Proveer de contexto: (App.js)


import './App.css';
import React from 'react';
import ComPadre from './componentes/ComPadre';
import Contexto from './componentes/Contexto';
function App() {

  return (
    <div className="App">
      <Contexto.Provider value="Hola contexto">
        <ComPadre texto="Hola" />
      </Contexto.Provider>
      
    </div>
  );
}

export default App;

Arbol de componentes: (Compadre,comhijo1,comhijo2)

import ComHijo1 from "./ComHijo1";
function ComPadre({ texto }) {

    return <ComHijo1 texto={texto}/>;
}

export default ComPadre;

import ComHijo2 from "./ComHijo2";
function ComHijo1({ texto }) {

    return <ComHijo2 texto={texto}/>;
}

export default ComHijo1;

import ComHijo3 from "./ComHijo3";
function ComHijo2({ texto }) {

    return <ComHijo3 texto={texto}/>;
}

export default ComHijo2;

Consumir el contexo (ComHijo3)

import { useContext } from "react";
import Contexto from "./Contexto";
function ComHijo3({ texto }) {
    const textoContexto = useContext(Contexto);
    console.log(textoContexto)
    return (<>
        <h1>{texto}</h1>
        <p> Esto viene desde las propiedades por goteo</p>
        <h1>{textoContexto}</h1><p> Esto viene del contexto</p>
    </>)
}

export default ComHijo3;

Ejemplos de useEffect en Calculadora

import React, {useEffect, useState } from 'react';

const Calculadora = () => {
    // Estado para almacenar los datos del formulario
    const [formulario, setFormulario] = useState({
        numero1: 0,
        numero2: 0
    });
    const [suma, setSuma] = useState(0);
    const [multiplicacion, setMultiplicacion] = useState(0);
    useEffect(() => {
        console.log('El componente se ha montado por primera vez');
    }, []); // Array vacío indico que se ejecute una sola vez, al montar (renderizar) el componente
  
    useEffect(() => {
        console.log(formulario);
    }); // Si parámetros se ejecuta cada vez que renderizamos el componente: cuidado con poner cosas que fuercen a enderizar
 
    useEffect(() => {
        console.log('El formulario ha cambiado');
        setSuma(formulario.numero1 + formulario.numero2) // Esto va con retraso
        setMultiplicacion(formulario.numero1 * formulario.numero2) // Esto va con retraso

    }, [formulario]); // Array con propiedades indico que se ejecute cuando cambian esas propiedades
  
    // Función para manejar cambios en los campos de entrada
    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormulario({
            ...formulario,
            [name]: Number(value)
        });

   
    };


    return (
        <form >
            <label>
                Numero 1:
                <input
                    type="number"
                    name="numero1"
                    value={formulario.numero1}
                    onChange={handleInputChange}
                />
            </label>
            <label>
                Numero 2:
                <input
                    type="number"
                    name="numero2"
                    value={formulario.numero2}
                    onChange={handleInputChange}
                />
            </label>
            <h1>{formulario.numero1 + formulario.numero2}</h1>
            <h1>{formulario.numero1 * formulario.numero2}</h1>

            <h1>{suma}</h1>
            <h1>{multiplicacion}</h1>
        </form>
    );
};

export default Calculadora;

Solución calculadora

import React, { useState } from 'react';

const Calculadora = () => {
    // Estado para almacenar los datos del formulario
    const [formulario, setFormulario] = useState({
        numero1: 0,
        numero2: 0
    });
    const [suma, setSuma] = useState(0);
    const [multiplicacion, setMultiplicacion] = useState(0);

    // Función para manejar cambios en los campos de entrada
    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormulario({
            ...formulario,
            [name]: Number(value)
        });

        setSuma(formulario.numero1 + formulario.numero2) // Esto va con retraso
        setMultiplicacion(formulario.numero1 * formulario.numero2) // Esto va con retraso

    };


    return (
        <form >
            <label>
                Numero 1:
                <input
                    type="number"
                    name="numero1"
                    value={formulario.numero1}
                    onChange={handleInputChange}
                />
            </label>
            <label>
                Numero 2:
                <input
                    type="number"
                    name="numero2"
                    value={formulario.numero2}
                    onChange={handleInputChange}
                />
            </label>
            <h1>{formulario.numero1 + formulario.numero2}</h1>
            <h1>{formulario.numero1 * formulario.numero2}</h1>

            <h1>{suma}</h1>
            <h1>{multiplicacion}</h1>
        </form>
    );
};

export default Calculadora;

Otro ejemplo de renderizar listas

function Alumnos() {
    let lista = [{ id: 1, nombre: "Ana", nota: 7 },
    { id: 2, nombre: "Eva", nota: 5 },
    { id: 3, nombre: "Pep", nota: 8 }
    ]
    return (<ul>
        {
            lista.map((valor) => <li key={valor.id}>{valor.nombre + " : " + valor.nota}</li>)
        }
    </ul>)
}

export default Alumnos;

Ejemplo estados complejos

import React, { useState } from 'react';
import Numero from './Numero'
const Contador = () => {
    // Quiero variables dentro de una página de react tengo que utilizar estado
    const [contador, setContador] = useState({ valor: 0, historial: [] });
    const [cadena, setCadena] = useState("")


    const incrementarContador = () => {
        setContador({ valor: contador.valor + 1, 
                    historial: contador.historial.concat("I") });
        setCadena("")
        console.log(contador)
    };
    const decrementarContador = () => {
        if (contador.valor > 0) {
            setContador({ valor: contador.valor - 1, 
                historial: contador.historial.concat("D") });

        } else {
            setCadena("No puedes poner número negativos")
        }

    };
    const resetearContador = () => {
        setContador({ valor: 0, 
            historial: [...contador.historial,"R"] });
        setCadena("")
    };
    return (
        <div>
            <Numero numero={contador.valor} resetear={resetearContador} />
            <p> {cadena}</p>
            <button onClick={incrementarContador}>Incrementar</button>
            <button onClick={decrementarContador}>Decrementar</button>
            <button onClick={resetearContador}>Reset</button>
        </div>
    );
};
export default Contador;

Interacción estados padres e hijos

import React, { useState } from 'react';
import Numero from './Numero'
const Contador = () => {
    // Quiero variables dentro de una página de react tengo que utilizar estado
    const [contador, setContador] = useState(0);
    const [cadena, setCadena] = useState("")
  
    
    const incrementarContador = () => {
        setContador(contador + 1);
        setCadena("")
    };
    const decrementarContador = () => {
        if (contador>0) {
            setContador(contador - 1);
            
        }else{
            setCadena("No puedes poner número negativos")
        }
        
    };
    const resetearContador = () => {
        setContador(0);
        setCadena("")
    };
    return (
        <div>
            <Numero numero={contador} resetear={resetearContador}/>
            <p> {cadena}</p>
            <button onClick={incrementarContador}>Incrementar</button>
            <button onClick={decrementarContador}>Decrementar</button>
            <button onClick={() => setContador(0)}>Reset</button>
        </div>
    );
};
export default Contador;

import './Numero.css'

function Numero({ numero, resetear }) {
    return <h1 onClick={resetear}>{numero}</h1>
}

export default Numero;

Copilot

Estadística con Python

Git

Docker

Programación en C#

Categoría: React

Dos tutoriales React

Ejemplo eventos