import './App.css'
import React from 'react'
class Alumno extends React.Component {
render () {
return <h2>Me llamo Ralph</h2>
}
}
function Cabecera () {
return (
<header>
<h1>Hola ¿Qué tal estamos?</h1>
<p>Yo bien.</p>
</header>
)
}
function Barra () {
return (
<aside>
<ul>
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
<li>Opción 4</li>
</ul>
</aside>
)
}
function Footer () {
return (
<footer>Pie de pagina</footer>
)
}
function App () {
return (
<div className='App'>
<Cabecera />
<Alumno />
<Barra />
<Footer />
</div>
)
}
export default App
Ejemplos Componentes React
import React from "react";
class Alumno extends React.Component {
render() {
return <h2>Me llamo Ralph</h2>;
}
}
export default function App() {
return <Alumno />;
}
React
Clases en JS y TS
https://www.w3schools.com/js/js_class_intro.asp
https://code.tutsplus.com/tutorials/typescript-for-beginners-part-4-classes–cms-29565
// Definición de la clase. En este caso definimos como tiene que ser una 'Person'
// Pero la clase NO ES una 'Person'
class Person {
name: string;
constructor(theName: string) {
this.name = theName;
}
introduceSelf() {
console.log("Hi, I am " + this.name + "!");
}
}
// Para crear objetos de la clase 'Person' debemos usar 'new'
// Instanciar una clase. Al usar new estamos llamando al método reservado 'constructor'
let anna:Person=new Person('Anna');
// ¿Qué valor tiene el name de anna? 'Anna'
anna.introduceSelf()
console.log(anna.name)
let john:Person=new Person('John Pi')
john.introduceSelf()
class Simple {
a:string='a'
b:string='b'
}
let foo:Simple=new Simple()
class Producto {
nombre:string
precio:number
constructor(nombreProd:string,precioProd:number){
this.nombre=nombreProd;
this.precio=precioProd
}
precioConIva(){
return this.precio*1.21
}
}
let botijo:Producto=new Producto('Botijo',100)
let gaita:Producto=new Producto('Gaita',150)
console.log(botijo.precioConIva())
console.log(gaita.precioConIva())
¿Seríais capaces de añadir a Producto una función precioConDescuento que nos devuelva el precio con un 10% de descuento? ¡Seguro que sí!
Configurar TS en Visual Studio Code
Ejercicio interfaces TS
Declarar un interface llamado ‘Producto’ que incluya:
Nombre:string
Precio:number
oferta:boolean opcional
Crear un producto ‘botijo’ que valga 100€ y otro ‘gaita’, que valga 150€ y esté de oferta.
Crear una función precioConIva que tenga como parámetro un ‘Producto’, que devuelva un number y que lo que devuelva sea el precio del producto multiplicado por 1.21
interface Producto {
nombre:string,
precio:number,
oferta?:boolean
}
let botijo:Producto={nombre:'Botijo',precio:100}
let gaita:Producto={nombre:'Gaita',precio:150,oferta:true}
function precioConIva(p:Producto):number{
return p.precio*1.21
}
console.log(botijo.nombre,precioConIva(botijo))
Ejemplos Interfaces
https://code.tutsplus.com/tutorials/typescript-for-beginners-part-3-interfaces–cms-29439
https://desarrolloweb.com/articulos/definicion-interfaces-typescript.html
interface Alumno{
nombre:string,
readonly edad:number,
matriculado:boolean,
notas:number[],
dni?:string
}
interface AlumnoCorto{
nombre:string,
edad:number
}
let ana:Alumno={nombre:'Ana',
edad:23,
matriculado:true,
notas:[10,9,7]}
let eva:Alumno={nombre:'Eva',
edad:23,
notas:[10,9,7]} //Error en Eva porque falta una propiedad
let pep:Alumno={nombre:'Pep',
edad:23,
matriculado:true,
notas:[10,9,7],
dni:'1231312332'} //Error en dni porque en Alumno no existe esa propiedad
console.log(eva)
ana.nombre='Ana Pi'
ana.edad=90
function saludo(alum:Alumno):void{
console.log("Hola "+alum.nombre)
}
function recortarAlumno(al:Alumno):AlumnoCorto{
return {nombre:al.nombre,edad:al.edad}
}
saludo(ana)
console.log(ana)
Otro ejemplo:
interface Alumno{
nombre:string,
edad:number
}
let ana:Alumno={nombre:'Ana',edad:25}
let eva:Alumno={nombre:'Eva',edad:25}
let pep:Alumno={nombre:'Pep',edad:25}
let juan:Alumno={nombre:'Juan'} // Falla
interface Aula{
nombre:string,
alumnos:Alumno[]
}
let laboratorio:Aula={nombre:'Laboratorio',alumnos:[ana]}
let lectura:Aula={nombre:'Lectura',alumnos:[ana,eva,pep,juan]}
console.log(lectura)
Prueba TS
Declarar una variable como cadena y asignarle cadena y numero para ver si da error
Declarar una variable como array de cadenas y lo mismo, probar si se le pueden asignar otros valores o da error
Declarar una función triple(numero:number):number que nos devuelva el triple de un número y ver si funciona y que pasa si pasamos una cadena o asignamos el resultado a una variable de tipo string
https://www.typescriptlang.org/play
let cad:string;
cad='hola'
cad=5 //ERROR
let alumnos:string[]
let perros:Array<string> // Tipos genéricos, una característica de TS
perros=['carlino','Bulldog','Sin raza']
perros=[1,2,3] // ERROR
alumnos=['ana','eva','pep']
alumnos=[1,2,3] // ERROR
alumnos=['ana','eva',3] //Error en el 3
function triple(numero:number):number{
return numero*3
}
console.log(triple(5))
let edad:number
edad=triple(7)
cad=triple(9) //ERROR
let a: [number, string];
a=[3,'cadena']
a=['cadena',5] //ERROR
enum Animals {cat, lion, dog, cow, monkey}
let c: Animals = Animals.cat;
console.log(Animals[3]); // cow
console.log(Animals.monkey); // 4
Typescript
Funciones para practicar
1.- Crear una función triple que nos devuelva el triple de un número. Ej: triple(5)–>15 triple(0)–>0
2.- Crear una función nombreCompleto que pasándole un nombre y un apellido nos devuelva una cadena con nombre y apellido juntos separados por un espacio: nombreCompleto(‘ana’,’pi’)->’ana pi’
3.- Crear una función areaCirculo que le pasemos el radio de un círculo y nos devuelva el área, que es 2*3.1416*r*r ej: areaCirculo(1)–>6,2832
4.- Crear una función triplicar que le pasemos una cadena y nos la devuelva repetida tres veces: triplocar(‘hola’)->’holaholahola’
5.- Crear una función perímetro a la que le pasamos dos lados y nos devuelve el perímetro de un rectángulo, que es lado1*2+lado2*2 Ej: perimetro(2,3)–>10
6.- Crear una función que me devuelva el mayor elemento del array
7.- Función que nos sume las posiciones pares por un lado y las impares por otro. Nos devuelve un array con [pares,impares]
8.- Función que nos cuente las vocales de una cadena
9.- Función que nos cuente las consonantes
10.- Función que nos diga si un número es capicua
11.- Función que nos diga si una frase es capicua (deberíamos eliminar los espacios)
12.- Función que nos elimine espacios repetidos dentro de la cadena
13.- Función que dada una cadena nos ponga las vocales en minúsculas y las consonantes en mayúsculas
14.- Función que nos devuelva la tirada de dos dados en un array: [1,5]
15.- Función que nos cuenta las apariciones de una cadena dentro de otra
16.- Función que nos convierta de minutos a segundos
17.- Función que nos diga,dada una edad, cuantos días ha vivido esa persona (sin contar bisiestos)
18.- Función que dados dos números nos diga si tienen la misma paridad
19.- Función a la que le pasemos un array y un número y nos devuelva un array con los numeros menores que el número dado
20.- Función a la que le pasemos una cadena y una longitud y nos elimine las palabras que sean de mayor longitud que la dada.
// Función a la que le pasemos una cadena y una longitud y nos elimine las palabras que sean de mayor longitud que la dada.
// eliminarPorLongitud('hola que tal',3)-->'que tal'
// eliminarPorLongitud('hola que tal estamos',4)-->'hola que tal'
function eliminarPorLongitud (cadena, longitud) {
// recorrer las palabras y mirar su longitud
const palabras = cadena.split(' ')
let res = ''
for (let i = 0; i < palabras.length; i++) {
if (palabras[i].length <= longitud) {
res += palabras[i] + ' '
}
}
return res.trim()
}
function eliminarPorLongitud2 (cadena, longitud) {
// recorrer las palabras y mirar su longitud
const palabras = cadena.split(' ')
const res = []
for (let i = 0; i < palabras.length; i++) {
if (palabras[i].length <= longitud) {
res.push(palabras[i])
}
}
return res.join(' ')
}