Reagisci alle best practice per migliorare il tuo gioco nel 2022

React è rimasta una delle librerie più popolari per la creazione di interfacce utente durante la creazione di applicazioni web. È ampiamente utilizzato da molte aziende e ha una comunità attiva.

In qualità di sviluppatore React, capire come funziona la libreria non è l'unica cosa di cui hai bisogno per creare progetti intuitivi, facilmente scalabili e gestibili.

È anche necessario comprendere alcune convenzioni che ti consentiranno di scrivere codice React pulito. Questo non solo ti aiuterà a servire meglio i tuoi utenti, ma renderà più facile per te e per gli altri sviluppatori che lavorano al progetto mantenere la base di codice. Stai lavorando al tuo prossimo progetto React? Imparare a scrivere codice React pulito è un muscolo rivoluzionario Inizia qui ️ Click to Tweet

In questo tutorial, inizieremo parlando di alcune delle sfide comuni che gli sviluppatori React devono affrontare, quindi ci immergeremo in alcune delle migliori pratiche che puoi seguire per aiutarti a scrivere il codice React in modo più efficiente.

Iniziamo!

Le sfide reagiscono agli sviluppatori

In questa sezione, discuteremo alcune delle principali sfide che gli sviluppatori di React devono affrontare durante e dopo la creazione di app Web.

Tutte le sfide che vedrai in questa sezione possono essere evitate seguendo le best practice, che discuteremo in dettaglio più avanti.

Inizieremo con il problema più basilare che colpisce i principianti.

Prerequisiti per reagire

Una delle maggiori sfide affrontate dagli sviluppatori di React è capire come funziona la libreria, insieme ai prerequisiti per utilizzarla.

Prima di imparare React, devi sapere un paio di cose. Poiché React utilizza JSX, conoscere HTML e JavaScript è un must. Naturalmente, dovresti anche conoscere i CSS o un moderno framework CSS per progettare le tue app web.

In particolare, ci sono concetti e funzionalità fondamentali di JavaScript che dovresti conoscere prima di immergerti in React. Alcuni di essi, che rientrano principalmente in ES6, includono:

• Funzioni freccia
• Operatore di riposo
• Operatore di diffusione
• Moduli
• Destrutturante
• Metodi di matrice
• Letterali modello
• Promesse
• variabili let e const

Gli argomenti JavaScript sopra elencati ti aiuteranno a capire da principiante come funziona React.

Impareresti anche nuovi concetti in React, come:

• Componenti
• JSX
• Gestione statale
• Puntelli
• Elementi di rendering
• Gestione degli eventi
• Resa condizionale
• Liste e chiavi
• Moduli e convalida dei moduli
• Ganci
• Messa in piega

Avere una solida conoscenza dei concetti di React e dei prerequisiti per l'utilizzo della libreria ti aiuterà a utilizzare le sue funzionalità in modo efficiente.

Ma non lasciarti sopraffare da questo. Con la pratica e l'apprendimento costanti, puoi rapidamente acquisire una buona conoscenza di come utilizzare React per creare progetti fantastici. È simile all'apprendimento di un nuovo linguaggio di programmazione: ci vuole solo un po' di tempo e di pratica per capirlo.

Gestione dello Stato

L'aggiornamento dello stato/valore delle tue variabili in React funziona in modo diverso da come lo faresti usando JavaScript vanilla.

In JavaScript, aggiornare una variabile è semplice come assegnarle un nuovo valore usando l'operatore uguale a ( = ). Ecco un esempio:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

Nel codice sopra, abbiamo creato una variabile chiamata x con un valore iniziale di 300 .

Usando l'operatore uguale a, gli abbiamo assegnato un nuovo valore di 100 . Questo è stato scritto all'interno di una funzione updateX .

In React, l'aggiornamento dello stato/valore delle tue variabili funziona in modo diverso. Ecco come:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

Quando aggiorni lo stato di una variabile in React, fai uso di useState Hook. Ci sono tre cose da notare quando si usa questo Hook:

• Il nome della variabile
• Una funzione per aggiornare la variabile
• Il valore/stato iniziale della variabile

Nel nostro esempio, x è il nome della variabile e setX è la funzione per aggiornare il valore di x , mentre il valore iniziale ( 300 ) di x viene passato come parametro alla funzione useState :

 const [x, setX] = useState(300)

Per aggiornare lo stato di x , abbiamo utilizzato la funzione setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

Quindi la funzione updateX richiama la funzione setX , che quindi imposta il valore di x su 100 .

Sebbene questo sembri funzionare perfettamente per aggiornare lo stato delle tue variabili, aumenta la complessità del tuo codice in progetti molto grandi. Avere un sacco di State Hooks rende il codice molto difficile da mantenere e comprendere, soprattutto quando il tuo progetto si ridimensiona.

Un altro problema con l'utilizzo di State Hook è che queste variabili create non sono condivise tra i diversi componenti che compongono la tua app. Dovresti comunque utilizzare Props per passare i dati da una variabile all'altra.

Fortunatamente per noi, ci sono librerie create per gestire la gestione dello stato in modo efficiente in React. Ti consentono persino di creare una variabile una volta e usarla ovunque tu voglia nella tua app React. Alcune di queste librerie includono Redux, Recoil e Zustand.

Il problema con la scelta di una libreria di terze parti per la gestione dello stato è che saresti costretto ad apprendere nuovi concetti estranei a ciò che hai già appreso in React. Redux, ad esempio, era noto per avere un sacco di codice boilerplate, che rendeva difficile la comprensione per i principianti (sebbene questo problema sia stato risolto con Redux Toolkit, che ti consente di scrivere meno codice di quanto faresti con Redux).

Manutenibilità e scalabilità

Poiché le esigenze degli utenti di un prodotto continuano a cambiare, c'è sempre la necessità di introdurre modifiche al codice che compone il prodotto.

Spesso è difficile ridimensionare il codice quando quel codice non è facile da mantenere per il team. Difficoltà come queste derivano dal seguire cattive pratiche durante la scrittura del codice. All'inizio possono sembrare che funzionino perfettamente, dandoti il ​​risultato desiderato, ma tutto ciò che funziona "per ora" è inefficiente per il futuro e la crescita del tuo progetto.

Nella prossima sezione, esamineremo alcune convenzioni che possono aiutarti a migliorare il modo in cui scrivi il tuo codice React. Questo ti aiuterà anche a collaborare meglio quando lavori con un team di professionisti.

Reagisci alle migliori pratiche

In questa sezione, parleremo di alcune delle migliori pratiche da seguire quando si scrive il codice React. Immergiamoci subito.

1. Mantieni una chiara struttura delle cartelle

Le strutture delle cartelle aiutano te e altri sviluppatori a comprendere la disposizione dei file e delle risorse utilizzate in un progetto.

Con una buona struttura delle cartelle, è facile navigare facilmente, risparmiando tempo e aiutando a evitare confusione. Le strutture delle cartelle differiscono in base alle preferenze di ciascun team, ma qui ci sono alcune delle strutture di cartelle comunemente utilizzate in React.

Raggruppamento di cartelle per caratteristiche o percorsi

Raggruppare i file nella cartella in base ai loro percorsi e caratteristiche aiuta a mantenere tutto ciò che riguarda una particolare caratteristica in un unico spazio. Ad esempio, se disponi di un dashboard utente, puoi avere i file JavaScript, CSS e di test relativi al dashboard in una cartella.

Ecco un esempio per dimostrare che:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

Come si può vedere sopra, ogni funzionalità principale dell'app ha tutti i suoi file e risorse archiviati nella stessa cartella.

Raggruppamento di file simili

In alternativa, puoi raggruppare file simili nella stessa cartella. Puoi anche avere singole cartelle per Hook, componenti e così via. Dai un'occhiata a questo esempio:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

Non devi seguire rigorosamente queste strutture di cartelle durante la codifica. Se hai un modo specifico per ordinare i tuoi file, fallo. Finché tu e gli altri sviluppatori avete una chiara comprensione della struttura del file, siete a posto!

2. Istituire un ordine di importazione strutturato

Man mano che la tua applicazione React continua a crescere, sei destinato a effettuare importazioni extra. La struttura delle tue importazioni fa molto per aiutarti a capire cosa compone i tuoi componenti.

Per convenzione, il raggruppamento di utilità simili sembra funzionare correttamente. Ad esempio, puoi raggruppare le importazioni esterne o di terze parti separatamente dalle importazioni locali.

Dai un'occhiata al seguente esempio:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

Nel codice sopra, abbiamo prima raggruppato le librerie di terze parti (queste sono le librerie che abbiamo dovuto installare in anticipo).

Abbiamo quindi importato i file che abbiamo creato localmente come fogli di stile, immagini e componenti.

Per semplicità e facilità di comprensione, il nostro esempio non descrive una base di codice molto ampia, ma tieni presente che essere coerenti con questo formato di importazione aiuterà te e gli altri sviluppatori a comprendere meglio la tua app React.

Puoi andare oltre raggruppando i tuoi file locali in base ai tipi di file se questo funziona per te, ovvero raggruppando componenti, immagini, fogli di stile, Hook e così via separatamente sotto le tue importazioni locali.

Ecco un esempio:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. Aderire alle convenzioni di denominazione

Le convenzioni di denominazione aiutano a migliorare la leggibilità del codice. Questo non è applicabile solo ai nomi dei componenti ma anche ai nomi delle tue variabili, fino ai tuoi Hooks.

La documentazione di React non offre alcun modello ufficiale per denominare i componenti. Le convenzioni di denominazione più utilizzate sono camelCase e PascalCase.

PascalCase è utilizzato principalmente per i nomi dei componenti:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Il componente sopra è chiamato StudentList , che è molto più leggibile di Studentlist o studentlist .

D'altra parte, la convenzione di denominazione camelCase viene utilizzata principalmente per denominare variabili, hook, funzioni, array e così via:

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. Usa un Linter

Uno strumento linter aiuta a migliorare la qualità del codice. Uno degli strumenti di linter più popolari per JavaScript e React è ESlint. Ma in che modo esattamente questo aiuta a migliorare la qualità del codice?

Uno strumento linter aiuta con coerenza in una base di codice. Quando si utilizza uno strumento come ESLint, è possibile impostare le regole che si desidera che ogni sviluppatore che lavora al progetto segua. Queste regole possono includere requisiti per l'utilizzo di virgolette doppie invece di virgolette singole, parentesi graffe attorno alle funzioni freccia, una particolare convenzione di denominazione e molto altro ancora.

Lo strumento osserva il tuo codice e poi ti avvisa quando una regola è stata violata. La parola chiave o la riga che infrange la regola viene solitamente sottolineata in rosso.

Poiché ogni sviluppatore ha il proprio stile di codifica, gli strumenti linter possono aiutare con l'uniformità del codice.

Gli strumenti Linter possono anche aiutarci a correggere facilmente i bug. Possiamo vedere errori di ortografia, variabili che sono state dichiarate ma non utilizzate e altre funzionalità simili. Alcuni di questi bug possono essere corretti automaticamente durante la codifica.

Strumenti come ESLint sono integrati nella maggior parte degli editor di codice in modo da ottenere funzionalità di linter in movimento. Puoi anche configurarlo in base alle tue esigenze di codifica.

5. Impiega librerie di frammenti

La cosa interessante dell'utilizzo di un framework con una comunità attiva è la disponibilità di strumenti creati per facilitare lo sviluppo.

Le librerie di snippet possono velocizzare lo sviluppo fornendo codice predefinito che gli sviluppatori utilizzano spesso.

Un buon esempio è l'estensione ES7+ React/Redux/React-Native snippets, che ha molti comandi utili per generare codice predefinito. Ad esempio, se desideri creare un componente funzionale React senza digitare tutto il codice, tutto ciò che devi fare utilizzando l'estensione è digitare rfce e premere Invio .

Il comando sopra continuerà a generare un componente funzionale con un nome che corrisponde al nome del file. Abbiamo generato il codice seguente utilizzando l'estensione snippet ES7+ React/Redux/React-Native:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Un altro utile strumento di snippet è l'estensione Tailwind CSS IntelliSense, che semplifica il processo di creazione di stili per le pagine Web con Tailwind CSS. L'estensione può aiutarti con il completamento automatico suggerendo classi di utilità, evidenziazione della sintassi e funzionalità di linting. Puoi persino vedere come appaiono i tuoi colori durante la codifica.

6. Combina CSS e JavaScript

Quando si lavora su progetti di grandi dimensioni, l'utilizzo di file di fogli di stile diversi per ciascun componente può rendere la struttura del file ingombrante e difficile da navigare.

Una soluzione a questo problema è combinare il tuo codice CSS e JSX. Puoi utilizzare framework/librerie come Tailwind CSS ed Emotion per questo.

Ecco come appare lo stile con Tailwind CSS:

 <p className="font-bold mr-8">resource edge</p>

Il codice sopra dà all'elemento del paragrafo un carattere in grassetto e aggiunge un po' di margine sulla destra. Siamo in grado di farlo utilizzando le classi di utilità del framework.

Ecco come definiresti lo stile di un elemento utilizzando Emotion:

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. Limitare la creazione di componenti

Una delle caratteristiche principali di React è la riusabilità del codice. È possibile creare un componente e riutilizzarne la logica tutte le volte che è possibile senza riscrivere tale logica.

Con questo in mente, dovresti sempre limitare il numero di componenti che crei. Non farlo gonfia la struttura del file con file non necessari che non dovrebbero esistere in primo luogo.

Useremo un esempio molto semplice per dimostrarlo:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

Il componente sopra mostra il nome di un utente. Se dovessimo creare un file diverso per ogni utente, alla fine avremmo un numero irragionevole di file. (Naturalmente, stiamo usando le informazioni dell'utente per semplificare le cose. In una situazione di vita reale, potresti avere a che fare con un diverso tipo di logica.)

Per rendere riutilizzabile il nostro componente, possiamo utilizzare Props. Ecco come:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

Successivamente, possiamo quindi importare questo componente e utilizzarlo tutte le volte che vogliamo:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

Ora abbiamo tre diverse istanze del componente UserInfo provenienti dalla logica creata in un file invece di avere tre file separati per ciascun utente.

8. Implementare il caricamento lento

Il caricamento lento è molto utile man mano che la tua app React cresce. Quando hai una grande base di codice, il tempo di caricamento delle tue pagine web rallenta. Questo perché l'intera app deve essere caricata ogni volta per ogni utente.

"Lazy loading" è un termine utilizzato per varie implementazioni. Qui lo associamo a JavaScript e React, ma puoi anche implementare il lazy loading su immagini e video.

Per impostazione predefinita, React raggruppa e distribuisce l'intera applicazione. Ma possiamo cambiare questo comportamento usando il caricamento lento, altrimenti noto come suddivisione del codice.

Fondamentalmente, puoi limitare quale sezione della tua app viene caricata in un determinato punto. Ciò si ottiene suddividendo i pacchetti e caricando solo quelli pertinenti alle esigenze dell'utente. Ad esempio, puoi prima caricare solo la logica necessaria per l'accesso dell'utente, quindi caricare la logica per il dashboard dell'utente solo dopo che l'accesso è riuscito.

9. Impiega ganci riutilizzabili

Gli hook in React ti consentono di sfruttare alcune delle funzionalità aggiuntive di React, come l'interazione con lo stato del tuo componente e l'esecuzione di postumi in relazione a determinati cambiamenti di stato nel tuo componente. Possiamo fare tutto questo senza scrivere componenti di classe.

Possiamo anche rendere gli hook riutilizzabili in modo da non dover ridigitare la logica in ogni file che vengono utilizzati. Lo facciamo creando Hook personalizzati che possono essere importati ovunque nell'app.

Nell'esempio seguente, creeremo un Hook per il recupero dei dati da API esterne:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

Abbiamo creato un hook per il recupero dei dati dalle API di cui sopra. Ora può essere importato in qualsiasi componente. Questo ci risparmia lo stress di digitare tutta quella logica in ogni componente in cui dobbiamo recuperare dati esterni.

Il tipo di Hook personalizzati che possiamo creare in React è illimitato, quindi sta a te decidere come usarli. Ricorda solo che se si tratta di una funzionalità che deve essere ripetuta su diversi componenti, dovresti assolutamente renderla riutilizzabile.

10. Registrare e gestire gli errori

Esistono diversi modi per gestire gli errori in React come utilizzare limiti di errore, provare a catturare blocchi o utilizzare librerie esterne come react-error-boundary .

I limiti di errore incorporati che sono stati introdotti in React 16 erano una funzionalità per i componenti di classe, quindi non ne discuteremo perché è consigliabile utilizzare componenti funzionali anziché componenti di classe.

D'altra parte, l'utilizzo di un blocco try e catch funziona solo per il codice imperativo, ma non per il codice dichiarativo. Ciò significa che non è una buona opzione quando si lavora con JSX.

La nostra migliore raccomandazione sarebbe quella di utilizzare una libreria come react-error-boundary. Questa libreria fornisce funzionalità che possono essere raggruppate attorno ai tuoi componenti, che ti aiuteranno a rilevare errori durante il rendering della tua app React.

11. Monitora e prova il tuo codice

Testare il codice durante lo sviluppo ti aiuta a scrivere codice gestibile. Sfortunatamente, questo è qualcosa che molti sviluppatori trascurano.

Sebbene molti possano obiettare che il test non è un grosso problema quando si crea la tua app Web, offre innumerevoli vantaggi. Qui ci sono solo alcuni:

• I test ti aiutano a rilevare errori e bug.
• Il rilevamento dei bug porta a una migliore qualità del codice.
• I test unitari possono essere documentati per la raccolta dei dati e riferimento futuro.
• Il rilevamento precoce dei bug ti fa risparmiare il costo di pagare gli sviluppatori per spegnere l'incendio che il bug potrebbe causare se non controllato.
• Le app e i siti privi di bug guadagnano fiducia e lealtà dal loro pubblico, il che porta a una maggiore crescita.

Puoi utilizzare strumenti come Jest o React Testing Library per testare il tuo codice. Ci sono molti strumenti di test tra cui puoi scegliere: tutto si riduce a quello che funziona meglio per te.

Puoi anche testare le tue app React mentre le crei eseguendo le app nel tuo browser. Di solito visualizzi sullo schermo qualsiasi errore rilevato. È simile allo sviluppo di siti WordPress utilizzando DevKinsta, uno strumento che consente di progettare, sviluppare e distribuire siti WordPress sul computer locale.

12. Fare uso di componenti funzionali

L'utilizzo di componenti funzionali in React comporta molti vantaggi: scrivi meno codice, è più facile da leggere e la versione beta della documentazione ufficiale di React viene riscritta utilizzando componenti funzionali (Hook), quindi dovresti assolutamente abituarti a usarli .

Con i componenti funzionali, non devi preoccuparti di usare this o usare le classi. Puoi anche gestire facilmente lo stato del tuo componente scrivendo meno codice grazie agli Hooks.

La maggior parte delle risorse aggiornate che troverai su React utilizzano componenti funzionali, facilitando la comprensione e il rispetto di utili guide e risorse create dalla community in caso di problemi.

13. Rimani aggiornato con le modifiche alla versione di React

Col passare del tempo, verranno introdotte nuove funzionalità e alcune vecchie verranno modificate. Il modo migliore per tenerne traccia è guardare la documentazione ufficiale.

Puoi anche unirti alle comunità React sui social media per ottenere informazioni sui cambiamenti quando si verificano.

Rimanere aggiornato con la versione corrente di React ti aiuterà a determinare quando ottimizzare o apportare modifiche alla tua base di codice per ottenere le migliori prestazioni.

Esistono anche librerie esterne costruite attorno a React con cui dovresti essere aggiornato, come React Router, che viene utilizzato per il routing in React. Sapere quali modifiche apportate da queste librerie può aiutarti ad apportare modifiche rilevanti e importanti alla tua app e semplificare le cose per tutti coloro che lavorano al progetto.

Inoltre, alcune funzionalità possono diventare obsolete e alcune parole chiave possono essere modificate quando vengono rilasciate nuove versioni. Per essere al sicuro, dovresti sempre leggere la documentazione e le guide quando vengono apportate tali modifiche.

14. Usa un provider di hosting veloce e sicuro

Se vuoi rendere la tua app web accessibile a tutti dopo averla creata, dovresti ospitarla. È importante utilizzare un provider di hosting veloce e sicuro.

L'hosting del tuo sito web ti dà accesso a diversi strumenti che semplificano il ridimensionamento e la gestione del tuo sito web. Il server in cui è ospitato il tuo sito Web consente di archiviare in modo sicuro i file sul tuo computer locale sul server. Il vantaggio complessivo dell'hosting del tuo sito Web è che altre persone possono vedere le cose fantastiche che hai creato.

Esistono diverse piattaforme che forniscono servizi di hosting gratuiti a sviluppatori come Firebase, Vercel, Netlify, GitHub Pages o servizi a pagamento come Azure, AWS, GoDaddy, Bluehost e così via.

Potete anche utilizzare la piattaforma di hosting delle applicazioni di Kinsta. Tutto quello che dovete fare è connettere un repository GitHub, scegliere tra i 25 data center di Kinsta posizionati a livello globale e partire. Avrai accesso a configurazione rapida, supporto 24 ore su 24, 7 giorni su 7, sicurezza all'avanguardia, domini personalizzati, strumenti avanzati di reporting e monitoraggio e altro ancora.

Riepilogo

Imparare a usare React non è tutto ciò che serve per creare app web eccezionali. Come con qualsiasi altro framework come Angular, Vue e così via, ci sono best practice che dovresti seguire per aiutarti a creare prodotti efficienti.

Seguire queste convenzioni React non solo aiuta la tua app, ma presenta anche vantaggi per te come sviluppatore frontend: impari a scrivere codice efficiente, scalabile e gestibile e ti distingui come professionista nel tuo campo. Vuoi intensificare il tuo gioco di programmazione React? Tutto ciò che devi sapere è in questa guida Click to Tweet

Quindi, quando crei la tua prossima app Web con React, tieni a mente queste best practice per semplificare l'utilizzo e la gestione del prodotto sia per i tuoi utenti che per i tuoi sviluppatori.

Quali altre best practice di React conosci che non sono state menzionate in questo articolo? Condividili nei commenti qui sotto. Buona programmazione!