Autor: Juan Pablo Fuentes

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>
  );
}

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" />;
}

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" />;
}

https://code.visualstudio.com/docs/typescript/typescript-compiling

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)