3. useState() - Traffic Light

[hchocobar]

Conceptos

Atención: intercambiar clases. Primero Traffic Light (useState) , luego Simple Counter (useState + useEffect)

• [x] JavaScript: Desestructuración de array y objetos
• [x] React: useState() - componente: StateExample
• [x] React: proyecto: Traffic Light

Desestructuración

Spain 65 - Day19 - ver comment

State Example

Spain 65 - Day 19

• [ ] Alert
• [ ] Button Group - Incrementar, Decrementar, Duplicar - state: number
• [ ] Button Group - Mayúscula, Minúscula - state: paragraph
• [ ] Button Group - Primary, Success, Warning, Danger - state: background

Proyecto: Traffic Light

    <div className="container d-flex justify-content-around mt-5">
      <div className={"col-2 '}>
        Verde
      </div>
      <div className={"col-2'}>
        Amarillo
      </div>
      <div className={"col-2'}>
        Rojo
      </div>
    </div>

Animación

.glow-red {
  box-shadow: 0px 0px 9px 4px red;
  animation: glow 0.8s linear infinite alternate;
}
.glow-yellow {
  box-shadow: 0px 0px 9px 4px yellow;
  animation: glow 0.8s linear infinite alternate;
}
.glow-green {
  box-shadow: 0px 0px 9px 4px green;
  animation: glow 0.8s linear infinite alternate;
}

@keyframes glow {
  to {
      box-shadow: 0px 0px 30px 20px yellowgreen;
  }
}

[hchocobar]

Desestructuración

/* Desestructuración de un array */
const foo = [1, 3, 5 , 7 , 9]

console.log(foo[0])
// bar = foo[0]

// desestructuración
[bar, buz] = foo
console.log(bar)  // bar toma el valor del **primer** elemento de foo
console.log(buz)  // buz toma el valor del **segundo** elemento de foo

/* Desestructuración de un objeto */
const user = {id: 18, name: 'Hector', lastname: 'chocobar'} 
const { id, lastname } = user
console.log(id)