5 cosas que te ayudarán con React.js

Cuando trabajamos con Reactjs y somos principiantes en el tema, en muchos casos omitimos o ignoramos algunos detalles de la librería que requieren ser analizados para hacer más ameno el desarrollo. Aquí te presento una serie de conceptos que pueden ser una fuerte base para comprender el funcionamiento de esta maravillosa herramienta:

Comprender la diferencia entre Propiedad y Estado

En resumen las diferencias son sencillas y para no ponernos muy técnicos la podemos explicar con un ejemplo: en nuestra aplicación utilizamos un sistema de tarjetas que poseen tres elementos que se modificaran para reutilizarlas, digamos que serán la imagen de la tarjeta, titulo y descripción; para que sean cambiadas segun los valores que se le transfieren usamos las props para pedir dichos datos:

1import React from 'react';
2
3const Tarjeta = (props) => (
4    <div className="tarjeta-contenedor">
5       <div className="imagen-contenedor">
6          <img className="imagen" src={props.imagenUrl} />
7        </div>
8        <div className="contenido">
9           <h2>{props.titulo} </h2>
10           <p>{prosp.descripcion} </p>
11        </div>
12    </div>);
13
14export default Tarjeta;

Luego podemos transferir dichos valores desde otro componente donde estemos importando esta tarjeta como atributos dentro del elemento jsx, a este componente le llamaremos para este ejemplo vistaTarjetas.js:

1import React from 'react';
2import Tarjeta from './tarjeta';
3
4class VistaTarjeta extends React.Component {
5  constructor(){
6    super();
7  }
8  render(){
9    return(
10      <div className="Container">
11        <Tarjeta imagenUrl="https://avatars2.githubusercontent.com/u/10574326?v=3&s=460"
12          titulo="edteam tarjeta"
13          descripcion="EDteam la plataforma de educación en linea que te hace sentir en casa"/>
14      </div>
15    )
16  }
17}
18

Si quisiéramos introducir estados para generar alguna interactividad podemos declararlos en un componente que extienda del objetoReact.Component, en este caso vistaTarjeta y lo usaremos para guardar un número de tarjeta con sus datos:

1import React from 'react';
2import Tarjeta from './tarjeta';
3
4class VistaTarjeta extends React.Component {
5  constructor(){
6    super();
7    this.state = {
8    tarjetas: [
9        {
10          imagenUrl: "https://avatars2.githubusercontent.com/u/10574326?v=3&s=460",
11          titulo: "edteam tarjeta",
12          descripcion: "edteam la plataforma de educacion en linea que te hace sentir en casa"
13        },
14        {
15          imagenUrl: "https://avatars2.githubusercontent.com/u/10574326?v=3&s=460",
16          titulo: "edteam tarjeta numero 2",
17          descripcion: "edteam comparte con esta gran comunidad"
18        }
19      ]
20    }
21  }
22  render(){
23    return(
24      <div className="Container">
25        {this.state.tarjetas.map((tarjeta) => (
26          <Tarjeta imagenUrl={tarjeta.imagenUrl}
27            titulo={tarjeta.titulo}
28            descripcion={tarjeta.descripcion}/>
29        ))}
30      </div>
31    )
32  }
33}
34

¿Que tienen de especial los estados? la respuesta a esta pregunta es sencilla, pueden ser modificados desde el mismo objeto utilizando un método llamado this.setState(datos), donde datos representa el json con los estados que deseas modificar. Un ejemplo sencillo siguiendo la secuencia del ejemplo anterior seria vaciar la lista de tarjetas con un método que crearemos en nuestra clase y lo ejecutaremos con un botón:

1import React from 'react';
2import Tarjeta from './tarjeta';
3
4class VistaTarjeta extends React.Component {
5  constructor(){
6    super();
7    this.state = {
8    tarjetas: [
9        {
10          imagenUrl: "https://avatars2.githubusercontent.com/u/10574326?v=3&s=460",
11          titulo: "edteam tarjeta",
12          descripcion: "edteam la plataforma de educacion en linea que te hace sentir en casa"
13        },
14        {
15          imagenUrl: "https://avatars2.githubusercontent.com/u/10574326?v=3&s=460",
16          titulo: "edteam tarjeta numero 2",
17          descripcion: "edteam comparte con esta gran comunidad"
18        }
19      ]
20    }
21    this.VaciarTarjetas.bind(this);
22  }
23  VaciarTarjetas(){
24    this.setState({tarjetas: []});
25  }
26  render(){
27    return(
28      <div className="Container">
29        {this.state.tarjetas.map((tarjeta) => (
30          <Tarjeta imagenUrl={tarjeta.imagenUrl}
31            titulo={tarjeta.titulo}
32            descripcion={tarjeta.descripcion}/>
33        ))}
34        <button onClick={this.vaciarTarjetas}>
35          Vaciar
36        </button>
37      </div>
38    );
39  }
40}

Entender cómo funcionan los ciclos de vida

Debemos comprender que cada ciclo de vida representa un estado por el cual está pasando un componente, es decir, tienes el control absoluto de las acciones que se están ejecutando cuando un componente se va a renderizar, actualizar o simplemente borrar de la vista. Si no conoces cuales son los ciclos de vida que manejas con react aquí están resumidos:

ComponentWillMount()representa el momento en el que nuestro componente se le dará render.
ComponentDidMount()este estado representa el momento en el nuestro componente ha sido renderizado, se puede utilizar cuando quieres realizar una accion que requiere de la aparición del elemento definido.
ComponentWillUnmount()es aquel instante donde el elemento será desmontado.
ComponentDidUnmount()se entiende como el momento en el que el componente fue desmontado.
ComponentDidUpdate()representa aquel instante en el que el componente será actualizado, es decir que cambian suspropiedades o estados.
ComponentWillUpdate()se define como el proceso donde ya las propiedades o estados del componente fueron actualizados.

Nunca modifiques estados dentro de un ciclo de vida

Esto es un tip súper útil cuando se trata de mapear bugs que no generan un log preciso, si realizas esto vas a generar un ciclo infinito en la mayoría de los casos, imaginate usar this.setState() dentro de un ComponentDidUpdate, analiza por un momento este caso, si comprendemos que un ciclo de vida es un trigger, evento o un momento exacto por el que pasa un componente y sabemos que este que nombramos se ejecuta cuando se cambia un estado o una propiedad; tendremos como resultado un bucle en el cual modificamos un estado y volvemos a llamar al mismo ciclo de vida luego de su propia ejecución.

Define bien tus elementos UI

Sabemos que React está orientado a componentes, si queremos una aplicación escalable debemos definir de forma precisa para que funcionara cada componente y de que tipo será, ¿Qué quiero decir con tipo? bueno existen dos tipos de componentes muy utilizados: Los stateless components los cuales son funciones que retornan un jsx y solo reciben propiedades, es decir que no usan ciclos de vida y los ES6 components los cuales son componentes que se construyen con clases de ecmascript 6 y extienden del objeto Component que posee los ciclos de vida. Comprendiendo lo anterior debemos entender que función tendrá el componente para saber que tipo usaremos.

Utiliza una store

Estas son librerías o patrones de flujo de datos que permiten almacenar todos los estados en un objeto con sus propios métodos para modificarlos, este objeto transfiere sus valores a React a través de las propiedades, en pocas palabras para aquellos que manejan el MVC esta herramienta actúa como un controlador para react (el cual representa la View), podemos mencionar Redux, Mobx, Baobab, Flux y Reflux.