Come aggiungere un file Costanti al tuo progetto React

Mentre ho realizzato progetti React nelle ultime settimane, ho iniziato a passare dal creare codice che funziona semplicemente focalizzandomi su come posso rendere la struttura del mio progetto più pulita e comprensibile possibile.

Oltre alle semplici cose come nominare le variabili nel modo più chiaro possibile, qualcosa che ho fatto di recente per ripulire ogni componente è spostare tutte le mie costanti nella loro sezione del progetto.

Perché preoccuparsi?

Diamo un'occhiata a come appariva uno dei miei elementi prima delle mie modifiche:

... contro ora:

Penso che vada oltre il dire che l'opzione # 2 è molto più facile da leggere e che il codice presente consente agli utenti che stanno cercando di capire cosa sta succedendo di concentrarsi su ciò che viene effettivamente fatto all'interno del ciclo di vita di quel componente specifico come al contrario di cercare di dare un senso alle costanti che sono definite.

L'installazione qui è davvero molto semplice. Per iniziare, ho creato una nuova cartella in src / chiamata "costanti" per contenere tutte le costanti che utilizzo all'interno di tutti i miei componenti. All'interno di quella cartella creo semplicemente un file /src/constants/index.js per memorizzare tutti i miei componenti, quindi aggiungo prima ognuno con "export" in modo che ogni costante sia disponibile per essere importata altrove in questo modo:

export const DJISYMBOL = "& symbol = DJI"

Per la mia sanità mentale, allora darò un'occhiata e vedrò quali costanti ho usato più volte nel mio progetto. Non c'è motivo di averli definiti due volte, quindi posso effettivamente ridurre il mio codice in modo abbastanza significativo su scala, dovendo solo definirli una volta qui.

Dopo aver ottenuto tutte le mie costanti definite in modo univoco in index.js, vado avanti e divido ulteriormente ogni lotto di costanti in modo da poter capire chiaramente quale componente sta usando quale componente. Ciò ovviamente pone alcuni problemi minori quando si tratta di chiarire quando un componente viene utilizzato due volte, ma è abbastanza facile aggiungere una piccola nota qui per chiarirlo.

Ecco cosa ho a questo punto:

Noterai subito che nel caso sopra, in realtà ho due costanti che hanno lo stesso valore ma sono denominate diversamente. L'ho fatto perché ho sentito che quando chiamo "Constant.NEWACCOUNTURL" sulla mia pagina di registrazione, è più chiaro da leggere quando si crea un nuovo account invece di "Constant.EXISTINGACCOUNTURL" quando contestualmente stiamo effettivamente creando un nuovo account.

Un altro modo per risolvere questo sarebbe scrivere qualcosa del tipo:

importare {EXISTINGACCOUNTURL come NEWACCOUNTURL} da './constants'

... per creare un alias per la tua prima costante quando lo importi. A ciascuno il suo, ma in realtà preferisco importare tutte le mie costanti in una volta invece in questo modo:

import * come Costanti da './constants'

... potrebbe essere un po 'meno efficiente in quanto importa alcune costanti che potrei non utilizzare nel componente, ma mi piace avere il mio codice letto come Costanti. [CONSTANTNAME] nel mio componente, quindi è chiaro dove sto ottenendo le mie costanti da se un utente trascura la mia importazione nella parte superiore del file componente.

Indipendentemente da come ti piace importare le costanti nei tuoi componenti, puoi effettivamente rendere le cose ancora più semplici. Tutto quello che devi fare è prendere ogni sezione delle tue costanti che si trovano attualmente in index.js e inserirle nel loro nuovo file in / src / constants e collegarle al nostro file constants / index.js per un facile riferimento.

Quindi, per esempio, avevo quattro costanti sopra per il mio componente "Matcher". Posso effettivamente estrarli da index.js e creare un nuovo file su src / constants / matcher.js ed esportare le mie costanti da lì:

//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')

Quindi tutto ciò che devo fare nel mio file index.js è sostituire il codice che ho appena spostato in matcher.js nel seguente:

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

Una volta completato, ho ancora le stesse funzionalità che avevo in precedenza, ma posso capire più chiaramente la struttura del mio progetto semplicemente guardando il mio file delle costanti per ogni componente. Inoltre, posso ancora fare riferimento a tutto allo stesso modo di prima con una semplice importazione * come Costanti, oppure potrei anche fare qualcosa del tipo:

importare {POSTURL} da 'costanti / matcher';

... se preferissi chiamare semplicemente una singola costante che era stata precedentemente definita.

Rompere le costanti è un modo straordinario per rendere il tuo progetto più chiaro a coloro che leggono il tuo codice, riducendo contemporaneamente la ripetizione non necessaria delle costanti da un componente all'altro. È stato estremamente utile per me e consiglio vivamente a tutti di aggiungerlo al più presto ai loro progetti se non lo hanno già incluso.

Fammi sapere nei commenti qui sotto come stai strutturando le tue costanti. Esistono diversi modi per farlo che differiscono dalla mia strategia di cui sopra e mi piacerebbe sentirti!

Ulteriori letture:

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