# Componente de React personalizables usando props

[Ya cargamos React y ReactDOM](/articles/cargando-react-cdn),
[renderizamos un elemento](/articles/hola-mundo-react) y
[lo encapsulamos en un componente](/articles/componentes-con-react). Es hora
volver personalizable nuestro componente para que sea útil en varios casos.

Para estamos vamos a aprender que son los _props_ ¿Te acuerdas al hacer nuestro
Hola, Mundo! vimos como pasarle atributos a una etiqueta del DOM al usar
`React.createElement`?

Vamos a usar eso mismo para pasarle parámetros a nuestro componente y usarlos
para personalizar el resultado.

```js
function Hello() {
  return React.createElement("h1", null, "Hola Mundo!");
}
```

Ese es nuestro componente hasta ahora, vamos a hacer que el `Mundo` sea
personalizable usando _props_ para así poder escribir un `Hola, X!`, primero
cualquier _props_ que reciba nuestro componente va a ser parte de un objeto que
recibimos como primer argumento de nuestro componente.

```js
function Hello(props = {}) {
  return React.createElement("h1", null, "Hola Mundo!");
}
```

Con esto definimos este argumento `props` que por defecto es un objeto vacío.
Luego necesitamos usar el prop que vamos a recibir, el nombre lo podemos definir
nosotros, en este caso vamos a usar `name`.

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

Con esto nuestro `<h1>` va a tener Hola y lo que pasemos como `name` o, en caso
de no pasar nada, usamos _Mundo_ como estaba antes.

Ahora que ya esta listo nuestro componente es hora de usarlo.

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

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

ReactDOM.render(element, node);
```

Lo que hicimos es, en vez de pasar `null` como segundo argumento de
`React.createElement` pasamos un objeto con la propiedad `name` con el valor que
vamos a usar.

Ahora ya tenemos nuestro componente personalizable siendo renderizado.