React JS - Componentes funcionales y de clase

Componentes y Propiedades

Básicamente tenemos 2 tipos de componentes, los funcionales y los de clase. Aceptan parámetros de entrada llamadas "props", veamos primero como definimos un componente funcional

A tener en cuenta que los nombres de los componentes deben empezar en mayúsculas, porque si empiezan en minúscula React puede interpretarlo como tag html (para mas detalle sobre esto

leer: https://es.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).

Ahora vemos lo mismo pero con un componente de clase:

La clase WelcomeClass tiene un método render en el cual el contenido es exactamente igual al del componente funcional. Luego hablaremos un poco mas de las clases ya que tienen algunas particularidades extras.

En el siguiente ejemplo, juntamos el hola mundo del anterior post. Salvo que en esta ocasión no utilizaremos el elemento para ser renderizado, sino que renderizaremos el componente funcional:

Como se ve en la imagen anterior, al momento de incluir el componente dentro del contenedor,  llamamos al componente utilizando su nombre como elemento de un tag <Welcome /> y pasamos como parámetro de entrada de la función la propiedad name='Martin'. Al ejecutarlo en CodePen.

Ahora podemos renderizar el componente de clase, cambiando el tag Welcome por WelcomeClass

Como se ve ambos componentes hacen exactamente lo mismo.

Composición de componente

La composición de componentes no es mas que tener un componente dentro de otro, como por ejemplo, podemos tener un componente Aplicación y dentro de él, un componente formulario. Por ejemplo:

Se puede ver como desde ReactDOM.render, se renderiza el componente funcional Aplicacion y desde dentro de el se referencia al componente funcional Formulario. La salida sería la siguiente:

Las propiedades

Las propiedades son solo de lectura, no se deben modificar, para ellos existen los estados que veremos en otro post mas adelante.