15 Reagire alle migliori pratiche che devi seguire nel 2020

Reagire alle migliori pratiche


Se sei uno sviluppatore frontend impegnato nella creazione di interfacce utente altamente interattive, molto probabilmente hai React nel tuo toolkit. Mentre lavori sulle tue creazioni basate su React, dovresti fare attenzione a fare le cose in sintonia con le migliori pratiche di React. Ciò contribuirà a organizzare meglio il codice.

Come sai, React è una libreria creata da Facebook e consente l’integrazione con molti componenti interessanti. In effetti, qualsiasi sviluppatore può creare i propri componenti e renderli accessibili alla comunità.

Oggi, affrontiamo l’argomento e ti mostriamo la più fondamentale delle migliori pratiche di React:

�� 1. Mantenere i componenti piccoli e specifici per ogni funzione

Come tutti sappiamo, con React è possibile avere componenti enormi che eseguono una serie di attività. Ma un modo migliore per progettare i componenti è mantenerli piccoli, in modo che un componente corrisponda a una funzione. Idealmente, un singolo componente dovrebbe eseguire il rendering di un bit specifico della pagina o modificare un comportamento particolare. Ci sono molti vantaggi in questo:

  • I componenti specifici delle funzioni possono essere autonomi, il che semplifica i test e la manutenzione.
  • Ogni piccolo componente può essere riutilizzato su più progetti.
  • I componenti che eseguono funzioni generali possono essere resi disponibili alla comunità.
  • Con componenti più piccoli, è più semplice implementare ottimizzazioni delle prestazioni.
  • È più semplice aggiornare i componenti più piccoli.
  • I componenti più grandi devono essere più duri e possono essere difficili da mantenere.

L’equilibrio tra la creazione di un componente conciso e la creazione di più componenti specifici per funzione può variare da un’organizzazione all’altra. Dopotutto, puoi avere tutti i componenti che desideri e ricombinarli in qualsiasi modo tu voglia ottenere lo stesso risultato finale.

♻️ 2. La riusabilità è importante, quindi mantenere la creazione di nuovi componenti al minimo richiesto

Attenendosi alla regola di una funzione = un componente, è possibile migliorare la riusabilità dei componenti. Ciò significa che dovresti saltare il tentativo di creare un nuovo componente per una funzione se esiste già un componente per quella funzione.

Riutilizzando i componenti in tutto il progetto o in qualsiasi numero di progetti, non solo otterrai coerenza, ma contribuirai anche alla community.

D’altra parte, se qualsiasi componente diventa enorme, ingombrante e difficile da mantenere, è meglio suddividerlo in tutti i componenti più piccoli necessari.

Ad esempio, puoi anche andare oltre e creare un componente Button in grado di gestire le icone. Quindi, ogni volta che hai bisogno di un pulsante, avrai un componente da utilizzare. Renderlo più modulare ti permetterà di coprire molti casi con lo stesso codice. Devi mirare da qualche parte nel mezzo. I componenti dovrebbero essere abbastanza astratti, ma non dovrebbero essere eccessivamente complessi.

class IconButton estende React.Component {
[…]
render () {
ritorno (

);
}
}

�� 3. Consolidare il codice duplicato – ASCIUGARE il codice

Una regola comune per tutto il codice è di mantenerlo il più breve e conciso possibile.

Anche qui non è diverso, poiché le migliori pratiche di React ti istruiscono anche per mantenere il codice breve e preciso. Un modo per farlo è evitare la duplicazione: non ripetere te stesso (DRY).

È possibile ottenere questo risultato esaminando il codice per motivi e somiglianze. Se ne trovi, è possibile che tu stia ripetendo il codice e c’è spazio per eliminare la duplicazione. Molto probabilmente, un po ‘di riscrittura può renderlo più conciso.

Ciò si basa fortemente sul principio di riusabilità in React. Supponiamo che tu voglia aggiungere più pulsanti che contengono icone, invece di aggiungere il markup per ogni pulsante, puoi semplicemente utilizzare il componente IconButton che abbiamo mostrato sopra. Potresti anche andare oltre mappando tutto in un array.

const pulsanti = [‘facebook’, ‘twitter’, ‘youtube’];

ritorno (

{
buttons.map ((button) => {
ritorno (

);
})
}

);

�� 4. Inserisci CSS in JavaScript

Quando inizi a lavorare su un progetto, è pratica comune mantenere tutti gli stili CSS in un singolo file SCSS. L’uso di un prefisso globale impedisce possibili collisioni di nomi. Tuttavia, quando il progetto si ingrandisce, questa soluzione potrebbe non essere fattibile.

Esistono molte librerie che ti consentono di scrivere CSS in JS. EmotionJS e Affascinante sono i due CSS più popolari nelle librerie JS.

Ecco un esempio dell’utilizzo di EmotionJS nel tuo progetto. EmotionJS può generare file CSS completi per la tua produzione. Innanzitutto, installa EmotionJS usando npm.

npm install –save @ emotion / core

Successivamente, devi importare EmotionJS nella tua applicazione.

importare {jsx} da “@ emotion / core”

Puoi impostare le proprietà di un elemento come mostrato nello snippet di seguito:

lascia Component = props => {
ritorno (

)
}

Ecco il link al completo documentazione di EmotionJS.

�� 5. Commenta solo dove necessario

Allegare commenti al codice solo dove necessario. Questo non è solo in linea con le migliori pratiche di React, ma serve anche a due scopi contemporaneamente:

  • Manterrà il codice visivamente privo di ingombri.
  • Eviterai un potenziale conflitto tra commento e codice, se ti capita di modificare il codice in un secondo momento.

�� 6. Denominare il componente dopo la funzione

È una buona idea nominare un componente dopo la funzione che esegue in modo che sia facilmente riconoscibile.

Ad esempio, ProductTable: trasmette all’istante cosa fa il componente. D’altra parte, se si nomina il componente in base alla necessità del codice, può confonderti in un momento futuro.

Un altro esempio, è preferibile nominare un componente Avatar in modo che possa essere utilizzato ovunque – per autori, utenti o nei commenti. Invece, se nominiamo il componente AuthorAvatar nel contesto del suo utilizzo, limiteremmo l’utilità di quel componente.

Inoltre, nominare un componente dopo la funzione lo rende più utile per la comunità in quanto è più probabile che venga scoperto.

�� 7. Utilizzare le maiuscole per i nomi dei componenti

Se, come la maggior parte delle persone, stai utilizzando JSX (un’estensione JavaScript), i nomi dei componenti che crei devono iniziare con lettere maiuscole. Ad esempio, nominerai i componenti come SelectButton anziché selectbutton o Menu anziché Menu. Facciamo questo in modo che JSX possa identificarli in modo diverso dai tag HTML predefiniti.

Le versioni precedenti di React gestivano un elenco di tutti i nomi incorporati per differenziarli dai nomi personalizzati. Ma poiché l’elenco aveva bisogno di un costante aggiornamento, questo è stato demolito e le capitali sono diventate la norma.

Nel caso in cui JSX non sia la tua lingua preferita, puoi usare lettere minuscole. Tuttavia, ciò può ridurre la riusabilità dei componenti oltre il progetto.

�� 8. Prestare attenzione alle altre convenzioni di denominazione

Quando si lavora con React, generalmente si utilizzano file JSX (estensione JavaScript). Qualsiasi componente creato per React dovrebbe quindi essere nominato in maiuscolo o maiuscolo. Questo si traduce in nomi senza spazi e in maiuscolo la prima lettera di ogni parola.

Se si desidera creare una funzione che invia un modulo, è necessario denominarlo SubmitForm in maiuscolo, invece di submitForm, submit_form o submit_form. Il caso del cammello superiore è più comunemente chiamato caso Pascal. Ecco un ulteriore elenco di esempi di nomi di variabili e funzioni nel caso Pascal.

�� 9. Separare gli aspetti con stato dal rendering

I componenti in React possono essere con stato o apolidi. I componenti con stato memorizzano informazioni sullo stato del componente e forniscono il contesto necessario. Al contrario, i componenti senza stato non hanno memoria e non possono dare contesto ad altre parti dell’interfaccia utente. Ricevono solo oggetti di scena (input) dal componente genitore e restituiscono elementi JSX. Sono scalabili e riutilizzabili e simili alla pura funzione in JavaScript.

Una delle migliori pratiche di React è quella di mantenere la logica di caricamento dei dati con stato separata dalla logica di rendering senza stato. È meglio avere un componente con stato per caricare i dati e un altro componente senza stato per visualizzarli. Ciò riduce la complessità dei componenti.

Le versioni successive di React v16.8 hanno una nuova funzionalità: React Hooks, che scrivono componenti relativi alla funzione stateful. Ciò potrebbe eventualmente eliminare la necessità di componenti basati su classi.

Ad esempio, la tua app sta recuperando alcuni dati sul mount. Quello che vuoi fare è gestire i dati nel componente principale e passare l’attività di rendering complessa a un sottocomponente come oggetti di scena.

import RenderTable da ‘./RenderTable’;

La tabella di classe estende il componente {
state = {caricamento: vero};

render () {
const {caricamento, tableData} = this.state;
caricamento di ritorno? :;
}

componentDidMount () {
fetchTableData (). then (tableData => {
this.setState ({caricamento: false, tableData});
});
}
}

�� 10. Il codice deve essere eseguito come previsto ed essere testabile

Davvero, questa regola non ha bisogno di spiegazioni. Il codice che scrivi dovrebbe comportarsi come previsto ed essere facilmente e rapidamente testabile. È buona norma nominare i file di test identici ai file di origine con un suffisso .test. Sarà quindi facile trovare i file di test.

Puoi usare JEST per testare il tuo codice React.

�� 11. Tutti i file relativi a un singolo componente devono essere in una singola cartella

Conserva tutti i file relativi a un singolo componente in una singola cartella, inclusi i file di stile.

Se esiste un componente di piccole dimensioni utilizzato solo da un componente specifico, ha senso tenere tutti questi componenti più piccoli tutti insieme nella cartella di quel componente. La gerarchia sarà quindi facile da capire: i componenti di grandi dimensioni hanno una propria cartella e tutte le loro parti più piccole sono divise in sottocartelle. In questo modo, puoi facilmente estrarre il codice in qualsiasi altro progetto o persino modificarlo ogni volta che vuoi.

Ad esempio, per il componente Modulo, tutti i pezzi come file CSS, icone, immagini, test e qualsiasi altro componente secondario relativo al modulo devono risiedere tutti nella stessa cartella. Se assegni un nome ragionevole ai file e mantieni insieme i file correlati logicamente, non avrai alcuna difficoltà a trovarli in seguito.

�� 12. Utilizzare strumenti come Bit

Una delle migliori pratiche di React che aiuta a organizzare tutti i componenti di React è l’uso di strumenti come Po.

Questi strumenti aiutano a mantenere e riutilizzare il codice. Oltre a ciò, aiuta il codice a diventare rilevabile e promuove la collaborazione del team nella costruzione di componenti. Inoltre, il codice può essere sincronizzato tra i progetti.

�� 13. Utilizzare le librerie di frammenti

Gli snippet di codice ti aiutano a tenere il passo con la sintassi migliore e più recente. Aiutano anche a mantenere il codice relativamente privo di bug, quindi questa è una delle migliori pratiche di React da non perdere.

Esistono molte librerie di snippet che puoi utilizzare, come ES7 React, Redux, JS Snippet, ecc..

✍️ 14. Scrivere test per tutto il codice

In qualsiasi linguaggio di programmazione, test adeguati assicurano che qualsiasi nuovo codice aggiunto al progetto si integri bene con il codice esistente e non interrompa la funzionalità esistente. È una buona idea scrivere test per qualsiasi nuovo componente creato. Come buona pratica, dovresti creare una directory __Test__ all’interno della directory del tuo componente per ospitare tutti i test pertinenti.

Puoi dividere ampiamente i test in React in due parti: testare la funzionalità dei componenti usando un’app React e test sull’applicazione completa una volta eseguito il rendering nel browser. È possibile utilizzare gli strumenti di test tra browser per i test in quest’ultima categoria.

Per il primo, è possibile utilizzare un test runner JavaScript, Scherzare per emulare il DOM HTML utilizzando jsdom per testare i componenti di React. Mentre un test completamente accurato è possibile solo in un browser su un dispositivo reale, Jest fornisce una buona approssimazione dell’ambiente di test reale durante la fase di sviluppo del progetto.

�� 15. Seguire le regole di sfilacciatura, spezzare le linee troppo lunghe

La lanugine è un processo in cui eseguiamo un programma che analizza il codice per potenziali errori.

Principalmente, lo usiamo per problemi relativi alla lingua. Ma può anche risolvere molti altri problemi automaticamente, in particolare lo stile del codice. L’uso di una linter nel codice React aiuta a mantenere il codice relativamente privo di errori e di errori.

Parole finali sulle migliori pratiche di React

Spero che questo elenco delle migliori pratiche di React possa aiutarti a mettere i tuoi progetti sulla strada giusta ed evitare eventuali problemi in futuro..

Se hai domande relative a React, sentiti libero di inviarle nei commenti qui sotto.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Esempi di codice di Andrei Băicuș. Aggiornamenti dei contenuti di Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map