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;
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;
# 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)
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
# 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")
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;
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;
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;
# Basándonos en el imc decir al usuario si está bien en su peso o no
peso = input("Dame tu peso ek kg ") # pido el peso y nos devuelve una cadena
altura = input("Dame tu altura en metros ") # pido la altura y nos devuelve una cadena
peso = float(peso) # float es para números con decimales
altura = float(altura) # La altura tendrá decimales
imc = peso / (altura ** 2)
print("Tu imc es ", imc)
if imc < 18.5:
print("Bajo peso")
elif imc < 25:
print("Peso normal")
elif imc < 35:
print("Sobrepeso")
else:
print("Obesidad")
anyo = input("Dime tu año de nacimiento")
anyo = int(anyo)
edad = 2024 - anyo
if edad < 18:
print("Eres menor de edad")
else:
print("Eres mayor de edad")
# Desarrolla un programa que pida al usuario un número entero y determine si es par o impar.
# Si es par, muestra “Es un número par”, si es impar, muestra “Es un número impar”.
numero = input("Dime un número, por favor ")
numero = int(numero)
if numero % 2 == 0:
print("Es par")
else:
print("Es impar")