# pedir una cadena al usuario
# y decir cuantas vocales tiene
# pido una cadena al usuario
cadena = input("Dame una cadena ")
totalVocales = 0
# Recorreré la cadena
for letra in cadena:
# comprobaré si es vocal
if letra == "a" or letra == "e" or letra == "i" or letra == "o" or letra == "u":
totalVocales += 1
# imprimo el resultado
print("vocales",totalVocales)
vocalesSin=0
vocalescon=0
for letra in cadena:
# comprobaré si es vocal
for vocal in "aeiou":
if letra == vocal:
vocalesSin += 1
for vocal in "áéíóúàèìòùü":
if letra == vocal:
vocalescon += 1
# imprimo el resultado
print("vocales sin acentos",vocalesSin)
print("vocales con acentos",vocalescon)
Mes: mayo 2024
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;
Ejercicio bucle
Vamos a pedir una cadena al usuario y vamos a decir el número de vocales que tiene.
Una vocal es a,e,i,o,u
Pasos:
-Pedir una cadena al usuario
– recorrer las letra de la cadena
– si es vocal contarla
– mostrar el resultado
Ejemplos bucles for
for i in range(10, 0, -1):
print(i)
for i in range(101):
cuadrado = i ** 2
if cuadrado % 2 == 0:
print(cuadrado)
numero = 20000000
queEs = True
for i in range(2, numero):
if numero % i == 0:
queEs = False
break # Un ejemplo muy bueno de uso de break
print(queEs)
# ¿Que nos está averiguando la variable queEs?
if queEs:
print(numero, "es primo")
else:
print(numero, "no es primo")
# break y continue
# break sale del bucle y continue se salta las siguientes instrucciones del bucle
for i in range(10):
if i == 5:
break # Sal del bucle, acabado
print(i)
for i in range(10):
if i == 5:
continue # Salta la siguiente instrucción
print(i)
cesta = [10, 30, 40, 5] # esto es una lista lo veremos
suma = 0
for valor in cesta:
suma += valor
print(suma)
cadena = ""
for i in range(5):
cadena += "*"
print(cadena)
cadena = "hola que tal"
palabras = 1
for letra in cadena:
if letra == " ":
palabras += 1
print(palabras)
# Bucles anidados: un bucle dentro de otro bucle
for i in range(1, 11):
print(i, "x 7 =", i * 7)
print("-----------")
# Todas las tablas de multiplicar
for tabla in range(1, 11):
for i in range(1, 11):
print(i, "x ", tabla, " =", i * tabla)
print("-----------")
# Todos los números primos hasta el 100
for numero in range(2,101):
queEs = True
for i in range(2, numero):
if numero % i == 0:
queEs = False
break
if queEs:
print(numero)
Bucle for
frutas = ["manzana", "banana", "cereza"]
for fruta in frutas:
print(fruta)
for contador in range(10):
print(contador)
# range(valor) -> 0 hasta el valor -1
# range(inicio,fin) -> desde inicio hasta fin -1
# range(inicio,fin,paso) -> desde inicio hasta fin de paso en paso
for i in range(5, 12):
print(i)
print("---------")
for i in range(0, 100, 5): # range(inicio,fin) -> desde inicio hasta fin -1
print(i)
print("---------")
for i in range(10, 1, -1): # range(inicio,fin) -> desde inicio hasta fin -1 en este caso paso negativo
print(i)
suma = 0
for i in range(101):
suma += i
print(suma)
for letra in "hola que tal":
print(letra)
letraABuscar = "a"
contador = 0
cadena = "tal"
for letra in cadena:
if letra == letraABuscar:
contador += 1
print("En '", cadena, "' hay", contador, "letras", letraABuscar)
notas = [5, 8, 1, 3, 6, 9]
aprobados = 0
for nota in notas:
if nota >= 5:
aprobados += 1
print("Hay", aprobados, "aprobados")
Soluciones ejercicios bucles while
# Escribir un programa que nos muestre una cuenta atrás desde 10
# 10 9 8 ...
cuenta = 10
while cuenta > 0:
print(cuenta)
cuenta -= 1
# Escribir un programa que muestre los cuadrados pares de los números del 1 al 100
# 4,16,36....
contador = 1
while contador <= 100:
# calculo el cuadrado
cuadrado=contador**2
# compruebo si es par
if (cuadrado % 2 == 0):
# imprimo
print(cuadrado)
contador += 1
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;