# Composición de Componentes en React

Hasta ahora [hemos creado un solo componente](/articles/componentes-con-react),
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](/articles/tipos-datos-react) nuestro
componente debe lucir así:

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

```js
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](/articles/hola-mundo-react) `<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í:

```js
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>`](/articles/componentes-react-hijos-personalizables).