10 mejores prácticas de ReactJS para un buen proyecto de React

React es una biblioteca JavaScript de código abierto que se utiliza para crear interfaces de usuario (IU). Es el futuro de la creación web con su versatilidad y facilidad adicionales. Desde el lanzamiento de React en 2013, ha ganado tanta popularidad que el recuento actual de la comunidad React ha aumentado a 56162. El recuento de industrias que ya ha adoptado React ha llegado a 8787 , algunas de ellas son Uber, Airbnb, WhatsApp, Twitter, BBC, Netflix y Reddit. Sigue la arquitectura MVC (Model View Controller) . En términos simples, React permite a los desarrolladores crear interfaces de usuario complejas a partir de un código pequeño y aislado conocido como «componentes».

Para saber más, lee más!!!

¿Por qué reaccionar?

 Está de moda y en el mundo de las tecnologías front-end, es universalmente aceptado y conocido.

• Sigue la arquitectura basada en componentes.
• Virtual DOM actualizará solo las cosas que han cambiado.
• Flujo de datos unidireccional (enlace de datos unidireccional).
• IU declarativa.
• Reutilización de código.

React es el futuro y construir un buen proyecto React es fácil si conoce algunas prácticas sorprendentes. En este blog, discutiremos las 10 mejores prácticas que todo desarrollador debe seguir para construir un buen proyecto React. Entonces empecemos. 

1. Estructura de la aplicación (diseño de carpetas)

Cuando crea una aplicación básica, se ingresa el comando » npx create-react-app filename » y puede ver cómo se organizan las carpetas y los archivos. Cuando tiene que implementar una nueva aplicación, se deben agregar varios archivos que deben estar en orden. Por ejemplo, si está creando un sitio web de comercio electrónico, todos los componentes de la barra de navegación deben colocarse en una carpeta y deben darse los nombres adecuados. El encabezado, la parte central y el pie de página deben colocarse en la serialización para no crear un desorden. Colocar todas las carpetas en orden ayuda a no crear confusión y también los compañeros desarrolladores tendrán una idea del flujo del código. Además, todo el código se ve ordenado una vez colocado en orden. 

2. Agregar un archivo CSS

El archivo de hoja de estilo en cascada (CSS) cuando se agrega a la aplicación aporta atractivo a su trabajo y, en breve, a la aplicación. Usando diferentes funciones de CSS, también podemos agregar color, tamaño de fuente y alineación al texto y al fondo. React te permite agregar CSS en línea y externo. Todo, incluido el menú desplegable, la barra de navegación y el pie de página, se puede diseñar con CSS . Una vez que edite los cambios en el archivo CSS, importe los archivos donde sea necesario usando el comando » import ‘./App.css’ » . 

3. Componentes funcionales/de clase

¿Debo usar el componente funcional o de clase? Conozca la diferencia entre ambos y cuándo usar cada uno. En los componentes de clase, se llama al método render cada vez que cambia el estado de los componentes. Por el contrario, los componentes funcionales representan la interfaz de usuario en función de los accesorios . Los componentes de clase deben preferirse siempre que haya un requisito con el estado del componente. En base a esto, debemos saber cuándo usar cada uno de ellos. Lea sobre las diferencias entre los componentes funcionales y los componentes de clase en React

4 Usar operadores ternarios

El uso del operador ternario reducirá la complejidad. En lugar de escribir un número n de líneas de código para una condición usando una declaración if-else, una condición podría verificarse dentro de una línea. Por lo tanto, ayuda a revisar fácilmente. En definitiva, hace que la aplicación sea menos voluminosa y compacta. 

5. Importar en Orden

Importación de bibliotecas y archivos para mejorar la legibilidad. Cuando se requiere importar ciertos archivos en un archivo, deben estar en orden. La regla debería ser así:

• Incorporado
• Externo
• Interno

Inicialmente, se importan todas las bibliotecas integradas que se utilizan durante la implementación de la tarea. Entonces los archivos externos están fuera de la carpeta. Por último, se importan todos los archivos que se encuentran dentro de la carpeta. Si se sigue este orden, se aporta limpieza al código.

6. Uso de Hooks en Componentes Funcionales

Los ganchos son aquellas funciones que le permiten «engancharse» a las características de estado y ciclo de vida de React desde los componentes de la función. Le permite usar el estado y otras características de React, como métodos de ciclo de vida, sin escribir una clase”. Los ganchos siempre le permiten usar funciones en lugar de tener que cambiar constantemente entre funciones, clases, componentes de orden superior y accesorios de representación. Reduce la complejidad de administrar los componentes en clase de los estados. Así que siempre prefiera componentes funcionales con ganchos de reacción como useEffect(), useState(), etc.

7. Usa Alt Prop

Incluya siempre una propiedad alt en su etiqueta de imagen (<img>). Describe la imagen y especifica el texto alternativo para una imagen si la imagen no se puede mostrar. La razón para agregar una etiqueta alt es que cuando hay una conexión a Internet lenta, la imagen no se descarga, por lo que si tenemos una etiqueta alt, los espectadores pueden tener una idea de qué se trata la imagen. 

8. Denominación de componentes

Para crear la diferencia, si usa Pascal-Case para componentes, use CamelCase para instancias. Los componentes se refieren al nombre de archivo que debe nombrarse en PascalCase (por ejemplo: si el nombre de archivo es control_key, el nombre debe ser ControlKey). Describe de qué está hablando el código en el archivo. Las instancias que se utilizarán en el código deben seguir a camelCase (por ejemplo: si el nombre de la instancia es un elemento de reserva, el nombre debe ser elemento de reserva). Siga el patrón para ser claro.

9. Uso de dependencias y dependencias de desarrollo

¡Comprenda la diferencia entre dependencias y dependencias de desarrollo! Los módulos que solo se requieren durante el desarrollo son dependencias de desarrollo, mientras que los que se requieren en tiempo de ejecución son dependencias. El archivo package.json contiene todas las dependencias en las que funcionará el proyecto de reacción. El comando » npm install <package-name> –save-dev » guarda todos los paquetes. Para conocer la diferencia entre dependencias y dependencias de desarrollo, lea acerca de la diferencia entre dependencias, dependencias de desarrollo y dependencias de pares.

10. Siga el código SECO

Para evitar el código duplicado, cree un componente común usando la función para realizar las tareas repetitivas para seguir la estructura de código DRY (Don’t Repeat Yourself) . Por ejemplo, cuando necesita implementar varias tareas en una pantalla, puede crear un componente común y usarlo en lugar de escribir una y otra vez para cada botón. Es más fácil mantener una copia que mantener múltiples copias.