7 mejores prácticas de React que todo desarrollador web debe seguir

React …la librería más popular de Javascriptpara la construcción de interfaces de usuario. Para los desarrolladores, esta biblioteca es una de las bibliotecas favoritas para crear cualquier tipo de aplicación hermosa. Aprender React puede ser fácil para ti. Empiezas a usar React y empiezas a desarrollar una aplicación. Usted crea un componente para construir algunas funciones y luego otro para alguna otra función. Cuando su aplicación comienza a crecer, agrega algunas líneas en el componente existente o simplemente crea un componente más. Esto continúa y si no presta atención a estos componentes o los códigos que ha escrito, puede terminar con una gran cantidad de código desordenado en su aplicación. Encontrará que algunos códigos son redundantes, algunos componentes no son reutilizables, algunos componentes tienen demasiadas líneas de código y muchos problemas. Más tarde será difícil mantener el proyecto. 

Bueno, React es fácil de aprender, pero si no sigue algunas de las mejores prácticas, lo hará y seguirá como en el escenario anterior. También será difícil para otro desarrollador trabajar en la misma aplicación. En este blog, analicemos algunos consejos y mejores prácticas para escribir mejor código React en su aplicación. 
 

1. Organización de archivos

La mayoría de los principiantes cometen errores al organizar el archivo correctamente en la aplicación React. Una estructura adecuada de carpetas y archivos no solo es importante en la aplicación React sino también en otras aplicaciones. Ayuda a comprender el flujo del proyecto y agregar otras características en la aplicación. La estructura de archivos de create-react-app es una forma posible de organizar los archivos, pero cuando las aplicaciones crecen rápidamente, se vuelve una tarea un poco difícil. 

Cree una carpeta de activos para mantener sus archivos CSS, imágenes y fuentes de nivel superior. Puede crear una carpeta de ayuda para colocar otros archivos para cualquier tipo de archivo para funcionalidades. Mantenga una carpeta para guardar todos los componentes de su proyecto React. Además, mantenga la subcarpeta para componentes menores utilizada por cualquier componente grande. Será más fácil comprender la jerarquía de archivos si mantiene los componentes grandes en su propia carpeta y los componentes pequeños que utilizan los componentes en una subcarpeta. 

En React, index.js es el principal punto de entrada utilizado por los desarrolladores, pero se vuelve difícil navegar una vez que tiene varios archivos, todos llamados index.js . En esta situación, puede agregar un archivo package.json a cada una de las carpetas de sus componentes y puede establecer el punto de entrada principal para esta carpeta correspondiente. No es una buena práctica agregar el archivo pacjkage.json en cada carpeta, pero será fácil manejar los archivos. 

Ejemplo:  un componente Tags.js se puede declarar como un punto de entrada como el código que se proporciona a continuación… 
 

{
"main": 'Tags.js'
}

2. Mantenga sus componentes pequeños

React funciona según el principio de reutilización de los componentes. Intente mantener y escribir componentes más pequeños en lugar de poner todo en un solo componente masivo. Los componentes de tamaño pequeño son fáciles de leer, fáciles de actualizar, fáciles de depurar, mantener y reutilizar. Ahora la pregunta es qué tan grande debe ser un componente. Eche un vistazo a su método de renderizado. Si tiene más de 10 líneas, su componente probablemente sea demasiado grande. Intente refactorizar el código y dividir los componentes en componentes más pequeños. En React, un componente solo debe ser responsable de una funcionalidad (principio de responsabilidad única). Puede crear componentes más pequeños y reutilizables si sigue este principio. De esta manera, todos pueden trabajar fácilmente en su aplicación. 
 

3. Usa componentes funcionales

Muchos principiantes se confunden acerca de si deben crear un componente de clase o un componente funcional. Si no está utilizando el método del ciclo de vida o el estado del componente, es eficiente escribir componentes funcionales. Los componentes funcionales son mucho más fáciles de leer y probar porque son funciones simples de JavaScript sin ganchos de estado o de ciclo de vida. Algunas de las ventajas son las siguientes:

• Menos líneas de código y mejor rendimiento
• Más fácil de leer, fácil de entender y fácil de probar.
• No es necesario usar ‘este’ enlace.
• Más fácil de extraer componentes más pequeños.

Componente de clase 
 

import React, { Component } from 'react';
 
class Button extends Component {
  render() {
    const { children, color, onClick } = this.props;
    return (
      <button onClick={onClick} className={`Btn ${color}`}>
        {children}
      </button>
    );
  }
}
 
export default Button;

componente funcional 
 

import React from 'react';
 
export default function Button({ children, color, onClick }) {
  return (
    <button onClick={onClick} className={`Btn ${color}`}>
      {children}
    </button>
  );
}

Hay un problema con el componente funcional, es decir, los desarrolladores no tienen control sobre el proceso de renderizado. Cuando algo cambia, React volverá a renderizar el componente funcional incluso si el componente cambia. En la versión anterior, la solución era componente puro . PureComponent permite accesorios poco profundos y comparación de estado, lo que significa que React «prueba» si el contenido del componente, los accesorios o el componente en sí ha cambiado. El Componente se volverá a renderizar cuando cambien los accesorios o el contenido del componente o el propio componente. De lo contrario, omitirá volver a renderizar y reutilizará el último resultado renderizado en su lugar. 

El problema anterior se resolvió cuando se introdujo una nueva característica con el lanzamiento de React v16.6.0. Memo realiza una comparación de accesorios superficial con el componente funcional. Comprueba si el contenido del componente, los accesorios o el propio componente han cambiado. En función de la comparación, reaccionar reutilizará el último resultado renderizado o volverá a renderizar. Memo permitió a los desarrolladores crear componentes funcionales «puros» y eliminó el uso de componentes con estado o componentes puros.
 

4. No use índices como apoyo clave

Muchos desarrolladores usan el índice como un valor para un accesorio clave. Es necesario agregar una propiedad clave al elemento cuando crea una array de elementos JSX. Esto se hace comúnmente cuando usa un mapa() o algún otro iterador o bucle. Esta es otra mala práctica en React. React usa la propiedad clave para rastrear cada elemento en la array y debido a la naturaleza colapsante de una array. Esto puede resultar fácilmente en que la información incorrecta se presente en el lugar equivocado. Esto es especialmente evidente cuando se recorren los componentes de clase con el estado. 
Los accesorios clave se utilizan para la identificación y determinan qué se debe renderizar o volver a renderizar. React no pierde tiempo renderizando duplicados. Entonces, cuando tiene dos elementos con las mismas teclas, React los ve como iguales y esto puede causar que se eliminen algunos elementos.
 

5. No use accesorios en estado inicial

Usar accesorios en el estado inicial es otra mala práctica en React. ¿Por qué? porque el constructor se llama solo una vez, en el momento en que se crea el componente. La próxima vez que realice algún cambio en los accesorios, el estado del componente seguirá siendo el mismo que el valor anterior y no se actualizará. Estos problemas se pueden solucionar utilizando el método de ciclo de vida de reacción componentDidUpdate . Este método le permite actualizar el componente cuando cambian los accesorios. Tenga en cuenta que este método no se invocará en el renderizado inicial, así que asegúrese de inicializar el estado del componente con los valores necesarios probablemente obtenidos de los accesorios. Después de eso, use este método para actualizar esos valores y el componente, según lo necesite.
 

6. Inicializar estado de componente sin constructor de clase

La mayoría de los desarrolladores inicializan el estado del componente con el constructor de clase, que es muy común en React. No es una mala práctica, pero aumenta la redundancia en su código y crea algunos problemas de rendimiento. Cuando inicializa el estado en el constructor, debe recordar los accesorios y debe llamar a super con accesorios. También aumenta la cantidad de líneas en su código y crea un problema de rendimiento. Puede inicializar el estado con campos de clase en lugar de inicializar el estado en el constructor. Esta práctica en React te ayuda a reducir el ruido en tu código. Eche un vistazo al código que se proporciona a continuación y compare ambos. 
 

Estado Inicializar en Constructor 
 

// Import React library
import React from 'react'
// Create React component
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    // Initialize component State
    this.state = {
      count: 0
    }
  }
  ...
}

Estado Inicializar con campo de clase 
 

// Import React library
import React from 'react'
// Create React component
class MyComponent extends React.Component {
  // Initialize component State
  state = {
    count: 0
  }
  ...
}

7. Reduzca el uso de componentes con estado

Como sugiere el nombre, el componente con estado almacena la información de estado del componente y proporciona el contexto necesario. Por otro lado, los componentes sin estado no tienen memoria y no proporcionan ningún contexto. Los componentes sin estado requieren menos código para ejecutarse que los componentes con estado. Esto aumenta el rendimiento de la aplicación. Por lo tanto, reducir el uso de componentes con estado en React es una de las mejores prácticas a seguir. 

Con el lanzamiento de React 16.8.0, se introdujo una nueva característica ‘ React Hooks ‘. Esta función ayuda a escribir componentes funcionales con estado y elimina el uso de componentes de clase. Esta nueva característica es realmente útil cuando el proyecto crece. Anteriormente solo teníamos una opción en React para usar el método de estado y ciclo de vida, es decir, escribir componentes con estado. Los ganchos cambiaron esto y ahora los desarrolladores ya no están limitados a los componentes con estado porque necesitaban usar el estado.