Components and Props React.js, Manejo de propiedades y componentes en React

¿Qué vas aprender?

En este vídeo aprenderás:

• Manejo de componentes de clases (Class Componentes)
• Manejo de componentes funcionales (Functional Component)
• Manejo de propiedades (Props) en los dos tipos de componentes
• Renderizado de componentes
• Composición y extracción de componentes

• Capitulo anterior: ¿Qué es React JSX?
• Puedes descargar el código de este vídeo aquí en la rama jsx
• O clona todo el repositorio de la siguiente manera con Git

git clone https://github.com/EWebik/react-js.git

¿Qué es un componente en React?

En React un componente es un elemento que acepta parámetros llamados propiedades (props) y retorna una jerarquía de vistas mediante el método render.

¿Por que utilizamos componentes en React?

Bien, utilizamos componentes para indicarle a React que es lo que deseamos ver en pantalla y que si nuestros datos cambian solo actualice el o los componentes en cuestión.

Tipos de componentes en React

En React podemos definir componentes de dos formas principalmente:

• Functional Component o componentes funcionales
• Class Component o componentes de clases

Functional Component

Este tipo es la forma más sencilla en que podemos definir un componente en React, ya que utilizamos funciones tal y como lo haríamos en JavaScript.

Bien, para que una función se convierta en Functional Component, debe cumplirse que:

• Solo debe aceptar un argumento "props" el cual se origina como propiedades.
• Debe retornar un elemento de React (estos elementos los vimos en la clase de JSX)

Ejemplo de componente funcional

//Componentes funcionales

function Padre(props){
  return(
    <div className="padre">
      <h1>{"Componente Padre"}</h1>
      <div className="componentes">
        <div className="componente">
          <h2>{"Hijo 1"}</h2>
          <p>{"Contador"}</p>
          <p>{"1"}</p>
        </div>
        <div className="componente">
          <h2>{"Hijo 2"}</h2>
          <p>{"Contador"}</p>
          <p>{"1"}</p>
        </div>
      </div>
    </div>
  );
}

Class Component

Otra de las formas es utilizar ES6 o ECMAScript 6, la cual nos permite utilizar programación orientada a objetos (POO) para definir un componente.

En lo personal me gusta mucho más trabajar con esta sintaxis, no obstante, dado que en la mayoría de los proyectos con React se trabaja bajo una lógica funcional, las componentes funcionales cada vez toman más fuerza, además de que, a muchos desarrolladores se les complica mucho comprender la POO.

Para que una clase se considere componente en React, mínimo debe:

• Extender de la clase React.Component
• Debe contar con un método de nombre render el cual debe retornar un elemento de React.

Ejemplo de un componente de clases

// Componentes de clases y ECMAScript 6

class Hijo1 extends React.Component{
  render(){
    return(
      <div className="componente">
        <h2>{"Hijo 1"}</h2>
        <p>{"Contador"}</p>
        <p>{"1"}</p>
      </div>
    );
  }
}

Props, Propiedades en un componente

Bien, ya hemos visto que existen dos tipos de componentes, ahora, sin importar el tipo, ambos pueden y son capaces de manejar propiedades, por ejemplo:

• En un componente funcional las propiedades son pasadas como un único argumento.
• Mientras que en un componente de clases se accede a ellas a través de su variable de contexto this.

Bien, en cualquiera de ambos casos de debe cumplir que las propiedades son de solo lectura, ¿Qué quiere decir esto?

Las props se deben considerar como solo lectura

Para entender esto, veamos un ejemplo que viene incluso en la misma documentación de React, la cual es muy buena y te recomiendo que revises.

Si tenemos una función que obtiene la suma de dos variables.

function suma(a,b){
        return a+b;
}

La función anterior se considera una "función pura" ya que no altera sus propiedades de entrada, que en este caso es "a" y "b".

Y siempre devolverá el mismo resultado para las mismas entradas.

Ahora si tenemos:

function retirarCantidad(cuenta, cantidad){
    cuenta.total -= cantidad;
}

Bien, aquí tenemos un función no pura que otras literaturas encontrarás como "impura", realmente es lo mismo.

Pero se llama así por que altera sus propiedades de entrada.

Aquí tenemos una restricción que React establece y que se debería de cumplir.

Los componentes en React deben comportarse como funciones puras respecto a sus propiedades (props).

Y seguramente me preguntarás, entonces ¿Cómo cambio el aspecto o controlo mi componente si no puedo alterar sus propiedades?

Ok, para ello mas adelante te enseñare a manipular el State en los componentes, con lo cual podrás actualizar y modificar el comportamiento de cada componente, así que suscríbete a mi canal y al boletín, para que te enteres cuando suba esa clase.

Así se vería un componente utilizando propiedades

function Hijo2 (props){
   return(
    <div className="componente">
      <h2>{props.titulo}</h2>
      <p>{props.subtitulo}</p>
      <p>{props.cuenta}</p>
    </div>
  );
}

Renderizado de componentes

Para renderizar un componente en la Dom de nuestra página lo haremos prácticamente igual que como lo hicimos en la clase de JSX.

Es decir, utilizaremos ReactDOM.render pero en vez de pasar un elemento, pasaremos un componente, por ejemplo:

ReactDOM.render(
  <Padre1 {...propiedades} />,
  document.getElementById('root')
);

Lo que hacemos en forma general con el código anterior es:

• A ReactDOM.render, le pasamos un elemento de React
• Dicho elemento se conforma de un componente el cual se le pasan ciertas propiedades
• El componente devuelve un elemento de React
• React DOM actualiza de forma eficiente el DOM de nuestra página, montando nuestro componente.

Los componentes contienen otras características como el ciclo de vida y el state, que veremos más adelante, a continuación, veremos el manejo de propiedades y la interacción entre ellos.

¿Cómo se debe nombrar un componente?

Esto es fácil, para que React reconozca a un componente como tal y no lance ninguna advertencia, el componente debe estar capitalizado, es decir, su nombre debe empezar con una mayúscula.

De lo contrario, lo tomará como un elemento o etiqueta de la DOM, ya sea un div, párrafo, imagen, etc.

Composición de componentes

La composición nos indica que la salida de un componente puede estar compuesta de uno o mas componentes, los cuales pueden ser el mismo componente o diferentes.

La composición es realmente como se trabaja en React, ya que como por lo regular solo llamamos a React DOM, una única vez, montando el componente principal, el cual esta compuesto de sub componentes que cumplen con cierta funcionalidad en especifico.

function Padre(props){
  return(
    <div className="padre">
      <h1>{"Componente Padre"}</h1>
      <div className="componentes">
       <Hijo1 {...props.hijo1} />
       <Hijo2 {...props.hijo2} />
      </div>
    </div>
  );
}

Extracción y división de componentes

En lo personal siempre me ha gustado ver a la programación en forma modular, quizá sea por que estudie electrónica y para el diseño electrónico la modularidad es vital para bajar la complejidad en un circuito.

En React sucede algo similar, te recomiendo que un Componente complejo lo dividas en componentes más pequeños que reduzcan el nivel de complejidad y así te sea más fácil manipular y controlar su funcionalidad, por ejemplo:

class Hijo1 extends React.Component{
  render(){
    return(
      <div className="componente">
        <h2>{"Hijo 1"}</h2>
        <p>{"Contador"}</p>
        <p>{"1"}</p>
      </div>
    );
  }
}

function Hijo2 (props){
  return(
    <div className="componente">
      <h2>{"Hijo 2"}</h2>
      <p>{"Contador"}</p>
      <p>{"1"}</p>
    </div>
  );
}

Excelente ¿Qué te a parecido esta clase? La comunicación entre componentes es el mayor reto a vencer en React.js, pero una vez que comprendes esto, React se vuelve muy fácil, nos vemos en el siguiente post.