State en React


import React from "react";

class Alumno extends React.Component {
  constructor(props) {
    super(props);
   this.state={nota:"Por determinar"}
  }
  render() {
    return (
      <div>
       <h1>{this.props.nombre}</h1>
       <h2>{this.state.nota}</h2>
      </div>
    );
  }
}

export default function App() {
  return (
    <div>
     <Alumno nombre="Ana"/>
     <Alumno nombre="Eva"/>
    </div>
  );
}

Ejercicios React

Paso 1:
Vamos a crear una ficha de empleado que consiste en un h1 con el nombre y un h2 con el cargo

Crear un componente ‘Empleado’ que incorpore esos elementos. Ponemos valores de ejemplo

Ese componente lo devolvemos en App

Paso 2:
Lo mismo que antes pero el nombre y el cargo lo pasamos como propiedad

Paso 3: Ponemos tres empleados con diferentes nombres y cargos en la App

Paso 4: (Para valientes) ponemos una foto que se pasa como propiedad

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

class Empleado extends React.Component {
  render () {
    return (
      <div>
        <h1>{this.props.nombre}</h1>
        <h2>{this.props.cargo}</h2>
        <img src={this.props.foto} width='200' />
      </div>
    )
  }
}

export default function App () {
  return (
    <div style={{ display: 'flex' }}>
      <Empleado nombre='Ana' cargo='CEO' foto='/img/gato1.jpg' />
      <Empleado nombre='EVA' cargo='CTO' foto='/img/gato2.jpg' />
      <Empleado nombre='Pep' cargo='Becario' foto='/logo512.png' />
    </div>
  )
}

Ejemplo de crear componentes con React


import React from 'react'

class Imagen extends React.Component {
  render () {
    return (
      <div className='gallery'>
        <a target='_blank' href={this.props.foto}>
          <img src={this.props.foto} alt={this.props.descripcion} width='600' height='400' />
        </a>
        <div className='desc'>{this.props.descripcion}</div>
      </div>
    )
  }
}

export default function App () {
  return (
    <div>
      <Imagen foto='gato1.jpg' descripcion='Esto son dos lindos gatitos' />
      <Imagen foto='gato2.jpg' descripcion='Me encanta su lindura' />
    </div>
  )
}


https://codesandbox.io/s/modest-wildflower-qhxw4

Anidación de componentes

import React from "react";

class Habitante extends React.Component {
  render() {
    return <h2>{this.props.nombre}</h2>;
  }
}

class FondoBikini extends React.Component {
  render() {
    return (
      <div>
        <h1>¿Quién vive en la piña debajo del {this.props.sitio}?</h1>
        <Habitante nombre="Bob Esponja" />
        <Habitante nombre="Calamardo" />
        <Habitante nombre="Patricio" />
      </div>
    );
  }
}

export default function App() {
  return (
    <div>
      <FondoBikini sitio="mar" />
      <FondoBikini sitio="subsuelo" />
      <FondoBikini sitio="alcantarillado" />
    </div>
  );
}

Ejercicio React con propiedades

Vamos a crear un componente ‘Suma’ al que le pasaremos dos propiedades llamadas num1 y num2 y nos mostrará:

La suma de num1 + num2 es igual a total

Me mostrará:

La suma de 4 y 5 es igual a 9

import React from "react";

class Suma extends React.Component {
  render() {
    let num1 = parseFloat(this.props.num1);
    let num2 = parseFloat(this.props.num2);
    let suma=num1+num2
    return (
      <h2>
        Suma de {num1} y {num2} es igual a {suma}
      </h2>
    );
  }
}

export default function App() {
  return <Suma num1="14" num2="57" />;
}

Otro ejemplo:


import React from "react";

class Suma extends React.Component {
  render() {
    let suma = 0;
    for (i = 1; i <= this.props.hasta; i++) {
      suma += i;
    }
    return (
      <h2>
        La suma de todos los numeros hasta el {this.props.hasta} es {suma}
      </h2>
    );
  }
}

export default function App() {
  return <Suma hasta="10" />;
}

import React from "react";
 
class Suma extends React.Component {
  render() {
    // Asignamos las variobles con destructuring
    let {num1,num2}=this.props
    let suma=parseFloat(num1)+parseFloat(num2)
    return (
      <h2>
        Suma de {num1} y {num2} es igual a {suma}
      </h2>
    );
  }
}
 
export default function App() {
  return <Suma num1="14" num2="57" />;
}

Ejemplos propiedades en Componentes


import React from "react";

class Alumno extends React.Component {
  constructor(){
    super()
  }
  render() {
    return <h2>Me llamo {this.props.nombre}</h2>;
  }
}

export default function App() {
  return (
    <article>
      <Alumno nombre="Ralph"/>
      <Alumno nombre="Lisa"/>
    </article>
  );
}

Varias propiedades:


import React from "react";

class Alumno extends React.Component {
  constructor(){
    super()
  }
  render() {
    return (
      <div>
    <h2>Me llamo {this.props.nombre}</h2>
    <h3>Y me gusta la asignatura de {this.props.asignatura}</h3>
    </div>
    );
  }
}

export default function App() {
  return (
    <article>
      <Alumno nombre="Ralph" asignatura="canicas"/>
      <Alumno nombre="Lisa" asignatura="Música"/>
    </article>
  );
}

Propiedades en la clase

class Alumno extends React.Component {
  render () {
    return <h2 className="{this.props.clase}">Me llamo Ralph</h2>
  }
}

function App () {
  return (
    <div className='App bg-primary'>
      <Alumno clase="bg-success" />
    </div>
  )
}

Propiedades en JS:


import React from "react";

class Alumnos extends React.Component {
  render () {
    const alumnos = []
    for (let i = 0; i < this.props.cantidad; i++) {
      alumnos.push(<p key={i}>Alumno {i + 1}</p>)
    }
    return <div>{alumnos}</div>
  }
}

export default function App() {
  return (
    <Alumnos cantidad="10"/>
  );
}

En este ejemplo y en el anterior creamos una tabla para agrupar diferentes elementos. Los elementos, como están repetidos, incluyen un ‘key’ que es algo que pide el React, pero que funciona si no lo ponemos y a lo que no le vamos a prestar atención.

class Tabla extends React.Component {
  render() {
    const tabla = [];
    for (let i = 1; i <= 10; i++) {
      tabla.push(
        <p key={i}>
          {this.props.numero} x {i} = {this.props.numero * i}
        </p>
      );
    }
    return <div>{tabla}</div>;
  }
}
export default function App() {
  return <Tabla numero="7" />;
}

Ejemplo React estático


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

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í!