De acuerdo con la documentación de React, los componentes te permiten dividir los elementos de tu interfaz gráfica en piezas reciclables e independientes, permitiéndote pensar en cada pieza de manera aislada. Veamos qué significa todo esto y cómo funcionan estas piezas de código.

Como he mencionado antes, los componentes son el actor principal en una obra de teatro de React, son los primeros en mencionarse al aprender el framework, y son a quienes se les presta más importancia y tiempo. Sin embargo, antes de hablar de componentes, hablaremos de elementos, porque a final de cuentas, los componentes únicamente definen qué elementos se van a colocar en el DOM Virtual.

Un elemento de React, es una descripción de lo que debemos ver en pantalla, esto de acuerdo al artículo de FreeCodeCamp https://medium.freecodecamp.org/react-elements-vs-react-components-fdc776705880

Los elementos de React son objetos de JavaScript, mismos que terminan siendo mucho más ligeros que un nodo del DOM, esta es la ventaja en rendimiento que React nos regala, en lugar de describir la página con nodos de HTML, lo hacemos con elementos de React. React a su vez se encarga de traducir estos elementos HTML en nodos, de manera eficiente y organizada, a modo en que actualizar la representación sea más fácil y rápido.

Para crear un elemento podemos usar dos opciones, la primera la función createElement que forma parte de React,

React.createElement(“p”,atributos,hijos)

O podemos usar JSX

<p atributos> hijos </p>

En estas declaraciones estamos indicando que como parte de nuestra interfaz, queremos una representación de este elemento p.

Además de la creación de elementos, como parte de nuestra interfaz, podemos solicitar que se creen componentes.

La diferencia entre los elementos y los componentes, reside en que los componentes se encargan de producir un conjunto de elementos, basados en la lógica descrita ya sea en funciones o clases.

Esta es la primera característica de los componentes, se crean usando clases o funciones. Éstas alternativas generan una separación entre los componentes de clase y los funcionales, los primeros conservan generalmente un estado y los segundos, generalmente, no.

Hasta ahora hemos visto la sintaxis de los componentes de clase, estos que hereden de la clase component de React

class Component extends React.Component {}

El requisito de los componentes, tanto de clase como funcionales, es que retornen un conjunto de elementos de React, en el caso por ejemplo de los componentes de clase, esto se hace a través de un método Render:

class Component extends React.Component{
  render(){
    return <elementos-react>;
  }
}

Por ahora no vamos a entrar en detalle en el proceso que sigue React para convertir componentes en elementos, pero consideré importante, desde el inicio, definir la separación entre ambos conceptos.

Ahora, ¿qué puede hacer un componente? En términos simples, un componente sencillamente es un bloque de código que puede recibir argumentos y que genera elementos de React.

En los ejemplos que hemos visto antes, ya hemos cubierto cómo generar elementos React, lo que no habíamos visto, es como nuestros componentes reciben argumentos.

La entrada de datos de los componentes se da vía props, veamos, cuando queremos crear un elemento basado en un componente que definimos, lo hacemos así:

<Component title=”Título” />

Aquí intencionalmente agregué un dato a enviar al componente, el title, como estamos usando JSX, pasamos este dato vía atributos del componente, eventualmente, esos atributos se convierten en un objeto al que llamamos props.

Más adelante veremos más detalles de los props, por ahora basta con saber que son la entrada de de datos de un componente.

Dentro del componente, el objeto props no se puede modificar, los datos que recibimos se conservan así, y nada los mueve.

Esto puede parecer una limitante, pero no lo es, cuando queremos tener datos dentro del componente que se pueden modificar, lo asignamos al estado del componente.

A lo largo de los vídeos, hemos hablado de cómo cada componente conserva su propio estado, en líneas de código, el estado es un objeto propiedad del componente, mismo que veremos más adelante.

Los datos almacenados en este objeto, sí se pueden modificar, de hecho, todo dato que pueda modificar el cómo se representa nuestro componente, debe ir en el estado. La razón, es que el proceso del que hablamos que transforma componentes en elementos de React se da, tanto cuando hacemos el render del componente, como cuando modificamos el objeto del estado, las modificaciones fuera de este objeto, no ejecutan este proceso y por tanto, no actualizan nuestras vistas.

Con toda esta información en mente, pasemos a escribir componentes más complejos para nuestra página.