Trifulcas

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

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

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