Si eres un desarrollador React, en este artículo te compartimos las mejores prácticas a seguir en 2020.

1. Usa componentes funcionales sobre componentes de clase

React introdujo el concepto de Hooks en la versión 16.8. Los Hooks te permiten usar el estado y los métodos del ciclo de vida de React dentro de un componente funcional. Anteriormente sólo podían usarse dentro de componentes de clase.

Los Hooks te permiten reutilizar la lógica de estado sin tener que preocuparte por la jerarquía del componente, esto permite ahora gestionar los datos de una forma mucha más sencilla usando hooks.

Componente de clase

import React from "react";

class YesNoComponent extends React.Component {
  state = {
    buttonPressed: ""
  };

  onYesPress() {
    this.setState({ buttonPressed: "Yes" });
    console.log("Yes was pressed");
  }

  onNoPress() {
    this.setState({ buttonPressed: "No" });
    console.log("No was pressed");
  }

  render() {
    return (
      <div>
        <button onClick={() => this.onYesPress()}>Yes</button>
        <button onClick={() => this.onNoPress()}>No</button>
      </div>
    );
  }
}

export default YesNoComponent; 

Componente funcional con Hooks

import React, { useState } from "react";

const YesNoComponentFunctional = () => {
  const [button, setButton] = useState("");

  const onYesPress = () => {
    setButton("Yes");
    console.log({ button });
  };

  const onNoPress = () => {
    setButton("No");
    console.log({ button });
  };

  return (
    <div>
      <button onClick={() => onYesPress()}>Yes</button>
      <button onClick={() => onNoPress()}>No</button>
     </div>
  );
};

Puedes ver que el componente funcional tiene menos líneas de código y está optimizado.

2. Usa componentes de orden superior

En React, una de las formas de cumplir el principio Don’t Repeat Yourself (DRY) en los componentes, es usar el concepto de Higher Order Component (HOC). Puedes compartir funcionalidades comunes sin repetir código usando HOCs.

Un componebte de orden superior es basicamente una función, que toma como argumento de entrada un componente, y regresa un nuevo componente. Este puede también renderizar el componente que fue pasado como argumento.

function myHOC (myOtherComponent) {
  return class extends React.Component {
    render() {
      return <myOtherComponent {...this.props}/>
    }
  }
}

Los componentes de orden superior te permiten abstraer tu código, una vez que los uses es muy probable que sigas usando este patrón. Es opcional pero te permite lograr la reusabilidad siguiente el modelo de composición. DRY es un principio que deberías seguir siempre incluso sin implementar HOCs.

3. Usa PropTypes

Puedes definir tus componentes sin PropTypes, pero sin PropTypes o alguna forma de validación de tipo de dato corremos el riesgo de pasar información erronea a un componente, lo que puede ocasionar que tu aplicación truene o un tenga un comportamiento inesperado.

Te recomendamos ampliamente utilizar PropTypes en tus componentes React para evitar fallas técnicas con los usuarios.

import PropTypes from 'prop-types'

const MyComponent = (props) => {
 return (
  // render something
 )
}

// You can declare that a prop is a specific JS type. 
MyComponent.propTypes = {
  text: PropTypes.string.isRequired,
  content: PropTypes.array.isRequired,
  onPress: PropTypes.func.isRequired,
  size: PropTypes.number.isRequired,
  styles: PropTypes.object.isRequired,
  isReady: PropTypes.bool.isRequired,
}

Existen varios tipos de validadores de datos (string, array, func, number, etc.). Esto te permite declarar que una propiedad (prop) es de un tipo específico.

Cualquier persona que utilice tu componente sabrá que propiedas pasar al componente y de que tipo. React lanzará una excepción en la consola cuando se pase un tipo de dato incorrecto, esto nos permite cachar errores durante el desarrollo de la aplicación.

4. Crea componentes simples y pequeños

¿Te has encontrado con componentes con miles de líneas de código? Si es así, eso es una indicación de que el componente puede ser descompuesto en más componentes. En general no queremos que un componente haga muchas cosas. Un componente en React es una unidad que se espera que haga una sola cosa y que sea simple.

Si un componente resulta ser largo y complejo, es necesario ser devidido en multiples componente o contenedores

Separa componentes de presentación y componentes de contenedor

Es una buena práctica tener una carpeta de /containers y otra de /components. Los componentes de presentación son aquellos que son puramente interfaz de usuario (UI). Los componentes de contenedor son aquellos que difícilmente tienen piezas de UI, en su mayoría contienen lógica de aplicación.

Al mantener separados por tipo a los componentes, estos son generalmente más pequeños y simples. Esto hace la lógica y las pruebas los componentes más sencillas. Lo que nos lleva el siguiente punto.

5. Pruebas

¡Siempre prueba tu código! Una vez que sigues las mejores prácticas de React anteriormente mencionadas, tu código será más fácil de probar. Existen varios tipos de pruebas que puedes realizar en una aplicación React, por ejemplo:

Pruebas unitarias

Jest es el framework de pruebas unitarias más popular para Javascript, Mocha es otro, sin importar cual prefieras, realiza pruebas unitarias, son la forma más básica de probar tu código.

Pruebas de componente

Todo en React es un componente. Tus componentes son unidades reutilizables individuables que pueden ser probadas eficientemente. Este tipo de pruebas son cruciales en React.

La librería de pruebas de React creada por Kent C. Dodds es una solución ligera para probar componentes. Proporciona utilerías de prueba para el DOM de React que fomenta las mejores prácticas al probar. Échale un ojo, si aun no lo has hecho.

Pruebas End to End (E2E)

Este tipo de pruebas son simplemente probar la aplicación completa. Simula como un usuario navegará en la aplicación con una navegador. El framework más popular para realizar pruebas E2E es Cypress. Con Cypress puedes probar el frontend de tu aplicación de forma automatizada.

Conclusión

Las prácticas mencionadas en este artículo son algunas de las consideramos más importantes al momento de crear una aplicación en React y que hemos encontrado como más usadas en la industria, por supuesto, esto puede cambiar en cualquier momento y lo mejor es siempre estar actualizado con respecto a las mejores prácticas de Stack de tecnología que uses.

Déjanos tus comentarios, queremos saber tu opinión y si te pareció interesante el artículo, por favor, compártelo.