¿Qué es un Componente en React?

Pequeña pieza de código encapsulada reutilizable que realiza un trabajo en específico y puede tener estado o no. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Todo lo que contiene una aplicación web puede ser un componente, la aplicación web en si misma puede verse como un componente que contiene otros componentes hijos, como lo son la barra de navegación, los menús, botones, etc.

Estado

Es como se encuentra la información del componente en un punto determinado del tiempo.

Todo componente tiene un estado inicial. El estado inicial es la información inicial del componente, antes de ser modificada por alguna interacción del usuario.

Por ejemplo. En el estado inicial de este componente los inputs del formulario no tienen valor alguno.

El estado se actualiza cuando el usuario interactúa con la interfaz.

¿Cómo crear componentes en React?

Existen dos maneras de crear un componente

1. Basada en Funciones. (Function Components)

1. Basada en Clases. (Class Components)

¿Por qué usar Componentes funcionales?

A partir de la versión 16.8 en React se adicionaron los hooks, que le proporcionaron características a los componentes basados en funciones que antes eran únicas de los componenetes de clase, como lo son el estado y métodos de ciclo de vida. Esto aunado a la facilidad de su uso, perfilan a los componentes funcionales, como el futuro en cuanto a implementeción de componentes en React.

Renderizando un Componenete

Para poder ver el resultado del código de nuestro componente en pantalla debemos renderizarlo. Renderizar es el proceso en el cual React va a mostrar o anclar, los componenetes que escribimos con Reactjs, en una aplicación en la que el usuario pueda verlos o el navegador pueda entenderlos.

Tenemos que crear un elemento en nuestro HTML; es aquí en donde se renderiza todo el código que hagamos ,por lo general es un div, que generalmente al configurar un proyecto viene por defecto configurado.

Es por esto que todas las aplicaciones hechas con React solo contienen un archivo HTML.

En el index.js escribimos:

RectDOM es una paquete o libreria de Reactjs que nos ayuda a renderizar nuestros elementos dentro de nuestro archivo HTML.

Ejemplo:

Props

Definicion: Son valores únicos u objetos, contienen un conjunto de datos que se pasan a los componentes mediante los elementos, utilizando una convención de nomenclatura similar a los atributos de etiquetas HTML.

¿Para qué sirven?

El propósito principal de los Props en React es proporcionar las siguientes funcionalidades a un component.

1. Pasar datos personalizados a un componente.

2. Desencadenar cambios de estado.

Por ejemplo. Cuando creamos un elemento; dentro de la etiqueta, del lado izquierdo, primero pondremos el nombre del componente. En el caso de la imagen que pusimos como ejemplo es "Element", del lado derecho pondremos el nombre de nuesta propiedad "reacProp", esta a su vez está pasando un tipo de dato string a nuestro elemento "Element":

Cuando creas una propiedad, como la propiedad reactProp, esta se agrega al objeto de accesorios nativos de React y podra ser invocada al igual que un objeto en JS con la nomeclatura props.reactProp.

Desestructuración de Props

También podemos desestructura las props entre llaves. Por ejemplo:

Proptypes.

Sirven para definir un valor por defecto a las propiedades y verificar que ese valor sea correcto, en caso que el valor de alguna propiedad no sea enviado por el componente padre.
Para importarlo debemos escribir la nomenclatura import ProTypes from 'prop-Types' e invocarla con ComponenteNombre.propType como se muestra en el siguiente ejemplo:

Para exportar nuestro componente a otros archivos de nuestra aplicación con los valores de definidos en las propTypes usamos la sintaxis export default ComponenteNombre .

DefaultProps

Agrega un valor por defecto a alguna propiedad en caso de que no lo tenga.