Composición de Componentes en React

Hasta ahora hemos creado un solo componente, lo más normal al usar React es tener múltiples componentes y combinarlos para formar un componente más complejo. Hoy vamos a ver como hacer esto.

Si recordamos del artículo anterior nuestro componente debe lucir así:

function Hello(props) {
  return React.createElement("h1", null, `Hola ${props.name}!`);
}

Hello.propTypes = {
  name: PropTypes.string
};

Hello.defaultProps = {
  name: "Mundo"
};

Vamos a crear un componente Header que renderice Hello internamente y agregue una etiqueta <header> alrededor de nuestro <h1>.

function Header(props) {
  return React.createElement(
    "header",
    null,
    React.createElement(Hello, { name: props.name })
  );
}

Header.propTypes = {
  name: PropTypes.string
};

Header.defaultProps = {
  name: "Mundo"
};

Si vemos acabamos de crear nuestro nuevo componente que crea un elemento <header> y dentro de este crea otro elemento usando el componente Hello, a parte de esto hicimos que este nuevo componente reciba el prop name y se lo pase tal cual a Hello.

Nota: Pasar props de un componente padre a un componente hijo se conoce como prop drilling. En futuros artículos veremos algunos problemas de esta técnica y como solucionarlos, pero es importante entender que no es una mala práctica hacerlo.

Esto es llama composición de componente, el nombre viene de Programación Funcional donde existe la técnica Composición de Funciones. La idea es que uses funciones, o en nuestro caso componentes, más pequeños y simples para crear funciones/componentes más complejos.

De esta forma podríamos tener varios componentes que usen internamente Hello para crear diferentes resultados agregando más contenido alrededor de este.

Si ahora actualizamos nuestro código quedaría así:

function Hello(props) {
  return React.createElement("h1", null, `Hola ${props.name}!`);
}

Hello.propTypes = {
  name: PropTypes.string
};

Hello.defaultProps = {
  name: "Mundo"
};

function Header(props) {
  return React.createElement(
    "header",
    null,
    React.createElement(Hello, { name: props.name })
  );
}

Header.propTypes = {
  name: PropTypes.string
};

Header.defaultProps = {
  name: "Mundo"
};

const element = React.createElement(Header, { name: "Sergio" });
const node = document.getElementById("app");

ReactDOM.render(element, node);

¡Con esto acabas de crear tu segundo componente! En otro artíuclo veremos como mejorar Header para personalizar el contenido dentro de <header>.