Mes: febrero 2021

Vamos a hacer una tabla de multiplicar dinámica en la que tenemos dos inputs. Uno que vale 10 por defecto pero que podemos cambiar y otro que vale 1 por defecto y que también podemos cambiar.
Se nos muestra la tabla de multiplicar hasta el valor del primer número del segundo número.
Ejemplo: [__10__] [__6__]
1×6=6
2×6=12
..
10×6=60

Si cambio el valor del primero me cambia el alcance de la tabla.
Ejemplo: [__4__] [__6__]
1×6=6
2×6=12
3×6=18
4×6=24

Si cambio el valor se segundo me cambia la tabla:
Ejemplo: [__4__] [__3__]
1×3=3
2×3=6
3×3=9
4×3=12

Pista:

 import React, { Component } from 'react'
 
class Calculadora extends React.Component {
  constructor(props) {
    super(props);
    this.state = { numero:1,limite:10 };
  }
  cambioValores = (event) => {
    let nombreInput=event.target.name;
    let valorInput=event.target.value;
     this.setState({[nombreInput]: valorInput});
  }
  
  render() {
    let tabla=[]
    let limite=parseFloat(this.state.limite)
    for(let i=1;i<=this.state.limite;i++){
      tabla.push(<p>{i}x{this.state.numero}={i*parseFloat(this.state.numero)}</p>)
    }
     
    return (
      <div>
     
      <input
        type='number' name="limite" value={this.state.limite}
        onChange={this.cambioValores}
      />
       <input
        type='number' name="numero" value={this.state.numero}
        onChange={this.cambioValores}
      />
     <div>{tabla}</div> 
     </div>
    );
  }
}
 
export default function App() {
  return <Calculadora/>;
}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class Form extends Component {
    constructor(props) {
        super(props)
 
        this.initialState = {
            nombre: '',
            nota: '',
        }
 
        this.state = this.initialState;
    }
    cambio = event => {
        const {name, value} = event.target;
 
        console.log(name + "|" + value);
        this.setState({
            [name]: value
        })
    }
    enviar = () => {
        this.props.mas(this.state.nombre, this.state.nota);
        this.setState(this.initialState);
    }
    render() {
        return (
                <form>
                    <label>Nombre</label>
                    <input type="text" name="nombre" value={this.state.nombre} onChange={this.cambio} />
                    <label>Nota</label>
                    <input type="text" name="nota" value={this.state.nota} onChange={this.cambio} />
                    <input type="button" onClick={this.enviar} value="Añadir"/>
                </form>
                );
    }
}
class Cabecera extends Component {
    render() {
 
        return (
                <tr><th>Alumno</th><th>Nota</th></tr>
                );
    }
}
;
class Fila extends Component {
    
    eliminar=(e)=>{
        e.stopPropagation();
        this.props.menos(this.props.indice);
    }
    render() {
        
        return (
                <tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}>
                    <td>{this.props.nombre}</td><td>{this.props.nota}</td>
                            <td><input type="button" value="Borrar" onClick={this.eliminar}/></td>
                </tr>
                );
    }
}
;
class Tabla extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alumnos: this.props.alumnos,
            cont: 0
        };
        this.mas = this.mas.bind(this);
    }
    mas(nombre, nota) {
 
        this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]});
    }
    menos = (index) => {
        this.setState({
            alumnos: this.state.alumnos.filter((alumno, i) => i != index)
        });
    }
 
    render() {
 
        const filas = this.state.alumnos.map((fila, index) => {
            return (<Fila key={index} indice={index} nombre={fila.nombre} nota={fila.nota} menos={this.menos} mas={this.mas}/>);
        }
        );
        return (
                <div>
                    <Form mas={this.mas}/>
                    <button onClick={() => this.mas("Ana", 6)}>Añadir</button> <button onClick={() => this.menos(0)}>Quitar</button>
                    <table>
                        <thead>
                        <Cabecera/></thead>
                        <tbody>
                            {filas}
                        </tbody>
                    </table>
                </div>
                );
    }
}
;
class App extends Component
 
 
{
    render() {
        const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}, {nombre: "Eva", nota: 8}, {nombre: "Ot", nota: 7}];
        return (
                <Tabla alumnos={alumnos}/>
                );
    }
}
 
 
 
;
export default App;

Voy a hacer una calculadora super cutre con dos números y dos botones de sumar y restar.

import React, { Component } from 'react'

class Calculadora extends React.Component {
  constructor(props) {
    super(props);
    this.state = { num1:0,num2:0,total:0 };
  }
  cambioValores = (event) => {
    let nombreInput=event.target.name;
    let valorInput=event.target.value;
     this.setState({[nombreInput]: valorInput});
  }
  suma=()=>{
    let suma=parseFloat(this.state.num1)+parseFloat(this.state.num2)
    this.setState({total:suma})
  
  }
  render() {
    return (
      <div>
      <h1>Resultado: {this.state.total}</h1>
      <input
        type='number' name="num1"
        onChange={this.cambioValores}
      />
       <input
        type='number' name="num2"
        onChange={this.cambioValores}
      />
      <button onClick={this.suma}>Suma</button>
     </div>
    );
  }
}

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

import React, { Component } from 'react'

class Alumno extends React.Component {
  constructor(props) {
    super(props);
    this.state = { nombre: '', nota:0 };
  }
  cambioValores = (event) => {
   let nombreInput=event.target.name;
   let valorInput=event.target.value;
    this.setState({[nombreInput]: valorInput});
  
  }
  render() {
    return (
      <form>
      <h1>Hola {this.state.nombre}</h1>
      <p>Tienes una nota de {this.state.nota}</p>
      <input
        type='text' name="nombre"
        onChange={this.cambioValores}
      />
         <input
        type='text' name="nota"
        onChange={this.cambioValores}
      />
      </form>
    );
  }
}

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

¿Os atrevéis a añadir una propiedad apellido con su input correspondiente y que lo muestre también en el h1?

import React, { Component } from 'react'

class Alumno extends React.Component {
  constructor(props) {
    super(props);
    this.state = { nombre: '', apellidos:'',nota:0 };
  }
  cambioValores = (event) => {
   let nombreInput=event.target.name;
   let valorInput=event.target.value;
    this.setState({[nombreInput]: valorInput});
  }
  render() {
    return (
      <form>
      <h1>Hola {this.state.nombre} {this.state.apellidos}</h1>
      <p>Tienes una nota de {this.state.nota}</p>
      <input
        type='text' name="nombre"
        onChange={this.cambioValores}
      />
       <input
        type='text' name="apellidos"
        onChange={this.cambioValores}
      />
         <input
        type='text' name="nota" 
        onChange={this.cambioValores}
      />
      </form>
    );
  }
}

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

import React, { Component } from 'react'

class Saludo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { alumno: '' };
  }
  cambioNombre = (event) => {
    this.setState({alumno: event.target.value});
  }
  render() {
    return (
      <form>
      <h1>Hola {this.state.alumno}</h1>
      <p>Pon tu nombre y te saludo:</p>
      <input
        type='text' name="nombre"
        onChange={this.cambioNombre}
      />
      </form>
    );
  }
}

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

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

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

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

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