React: Up & Running, 2ª Edición

Capítulo 2. La vida de un componente

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Ahora que ya sabes cómo utilizar los componentes DOM prefabricados, es hora de que aprendas a crear los tuyos propios.

Hay dos formas de definir un componente personalizado, ambas logran el mismo resultado pero utilizan una sintaxis diferente:

• Utilizando una función (los componentes creados de esta forma se denominan componentes de función )

• Utilizar una clase que extienda React.Component (comúnmente denominados componentes de clase )

Un componente de función personalizado

Aquí tienes un ejemplo de un componente de función:

const MyComponent = function() {
  return 'I am so custom';
};

Pero espera, ¡esto es sólo una función! Sí, el componente personalizado es sólo una función que devuelve la IU que deseas. En este caso, la IU es sólo texto, pero a menudo necesitarás algo más, probablemente una composición de otros componentes. Aquí tienes un ejemplo de uso de un span para envolver el texto:

const MyComponent = function() {
  return React.createElement('span', null, 'I am so custom');
};

Utilizar tu nuevo y reluciente componente en una aplicación es similar a utilizar los componentes DOM del Capítulo 1, salvo que llamas a la función que define el componente:

ReactDOM.render(
  MyComponent(),
  document.getElementById('app')
);

El resultado de renderizar tu componente personalizado se muestra en la Figura 2-1.

Figura 2-1. Tu ...