Props en React

React es una biblioteca de JavaScript que se basa en la fabricación y combinación de componentes para construir interfaces de usuario. Cada componente se define por separado en un archivo javascript, y tiene un aspecto similar a este que sigue, el cual se encontraría en el archivo listaCompra.js:

import React, { Component } from 'react';
import Articulo from './Articulo';

class ListaCompra extends Component {
  render() {
    return (
      <ul>
        <Articulo cantidad="1">Pan</Articulo>
        <Articulo cantidad="6">Leche</Articulo>
        <Articulo cantidad="2">Huevos</Articulo>
      </ul>
    );
  }
}

Las propiedades, que veremos en el código escritas como props, se usan para configurar componentes, y son pasadas desde los componentes padres a los componentes hijos. Es importante recordar que el componente hijo no puede modificarlas, el propietario es el componente padre.

En el ejemplo anterior, el componente ListaCompra usa otro componente que aún no hemos escrito, el componente Articulo. En el JSX que devuelve su método render las props son pasadas al componente hijo como etiquetas de atributos similares a las de HTML. En nuestro caso se está pasando la propiedad cantidad. El contenido entre las etiquetas de apertura y cierre también se puede usar como propiedad del componente hijo. En ListaCompra se trata del nombre del artículo.

import React, { Component } from 'react';

class Articulo extends Component {
  render() {
    return (
      <li>
        {this.props.cantidad} × {this.props.children}
      </li>
    );
  }
}