10 buenas prácticas en React

Para trabajar en React es importante mantener unas buenas prácticas.

De esta manera podrás tener un código organizado. En este artículo os dejamos varías buenas prácticas para mejorar la calidad de vuestro trabajo en React. 

1. Organizar la estructura de directorios

En React, no hay un patrón particular para organizar la estructura de carpetas. Pero siempre es mejor organizar la estructura de tu directorio. Puedes estructurar de tal manera que los componentes del contenedor estén presentes en un directorio, los componentes reutilizables en otro, etc., etc., o puedes estructurarlos en función del nombre de los componentes. Esta decisión depende totalmente de tu comodidad. Hay varias formas de organizarse. Busca en Google y elige el enfoque que creas que será más fácil de entender y leer.

2. Mantén tus componentes compactos

Siempre es una buena práctica mantener los componentes pequeños y asegurarse de que los componentes estén construidos de tal manera que sea responsable de alguna funcionalidad. Si hay un fragmento de código que crees que es irrelevante en ese componente y se puede dividir en varios componentes. Puedes dividir el código en varios componentes y luego combinarlos para lograr el mismo resultado que tenías antes. Algunas de las principales ventajas de mantener los componentes pequeños son:

• Reutilización: es más fácil reutilizar el código en varios otros componentes.
• Mantenimiento: los componentes más grandes son difíciles de mantener en comparación con los más pequeños.

3. Nombra los componentes sabiamente

Siempre es una buena práctica nombrar los componentes en función de lo que hace el componente, ya que es más fácil de leer y comprender. Elige un nombre de tal manera que otros desarrolladores puedan reconocer fácilmente lo que hace el componente con solo leer el nombre. Asegúrate de poner siempre en mayúscula los componentes, de lo contrario, se consideraría un elemento HTML normal.

4. No Te Repitas

Esta es una regla común para los programadores, donde siempre es una mejor práctica no volver a escribir tu propio código en otra parte del proyecto. Hay varios problemas que surgen con el código redundante. En primer lugar, el código definitivamente se volverá lento. Además, si tuvieras que hacer algún cambio, tendrás que cambiar en todos los lugares donde se ha repetido, y si te olvidas de modificar en cualquier lugar, se producirán problemas. Cuando la aplicación crezca, puede convertirse en un dolor de cabeza. Por lo tanto, siempre es mejor escribir código común separado en esos escenarios. En React, puedes crear componentes comunes, de modo que pueda reutilizarse en cualquier lugar del proyecto. Una de las formas de lograr este principio en todos los componentes es utilizar el concepto de componente de orden superior.

5. Organiza tu estado

Siempre debes distinguir entre el estado que necesitas tener como estado global y el estado del componente. No querrás encontrarte con una situación en la que pases el estado como accesorios a otros componentes innecesariamente. Tendrás que analizar tu solicitud y tomar esta decisión. Además, asegúrate de utilizar el contexto siempre que sea necesario.

6. Escribe CSS en un archivo JavaScript

Siempre que inicies un proyecto, generalmente escribimos CSS en un archivo .css o .scss separado. Pero, cuando el proyecto crece, este enfoque no es factible. Por lo tanto, siempre es mejor usar bibliotecas que te ayuden a escribir CSS en JS.

7. Lógica de representación y lógica de estado independientes

Mantén tu lógica de carga de datos con estado separada de su lógica de renderizado. Es mejor tener un componente con estado para cargar los datos y otro componente sin estado para mostrar esos datos. Esto reduce la complejidad de los componentes. Por ejemplo, si tu aplicación está obteniendo algunos datos, podemos administrar los datos en el componente principal y pasar la lógica de representación a un subcomponente pasando los datos obtenidos como accesorios. De esta manera, el código se ve ordenado y fácilmente comprensible.

8. Utiliza PropTypes (o TypeScript) para la verificación de tipos

PropTypes es una forma de verificación de tipos utilizada en React. Sin PropTypes o alguna forma de verificación de tipos, corremos el riesgo de pasar un tipo de datos incorrecto a un componente, lo que podría causar algún comportamiento inesperado en la aplicación. Por lo tanto, al usar PropTypes o TypeScript, puedes evitar fallos inesperados en su aplicación.

9. Utiliza herramientas de linting

ESLint es una de las herramientas de linting más populares que se pueden utilizar en una aplicación React. Será necesario para proporcionar un patrón de código coherente y reducir los errores de sintaxis. También puedes agregar ganchos de Git para que el código no se confirme a menos que el código esté libre de errores. Esto es muy útil cuando estás trabajando en un proyecto junto con algunos otros miembros.

10. Escribe casos de prueba

Por último, pero no menos importante, prueba tu código. Una vez que sigas las anteriores prácticas en React, tu código debería ser fácil de probar. Hay diferentes tipos de pruebas que puedes hacer en React. Algunos populares son:

Examen de la unidad

La prueba unitaria es la forma más básica de prueba. Como sugiere el nombre, te permite probar las unidades más pequeñas del código. Jest es el marco de prueba más popular para escribir pruebas unitarias.

Prueba de componentes

Los componentes de React son unidades individuales reutilizables que se pueden probar de manera eficiente. Esta forma de prueba es muy crucial en React, ya que podemos probar las interacciones con DOM.

Prueba de extremo a extremo

Esto básicamente significa probar la aplicación como un todo. Simula cómo un usuario hará clic en la aplicación y la probará en un navegador. El marco más popular y fácil de usar para las pruebas de extremo a extremo de JavaScript (o cualquier cosa que se ejecute en un navegador) es Cypress.