W - I - Buenas prácticas en react

1.- Diseña componentes simples, reusables y de única responsabilidad

Antes de tirar código piensa qué necesidades funcionales debes suplir y divide el problema en múltiples responsabilidades. Luego, asocia dichas funciones al componente responsable. Cada componente debería estar empaquetado en una sola función y usar sus propios métodos para cumplir con su parte.

Ten en cuenta que tu componente será reusable a futuro, entonces desarróllalo entendible, intuitivo y fácil de evolucionar.

2.- Identifica similitudes, reescribe código y sé más conciso

No repitas código. Cuando el código va creciendo, gracias a nuevas funcionalidades, el programador debe identificar constantemente patrones que le permitan simplificar instrucciones.

3.- Estructura ordenadamente tus carpetas para que cualquiera entienda el proyecto

Trata de que todos los archivos relacionados a un componente estén en una misma carpeta, nombrada de manera entendible según su responsabilidad en el código.

Además, debes pensar en que tu proyecto debe estar listo para que cualquier desarrollador pueda entender la relación de los componentes, viendo la estructura de carpetas y asociándola con la interfaz del proyecto. Pensar en Atomic design (Sistemas de diseño: Diseño atómico) ayuda a estructurar los componentes de manera ordenada y jerárquica.

4.- Usa los React Hooks

Las últimas versiones de React (a partir de la React 16.8 Hooks: 90% código más conciso) incluyeron el concepto de los React Hooks, que facilitan el manejo organizado de estados dentro de los componentes. Estos también ayudan a diseñar componentes stateless basados en funciones, que, al ser súper eficientes, pueden llegar a reemplazar la necesidad de componentes statefull basados en clases.

5.- Ubica los estados, variables y funciones según el contexto

Como desarrollador, constantemente debes pensar en preguntas como: ¿de quién es la responsabilidad funcional? ¿Qué componente general orquesta los estados principales de la app? ¿mi código es auto explicativo y preciso para saber dónde está cada funcionalidad?

6.- Importa lo necesario y nombra adecuadamente los componentes

El performance y mantenibilidad del código dependen de las decisiones que se van tomando de desarrollo desde que se empieza a diseñar el código. Piensa lo mínimo que necesitas para que el componente desarrolle su función e importa solo lo que uses.

7.- Revisa y soluciona constantemente los warnings de la consola

Al correr tu proyecto local React muestra en consola, en tiempo de ejecución, advertencias o warnings mientras desarrollas tu código. Dichas advertencias no impiden que la aplicación siga ejecutándose, porque aún no son errores, pero son reflejo de que tu código es propenso a futuros errores.

Si no pasan desapercibidas para el desarrollador y constantemente se da solución a las advertencias, tendrás un código más limpio, profesional, con mejor performance y más mantenible.

8.- 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.