Sergio Xalambrí
February 26, 2019

# Composición de Componentes en React

Una de las mejores cosas de React es poder combinar componentes para crear nuevo componentes más complejos

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>`.

###### Read next: Componentes con Hijos Personalizables en React

Para evitar prop drilling y hacer componentes aún más personalizables vamos a ver como usar un prop para cambiar el contenido de un componentes de React.