Desestructuración ECMA Script 6

Básicamente es tomar una/unas propiedades de un objeto y convertirlo en variable, por ejemplo:

const TituloAzul = (props) => {

  //console.log(props)

  const nombre = props.usuario

  const edad = props.anios

  const color = 'blue'

  return (

    <h1 className='titulo' style={{ color: color }}>

      Hola {nombre}!, tienes {edad} años.

    </h1>

  )

}

// Desestructurado (variables)

const TituloRojo = ({ usuario, edad }) => {

  const color = 'red'

  return (

    <h1 className='titulo' style={{ color: color }}>

      Hola {usuario}!, tienes {edad} años.

    </h1>

  )

}