Alvaro Rodriguez

Componentes y propiedades

Aceptan entradas arbitrarias y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Alvaro Rodriguez
Componentes y propiedades

Renderizando un componente

Anteriormente, sólo encontramos elementos de React que representan las etiquetas del DOM:

jsx
const element = <div />;

Sin embargo, los elementos también pueden representar componentes definidos por el usuario:

jsx
const element = <Welcome name="Sara" />;

Cuando React ve un elemento representando un componente definido por el usuario, pasa atributos JSX e hijos a este componente como un solo objeto. Llamamos a este objeto “props”.

Por ejemplo, este código muestra “Hello, Sara” en la página:

jsx
function Welcome(props) {  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;ReactDOM.render(
  element,
  document.getElementById('root')
);

Pruébalo en CodePen

Recapitulemos lo que sucede en este ejemplo:

  1. Llamamos a ReactDOM.render() con el elemento <Welcome name="Sara" />.

  2. React llama al componente Welcome con {name: 'Sara'} como “props”.

  3. Nuestro componente Welcome devuelve un elemento <h1>Hello, Sara</h1> como resultado.

  4. React DOM actualiza eficientemente el DOM para que coincida con <h1>Hello, Sara</h1>.

Nota: Comienza siempre los nombres de componentes con una letra mayúscula.

React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, <div /> representa una etiqueta div HTML pero <Welcome /> representa un componente y requiere que Welcome esté definido.

Para saber más sobre el razonamiento detrás de esta convención, puedes consultar JSX en profundidad.

Desarrollado con React, Gatsby y DatoCMS por @smastrom

Contribuir o dar me gusta en GitHub