Creando Componentes de React

En React.js todo es un <Componente />

React.js separa tu código en pequeñas partes llamadas Componentes que pueden crearse/definirse como class o como function. Cada componente es como una aplicación de React más pequeña que tiene su propia lógica y tiene un propósito final que es renderizar algo (por ejemplo: una navbar de bootstrap, una lista dropdown, un modal, un formulario dinámico, galería de imágenes, formulario de suscripción), casi todo puede diseñarse y codificarse como un componente de React. Para hacer eso, el componente de React debe tener un return que devuelva código JSX (HTML + JS).

1import React from 'react';
2
3// Un componente funcional o de función
4function NavBar(props){
5    return (<nav className="navbar navbar-light bg-light">
6              <a className="navbar-brand" href="#">Navbar</a>
7           </nav>);
8}

1import React from 'react';
2
3// Un componente de clase
4class Navbar extends React.Component{
5    render(){
6        return (<nav className="navbar navbar-light bg-light">
7              <a className="navbar-brand" href="#">Navbar</a>
8           </nav>);
9    }
10}

☝️ Este es un componente de clase. Te recomendamos que uses componentes funcionales y hooks en su lugar, ya que los componentes de clase están considerados como legacy (deprecados).

Usando un Componente

Una vez que hayas creado tu componente puedes mostrarlos usando tags de esta forma:

1import React from "react";
2import { render } from "react-dom";
3
4// Podemos usar el componente Navbar y mostrarlo en la parte superior de nuestro componente Home
5function Home(props){
6    return (
7        <div className="container-fluid"> // en JSX debemos usar el atributo llamado 'className' en vez de 'class'
8            <Navbar />
9            <div>
10                ... El resto de contenido de Home ...
11            </div>
12        </div>
13    );
14}
15
16// Aquí le decimos a React que ponga nuestro componente principal <Home /> dentro del elemento DOM con id #myApp 
17ReactDOM.render(
18  <Home />,
19  document.querySelector("#myApp")
20);

El Componente Props

A veces un componente necesita información dinámica para mostrar. Por ejemplo, necesitamos nuestro componente <Navbar /> para mostrar la lista de enlaces disponibles y el logo de la marca. Podemos incluir esa información dentro de la llamada del componente <Navbar /> de la misma manera que lo hacemos en los tags HTML.

1<Navbar foo="bar" foo2="bar2" />

En este ejemplo, estamos pasando un array de elementos de menú y una URL con el logo al componente NavBar que acabamos de declarar anteriormente.

1let menu = [
2    {label: 'Home', url: '/home'},
3    {label: 'Contact Us', url: '/contact-us'}
4];
5<Navbar items={menu} logo="http://path/to/logo.png" />

Ahora, dentro de <Navbar /> podemos usar esos valores (que se entregan a través de la variable props) para renderizar la información proporcionada.

Y, por último, debemos indicarle a React dónde debe renderizar ese componente en el DOM.

Características de los componentes class

El Estado del Componente

Llamamos a los componentes de clase en React stateful porque vienen con un objeto state global (compartido solo dentro del mismo componente) que tiene el único propósito de almacenar los datos necesarios para renderizar el componente. Un uso obvio del objeto state sería, por ejemplo, si tenemos un formulario con campos de entrada que deben ser rellenados por el usuario. Los datos ingresados por el usuario deberán ser guardados en algún lugar para poder ser utilizados. El state será ese lugar.

En otro ejemplo, digamos que estás desarrollando un componente <Clock /> que tiene que imprimir la hora actual cada segundo. Esto significa que nuestro componente tendrá que volver a renderizar cada segundo.

Para que el state mantenga una página web actualizada, está programado para volver a renderizar el DOM cada vez que se modifica. Entonces, probablemente ya puedas ver cómo puedes aprovechar esta característica: manteniendo tu hora actual dentro del estado y reasignándola con la hora más actual cada segundo. Así:

👇 El siguiente demo actualiza la hora actual cada segundo:

El estado siempre está dentro del método constructor() de los componentes de clase y se expresa como un simple objeto literal de JS.

El objeto State se considera inmutable (no debe cambiarse directamente)

Al hablar de modificar el valor del estado, debes recordar que el estado no debe ser mutado directamente. Solo debe modificarse llamando al método especialmente designado this.setState(). En él, tendrás que pasar un nuevo objeto de estado actualizado que reemplazará los valores de estado anteriores. Por ejemplo:

1// Una asignación directa de this.state solo está permitida en el método constructor de su clase; en cualquier otro lugar puede causar un error en sus datos almacenados
2constructor(){
3   super();
4   this.state = {
5      counter: 0
6   }
7}
8
9// Desde cualquier otro lugar de la clase, podemos restablecer el valor de una variable de estado pasando un objeto ACTUALIZADO al método setState() 
10const newState = {
11    counter: 2
12};
13this.setState(newState);
14
15// También puedes hacer la misma operación como inline
16this.setState({
17   counter: 2
18});
19// Observa cómo arriba hemos pasado la nueva versión completa del estado con {} y el valor del contador actualizado dentro
20// Observa que esta nueva versión reemplazará por completo la versión anterior del estado, borrando cualquier otro dato que pueda haber en él

Los cambios de estado ocurren de manera asíncrona y la mutación directa del estado crea una oportunidad para que los valores se actualicen incorrectamente y causen inconsistencias de datos en su aplicación web.

El constructor del componente

Como se mencionó anteriormente, el lugar para inicializar el estado de su componente es en el método constructor.

El constructor de cada componente se llama automáticamente muy temprano en la ejecución de la aplicación, incluso antes de que su sitio web se haya montado.

Si no necesitas usar el estado, no necesitas implementar explícitamente un método constructor y en algunos ejemplos, verá que este método falta. Sin embargo, si necesitaras usar el estado, es extremadamente importante inicializar tus valores, de lo contrario, en el primer render, tu aplicación devolverá tus variables de estado como undefined.

También necesitarás implementar tu método constructor si usarás alguna propiedad, con el método super(props). Eso le permite heredar de la superclase React.Component de la que todos los componentes de clase React son subclases.

1class ClockComponent extends React.Component {
2  constructor(props){
3    super(props);
4     // Aquí es un buen lugar para definir el primer valor que tendrá el estado de tu componente
5    this.state = {
6    	currentTime: new Date()
7    };
8  }
9}

Aquí hay una plantilla completa de componente de clase React como referencia:

1import React from 'react';
2import ReactDOM from 'react-dom';
3
4class Clock extends React.Component {
5  // El método constructor estándar con props y this.state inicializado
6  constructor(props) {
7    super(props);
8    this.state = {date: new Date()};
9  }
10
11  // Un método de ciclo de vida de React
12  componentDidMount() {
13    this.timerID = setInterval(
14      () => this.tick(),
15      1000
16    );
17  }
18    
19  // Un método de ciclo de vida de React 
20  componentWillUnmount() {
21    clearInterval(this.timerID);
22  }
23
24  // Un método personalizado creado por el desarrollador para cumplir un propósito
25  tick() {
26    this.setState({
27      date: new Date()
28    });
29  }
30
31  // El método de renderizado estándar con el retorno del componente 
32  render() {
33    // Aquí se puede insertar cualquier código JS que deba ejecutarse en cada renderizado y se usaría en el retorno a continuación, como variables o declaraciones dinámicas
34    return (
35      <div>
36        <h1>Hello, world!</h1>
37        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
38      </div>
39    );
40  }
41}
42
43ReactDOM.render(
44  <Clock />,
45  document.getElementById('root')
46);

☝️ Este es un componente de clase. Te recomendamos que uses componentes funcionales y hooks en su lugar, ya que los componentes de clase están considerados como legacy (deprecados).

Características de los componentes funcionales

Los componentes funcionales son componentes de React simplificados originalmente destinados con el fin de mejorar su presentación. Por esa razón, tradicionalmente son *stateless: no tienen estado propio. Esto les permite ser más ligeros, más rápidos y más fáciles de escribir.

La falta de estado de las funciones fue abordado con React 16.8.0, que introdujo los populares hooks de React. Desde entonces, el hook useState nos permite reproducir el comportamiento de estado en nuestros componentes funcionales:

Actualización del estado de un componente funcional

1//     elegir nombre de variable     valor inicial
2//       ⬇                            ⬇
3const [ error, setError ] = useState(null);
4//               ⬆
5//             elige el nombre del modificador

Por ejemplo, podemos elegir cualquier variable y modificador de esta manera:

1const [ size, setSize ] = useState(2);
2const [ color, setColor ] = useState("pink");
3const [ anything, setAnything ] = useState(<any value>);

Uso de un componente funcional (con hooks)

Pero espera, ¿debo usar Función o Clase?

Entonces, los Hooks de React cambiaron efectivamente la naturaleza de los componentes funcionales originales de React y ahora ambos tipos de componentes son muy similares en las cosas que pueden hacer. Debido a eso, te recomendamos firmemente que uses funciones y hooks tanto como sea posible.

• Las funciones son más simples.
• El tamaño de tu paquete (todo tu sitio web) será más ligero y se descargará más rápido.
• Eventualmente, las clases serán obsoletas.

¡Puedes cambiar de un tipo de declaración al otro sin ningún problema! Aquí hay una comparación de ambos tipos de componentes:

Simplicidad del componente

Como Función: Declaración y uso muy simples. El único propósito de la función es devolver HTML con lo que este componente debe mostrar cuando se coloca en el sitio web.

Como Clase: es más complejo; la declaración de la clase debe heredar de React.Component y contiene muchas más funcionalidades que permiten al desarrollador personalizar la lógica del componente como métodos de ciclo de vida y el estado. Tenga en cuenta que puede crear tantos métodos de clase adicionales como desee.

Declaración del componente

1import React from 'react';
2
3// Usando funciones
4function MyComponent() {
5    return (
6        <div>
7            <h1>Hello</h1>
8        </div>
9    );
10}
11
12// O usando funciones flecha
13const MyComponent = () => {
14    return (
15        <div>
16            <h1>Hello</h1>
17        </div>
18    );
19};
20
21// Usando clases
22class MyComponent extends React.Component {
23    render() {
24        return (
25            <div>
26                <h1>Hello</h1>
27            </div>
28        );
29    }
30}

Estado del componente

Como Función:

Cada variable debe declararse usando el Hook useState dentro de la función.

Como Clase:

El estado debe declararse en el constructor y luego usar la función this.setState para actualizarlo.

1class MyComponent extends React.Component {
2    constructor() {
3        super();
4        this.state = {
5            foo: "var"
6        };
7    }

Propiedades del componente

Como Función:

Las propiedades se reciben como el primer parámetro de la función de esta manera:

1function MyComponent(props){
2    return <div>Hello {props.name}</div>;
3}

Como Clase:

Las propiedades están dentro de la variable de clase this.props, y puedes hacer referencia a ella en cualquier lugar de esta manera:

1class MyComponent extends React.Component {
2    render() {
3        return <div>Hello {this.props.name}</div>;
4    }
5} 

Métodos del ciclo de vida

Como Función:

Usa el hook useEffect para el ciclo de vida. Más información aquí.

Como Clase:

Tienes todos los métodos disponibles con estos siendo los más importantes: Constructor, ComponentDidMount (o useEffect para Hooks), ComponentWillUnmount (o useEffect para Hooks), etc.

Puedes declarar dentro de tu clase de componente esos métodos y serán llamados mágicamente por React en el momento adecuado, así:

1class MyComponent extends React.Component {
2    constructor() {
3        super();
4        this.state = { /* Inicializa tu estado */ }
5    }
6
7    componentDidMount() { /* Hacer algo al estado aquí */ }
8
9    componentWillUnmount() { /* El mejor lugar para eliminar listeners */ }
10
11    static getDerivedStateFromProps(nextProps, prevState) { /* Devolver el estado actualizado */ }
12
13    // Hay muchos más métodos de ciclo de vida

🔗 Aquí puedes encontrar más información sobre los diferentes métodos de ciclo de vida de React JS.