Lección 06. Propiedades (props).

Una propiedad es un valor o dato que un componente recibe, para ser utilizado dentro de este.

Las propiedades (props) nos ayudan a poder reutilizar de mayor manera nuestros componentes, creando de esta manera "cajas vacías" a ser llenadas por propiedades a como deseemos.

Declaración de las propiedades._

Las propiedades a enviar a un componente se declaran al momento de usar un componente.

Se definen dentro de la etiqueta JSX del componente.

Nota: Las props se agregar de manera similar al de agregar atributos a etiquetas HTML comunes.

De la siguiente manera:

<Componente
  msg = "¡Hola!, Soy un componente de clase."
/>

O bien, podría verse también así:

<Componente msg = "¡Hola!, Soy un componente de clase." />

Recibir propiedades en los componentes._

Al enviar propiedades, el componente debe ser capaz de recibirlas, para ello, debemos escribir en el componente (en la función o en la clase).

Un ejemplo:

import React from "react";

export default function Propiedades (props) {
  return (
    <div>
      <h2>
        {props}
      </h2>
    </div>
  );
}

Nota: Donde en los parámetros a recibir en la función del componente tenemos las propiedades (props).

Propiedades por default._

Podemos asignar propiedades por default a nuestros componentes, para que si estos no reciben parámetros, se les asignen los definidos.

Para ello, agregamos a nuestro componente un código, quedando de la siguiente manera:

import React from "react";

export default function Propiedades (props) {
  return (
    <div>
      <h2>
        {props.porDefecto}
      </h2>
    </div>
  );
}

Propiedades.defaultProps = {
  porDefecto: "Las Props",
}

Nota: En el ejemplo anterior, se manda un objeto con una propiedad llamada porDefecto la cual se imprime el el h2 del componente.