Cómo agregar un archivo de constantes a su proyecto React

Como he estado construyendo proyectos de React en las últimas semanas, he comenzado a hacer la transición de crear código que simplemente funcione para centrarme en cómo puedo hacer que la estructura de mi proyecto sea lo más limpia y comprensible posible.

Más allá de cosas básicas como nombrar variables lo más claramente posible, algo que he estado haciendo recientemente para limpiar cada componente es cambiar todas mis constantes a su propia sección del proyecto.

¿Por qué molestarse?

Echemos un vistazo a cómo se veía uno de mis elementos antes de mis cambios:

... versus ahora:

Creo que va más allá de decir que la opción n. ° 2 es mucho más fácil de leer y que el código que está presente permite a los usuarios que intentan comprender lo que está sucediendo enfocarse en lo que realmente se está haciendo dentro del ciclo de vida de ese componente específico. en lugar de intentar dar sentido a las constantes que se definen.

La configuración aquí es realmente muy sencilla. Para comenzar, he creado una nueva carpeta dentro de src / llamada "constantes" para contener todas las constantes que uso en todos mis componentes. Dentro de esa carpeta, simplemente creo un archivo /src/constants/index.js para almacenar todos mis componentes, y luego agrego cada uno con "exportar" de antemano para que cada constante esté disponible para ser importada en otro lugar de la siguiente manera:

export const DJISYMBOL = "& symbol = DJI"

Por mi propia cordura, echaré un vistazo y veré qué constantes he usado varias veces en mi proyecto. No hay ninguna razón para que se definan dos veces, por lo que en realidad puedo reducir mi código de manera bastante significativa a escala solo teniendo que definirlos una vez aquí.

Una vez que tengo todas mis constantes definidas de forma única en index.js, sigo adelante y desgloso cada lote de constantes para que pueda entender claramente qué componente está usando qué componente. Obviamente, esto plantea algunos problemas menores cuando se trata de aclarar cuándo un componente se usa dos veces, pero es bastante fácil agregar una pequeña nota aquí para aclarar eso.

Esto es lo que tengo en este momento:

Notarás de inmediato que en el caso anterior, en realidad tengo dos constantes que tienen el mismo valor pero que tienen nombres diferentes. Hice esto porque sentí que cuando llamo a "Constant.NEWACCOUNTURL" en mi página de registro, era más claro de leer al crear una nueva cuenta en lugar de "Constant.EXISTINGACCOUNTURL" cuando contextualmente estamos creando una nueva cuenta.

Otra forma de resolver esto sería escribir algo como:

importar {EXISTINGACCOUNTURL como NEWACCOUNTURL} desde './constants'

... para crear un alias para su primera constante cuando lo importe. A cada uno lo suyo, pero en realidad prefiero importar todas mis constantes de una vez así:

importar * como constantes desde './constants'

... podría ser un poco menos eficiente, ya que importa algunas constantes que quizás no termine de usar en el componente, pero me gusta que mi código se lea como Constantes. [CONSTANTNAME] en mi componente para que quede claro de dónde obtengo mis constantes desde si un usuario pasa por alto mi importación en la parte superior del archivo componente.

Independientemente de cómo quiera importar sus constantes a sus componentes, en realidad puede hacer las cosas aún más fáciles. Todo lo que tiene que hacer es tomar cada sección de sus constantes que están actualmente dentro de index.js y ponerlas dentro de su propio archivo nuevo en / src / constants y vincularlas a nuestro archivo de constantes / index.js para una fácil referencia.

Así, por ejemplo, tenía cuatro constantes anteriores para mi componente "Matcher". De hecho, puedo sacarlos de index.js y crear un nuevo archivo en src / constants / matcher.js y exportar mis constantes desde allí:

//matcher.js
export const POSTURL = "http: // localhost: 4000 / api / v1 / patterns"
export const DELETEURL = "http: // localhost: 4000 / api / v1 / patterns /"
export const DeleteButton = require ('../ images / delete-icon.png')
export const LoadingWheel = require ('../ images / loading-wheel.gif')

Entonces todo lo que tengo que hacer en mi archivo index.js es reemplazar el código que acabo de mover a matcher.js a lo siguiente:

//index.js
export * desde './matcher';

Una vez que esto se haya completado, todavía tengo la misma funcionalidad que tenía anteriormente, pero puedo entender más claramente la estructura de mi proyecto simplemente mirando a través de mi archivo de constantes para cada componente. Además, todavía puedo hacer referencia a todo de la misma manera que antes con una simple importación * como Constantes, o también podría hacer algo como:

importar {POSTURL} desde 'constantes / matcher';

... si prefería simplemente llamar a una sola constante que se había definido previamente.

Desglosar sus constantes es una forma increíble de hacer que su proyecto sea más claro para aquellos que leen su código, al tiempo que reduce la repetición innecesaria de constantes de componente a componente. Ha sido extremadamente útil para mí y recomiendo encarecidamente que todos lo agreguen a sus proyectos lo antes posible si aún no lo tienen incluido.

Déjame saber en los comentarios a continuación cómo estás estructurando tus constantes. Hay varias maneras diferentes de hacer esto que difieren de mi estrategia anterior, ¡y me encantaría saber de todos ustedes!

Otras lecturas:

  • https://medium.com/@z_callan/javascript-project-architecture-constants-deddfde3c8a8