import React, { useState } from 'react'; 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") } }; return ( <div> <p>Contador: {contador}</p> <p> {cadena}</p> <button onClick={incrementarContador}>Incrementar</button> <button onClick={decrementarContador}>Decrementar</button> <button onClick={() => setContador(0)}>Reset</button> </div> ); }; export default Contador;
Solución 2
import Cabecera from './Cabecera'; import Boton from './Boton'; function Bloque({ texto }) { const pinchar=()=>{ console.log("Has pinchado el botón "+texto) } // Paso el evento del padre al hijo return <div> <Cabecera texto={texto} /> <Boton texto="Pincha aquí" evento={pinchar}/> </div>; } export default Bloque;
function Boton({ texto,evento }) { return <button onClick={evento}>{texto}</button>; } export default Boton;
Solución 1 evento botón
Pasar la información del padre al hijo
En bloque pasamos el texto al botón
import Cabecera from './Cabecera'; import Boton from './Boton'; function Bloque({ texto }) { // Paso la información del padre al hijo return <div> <Cabecera texto={texto} /> <Boton texto="Pincha aquí" bloque={texto}/> </div>; } export default Bloque;
function Boton({ texto,bloque }) { return <button onClick={()=>pinchar(bloque)}>{texto}</button>; } const pinchar=(texto)=>{ console.log("Has pinchado el botón "+texto) } export default Boton;
Todo sobre Unicode
Ejemplos
# Bucle es repetir algo varias veces # while condicion: ejecutamos algo contador = 0 while contador < 5: # mientras contador valga menos de 10 ejecuta el siguiente código contador += 1 # dentro del while print(contador) # dentro del while print("Proceso acabado") # fuera del while contador = 1 while contador < 100 and contador % 7 != 0: contador += 1 # dentro del while print(contador) # dentro del while # suma los números del 1 al 100 contador = 1 suma = 0 while contador <= 100: suma += contador contador += 1 print("Los numeros del 1 al 100 suman ", suma) # imprime por la consola los cuadrados de los números del 1 al 10 contador = 1 while contador <= 10: print(contador ** 2) contador += 1 cadena="" while len(cadena)<10: cadena+="*" print(cadena) contador=0 while contador<100: contador+=7 print(contador)
Ejemplos combinadas
edad = 19 altura = 130 print("Tu altura es de ", 130, " cm") # En una atracción del Tibidabo puedes entrar si mides más de 130 cm o tienes más de 10 años # condiciones combinadas: tener varias condiciones conectadas con operadores lógicos # ¿Qué es un operador lógico? Básicamente dos: and y or # and implica que se cumplan las dos condiciones # or que se cumpla alguna if edad >= 10 or altura >= 130: print("Puedes subir") else: print("No puedes subir") # Para entrar en la discoteca tienes que tener más de 18 años y llevar zapatos llevoZapatos = True if edad >= 18 and llevoZapatos: print("Puedes entrar a la discoteca") else: print("No puedes entrar") # hay otro operador lógico que es el not: lo que hace es negar la condición llevoZapatillas = True if edad >= 18 and not llevoZapatillas: print("Puedes entrar") else: print("No puedes entrar") departamento = "marketing" sueldo = 1000 # si el departamento es marketing y el sueldo está entre 900 y 1500 el irpf es de .8 # si el departamento es contabilidad y el sueldo está entre 1000 y 5000 el irpf es de .9 if departamento == "marketing" and sueldo >= 900 and sueldo <= 1500: irpf = .8 if departamento == "contabilidad" and sueldo >= 1000 and sueldo <= 5000: irpf = .9 # prioridad: not and or # departamento marketing y sueldo > 3000 o departamento contabilidad y sueldo >4000 irpf=1.2 if departamento == "marketing" and sueldo > 3000 or departamento == "contailidad" and sueldo > 4000: irpf = 1.2 # pero si no lo tengo claro if (departamento == "marketing" and sueldo > 3000) or (departamento == "contailidad" and sueldo > 4000): irpf = 1.2 # tengo una tienda online y aplico descuentos si se cumplen las siguientes características: # por defecto ningún descuento # si el cliente es de Barcelona y la compra es superior a 500, 10% de descuento # si el cliente es de Tarragona y la compra es superior a 700, 10% de descuento # si no es de Barcelona ni Tarragona y la compra es superior a 1000, 5% de descuento descuento = 0 compra = 800 ciudad = "Logroño" # ciudad=="Barcelona" # compra>=500 if ciudad == "Barcelona" and compra >= 500: descuento = 10 if ciudad == "Tarragona" and compra > 700: descuento = 10 # este if es equivalente a los dos anteriores if ciudad == "Barcelona" and compra >= 500 or ciudad == "Tarragona" and compra > 700: descuento = 10 # ciudad no sea Tarragona o Barcelona if not (ciudad == "Barcelona" or ciudad == "Tarragona") and compra >= 1000: descuento = 5
Solución ejercicios
# Crea un programa que pida al usuario dos números y determine cuál es el # mayor de los dos números. # Si son iguales, muestra cualquiera de los dos # mejorado: un mensaje que indique que los números son iguales. # pedir un numero al usuario y convertirlo numero1 = input("Dime el primer número ") numero1 = float(numero1) # pedir un segundo numero y convertirlo numero2 = input("Dime el segundo número ") numero2 = float(numero2) # con un if mirar cual es el mayor e imprimirlo if numero1 > numero2: print("El número mayor es ", numero1) elif numero2 > numero1: print("El número mayor es ", numero2) else: print("Son iguales") # o a>b y el mayor es a o b>a y el mayor es b ==> lo pasamos a if # Escribe un programa que solicite al usuario su calificación en un examen y determine si # ha aprobado o reprobado. Si la calificación es igual o superior a 60, # muestra “Aprobado”, de lo contrario, muestra “Reprobado”. calificacion = input("Dime tu calificación ") calificacion = float(calificacion) if calificacion >= 60: print("Aprobado") else: print("Reprobado")
Pasar una función como propiedad
App.js
import './App.css'; // Estilos propios del componente import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta const foo=(elemento)=>{ console.log("Has pinchado en " + elemento.alt) if (elemento.alt === "Marie Curie") { elemento.src = "/img/ok.jpg" } } function App() { // Devuelvo un div con las tarjetas que quiera // la Tarjeta tiene unas propiedades que se pasan al componente // Pasamos el nombre y la url de la imagen return ( <div className="App"> <h1>¿Quien descubrió el radio?</h1> <Tarjeta nombre="Einstein" correcta="Marie Curie" foo={foo}/> <Tarjeta nombre="Marie Curie" correcta="Marie Curie" foo={foo}/> <Tarjeta nombre="Schrodinger" correcta="Marie Curie" foo={foo}/> </div> ); } export default App;
Tarjeta.js
import Foto from './Foto'; // Importo Foto import Cabecera from './Cabecera'; // Importo Cabecera // Tarjeta le paso las propiedades nombre y url // Esto va dentro de props pero uso destructuring function Tarjeta({nombre, correcta,foo}) { // En el div es donde pongo la clase, porque es elemento html // Uso los componentes Cabecera y Foto return ( <div className="tarjeta"> <Cabecera nombre={nombre} correcta={correcta}/> <Foto descripcion={nombre} foo={foo}/> </div> ) } export default Tarjeta;
Foto.js
function Foto({descripcion, foo}) { let ruta='/img/' let nombre=descripcion.toLowerCase().replaceAll(" ","")+".jpg" return <img onClick={(evt)=>{foo(evt.target)}} className="foto" src={ruta+nombre} alt={descripcion} /> } export default Foto;
Ejemplos eventos
App.js
import './App.css'; // Estilos propios del componente import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta function App() { // Devuelvo un div con las tarjetas que quiera // la Tarjeta tiene unas propiedades que se pasan al componente // Pasamos el nombre y la url de la imagen return ( <div className="App"> <h1>¿Quien descubrió el radio?</h1> <Tarjeta nombre="Einstein" correcta="Marie Curie" /> <Tarjeta nombre="Marie Curie" correcta="Marie Curie"/> <Tarjeta nombre="Schrodinger" correcta="Marie Curie"/> </div> ); } export default App;
Tarjeta.js
import Foto from './Foto'; // Importo Foto import Cabecera from './Cabecera'; // Importo Cabecera // Tarjeta le paso las propiedades nombre y url // Esto va dentro de props pero uso destructuring function Tarjeta({nombre, correcta}) { // En el div es donde pongo la clase, porque es elemento html // Uso los componentes Cabecera y Foto return ( <div className="tarjeta"> <Cabecera nombre={nombre} correcta={correcta}/> <Foto descripcion={nombre}/> </div> ) } export default Tarjeta;
Cabecera.js
const comprobar = (objeto, correcta) => { console.log("Has pinchado en " + objeto.innerHTML) if (objeto.innerHTML === correcta) { objeto.innerHTML = "Muy BIEN" } else { objeto.innerHTML = "INCORRECTO" } } function Cabecera({ nombre, correcta }) { return <h1 onClick={(event) => { comprobar(event.target, correcta) }} >{nombre}</h1>; } export default Cabecera;
Minipágina React
Yo tengo varias cosas.
En public tengo una carpeta img con diferentes imágenes. Si dentro de mi programa pongo ruta absoluta ‘/img/…’ React va a buscar esa imagen en la carpeta.
Tengo mi App como siempre, que en general es el punto de entrada de cualquier web.
import './App.css'; // Estilos propios del componente import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta function App() { // Devuelvo un div con las tarjetas que quiera // la Tarjeta tiene unas propiedades que se pasan al componente // Pasamos el nombre y la url de la imagen return ( <div className="App"> <Tarjeta nombre="Einstein" url='/img/einstein.jpg' /> </div> ); } export default App;
El componente ‘Tarjeta’ es un componente compuesto, importa otros componentes:
import Foto from './Foto'; // Importo Foto import Cabecera from './Cabecera'; // Importo Cabecera // Tarjeta le paso las propiedades nombre y url // Esto va dentro de props pero uso destructuring function Tarjeta({nombre, url}) { // En el div es donde pongo la clase, porque es elemento html // Uso los componentes Cabecera y Foto return ( <div className="tarjeta"> <Cabecera nombre={nombre}/> <Foto descripcion={nombre} url={url}/> </div> ) } export default Tarjeta;
Cabecera.js
function Cabecera({nombre}) { return <h1>{nombre}</h1>; } export default Cabecera;
Fotos.js
function Foto({url,descripcion}) { return <img className="foto" src={url} alt={descripcion} /> } export default Foto;