Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Ejemplo Vida de componentes

import React, { Component } from 'react'

class Asterisco extends React.Component {
  constructor(props){
    console.log("Entro en el constructor");
    super(props)
    this.state = {
      cadena: '*'
    };
  }
  
  incrementar = () => {
    this.setState({cadena:this.state.cadena+'*'})
  };
  decrementar = () => {
    let a=this.state.cadena
    if (a.length>0){
    this.setState({cadena:a.slice(0,-1)})
  }
  
  };
  reset=()=>{
    this.setState({cadena:'*'})
  }
  shouldComponentUpdate() {
    if (this.state.cadena.length%2==0){
      return false;
    } else{
    return true;
  }
  }
  render() {
    console.log("Entro en el renderizado");
    return (
      <div>
        <h2>{this.state.cadena}</h2>
        <h3>El fabuloso programa de jugar con los asteriscos</h3>
        <p>En este momento tienes {this.state.cadena.length} asteriscos</p>
        <button onClick={this.decrementar}>Decrementar</button>
        <button onClick={this.incrementar}>Incrementar</button>
        <button onClick={this.reset}>Reset</button>
      </div>
    );
  }
  componentDidMount(){
    console.log("Componente montado y listo para funcionar");
  }
  componentDidUpdate(){
    console.log("El componente se ha actualizado");
  }
}

export default function App() {
  return <Asterisco/>;
}

Ejercicio React

Crear un componente con un h1 en el que vamos a tener un asterisco:

*

También un botón que al pulsarlo nos añada otro asterisco:
[Añadir]
***

Otro botón [Quitar] Que nos quite un asterisco

import React, { Component } from 'react'

class Asterisco extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      cadena: '*'
    };
  }
  
  incrementar = () => {
    this.setState({cadena:this.state.cadena+'*'})
  };
  decrementar = () => {
    let a=this.state.cadena
    if (a.length>0){
    this.setState({cadena:a.slice(0,-1)})
  }
  
  };
  reset=()=>{
    this.setState({cadena:'*'})
  }
 
  render() {
    return (
      <div>
        <h2>{this.state.cadena}</h2>
        <h3>El fabuloso programa de jugar con los asteriscos</h3>
        <p>En este momento tienes {this.state.cadena.length} asteriscos</p>
        <button onClick={this.decrementar}>Decrementar</button>
        <button onClick={this.incrementar}>Incrementar</button>
        <button onClick={this.reset}>Reset</button>
      </div>
    );
  }
}

export default function App() {
  return <Asterisco/>;
}

Contador v.2


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

class Counter extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      value: 0
    };
  }
  
  incrementar = () => {
    if (this.state.value<this.props.maximo){
    this.setState({value:this.state.value+1})
  }
  };
  decrementar = () => {
    if (this.state.value>0){
    this.setState({value:this.state.value-1})
  }
  };
  reset=()=>{
    this.setState({value:0})
  }
  multiplicar=()=>{
    this.setState({value:this.state.value*200})
  }
  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.decrementar}>Decrementar</button>
        <button onClick={this.incrementar}>Incrementar</button>
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.multiplicar}>Multiplicar</button>
      </div>
    );
  }
}

export default function App() {
  return <Counter maximo="20"/>;
}

React con eventos

import React, { Component } from 'react'

class Counter extends React.Component {
  constructor(){
    super()
    this.state = {
      value: 0
    };
  }
  
  incrementar = () => {
    this.setState({value:this.state.value+1})
  };
  decrementar = () => {
    this.setState({value:this.state.value-1})
  };
  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.decrementar}>Decrementar</button>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}

export default function App() {
  return <Counter />;
}

Ejemplo Estado


import React from "react";

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

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

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