React è una delle librerie più popolari per la creazione di interfacce utente nella realizzazione di applicazioni web. È ampiamente utilizzata da molte aziende e vanta una community molto attiva.

Se siete sviluppatori React, comprendere il funzionamento della libreria non è l’unica cosa di cui avete bisogno per creare progetti user friendly, facilmente scalabili e gestibili.

È necessario anche conoscere alcune convenzioni che vi permetteranno di scrivere codice React pulito. Questo non solo vi aiuterà a servire meglio i vostri utenti, ma renderà più facile la manutenzione della code base per voi e per gli altri sviluppatori che lavorano al progetto.

In questo tutorial inizieremo parlando di alcune delle difficoltà più comuni per gli sviluppatori React, per poi immergerci in alcune delle best practice da seguire per scrivere codice React in modo più efficiente.

Iniziamo!

Guarda la Nostra Video-Guida sulle Best Practice di React

Le Sfide degli Sviluppatori React

In questa sezione parleremo di alcune delle principali difficoltà che gli sviluppatori React devono affrontare durante e dopo la creazione di applicazioni web.

Tutto ciò di cui parleremo in questa sezione può essere evitato seguendo le best practice, di cui parleremo in dettaglio più avanti.

Inizieremo con il problema più elementare che affligge i principianti.

Prerequisiti di React

Una delle principali sfide per gli sviluppatori React è capire come funziona la libreria e quali sono i prerequisiti per il suo utilizzo.

Prima di imparare React, è necessario sapere un paio di cose. Dato che React utilizza JSX, conoscere HTML e JavaScript è indispensabile. Naturalmente, per progettare le vostre applicazioni web dovete conoscere anche i CSS o un framework CSS moderno.

In particolare, ci sono concetti e funzionalità JavaScript fondamentali che dovreste conoscere prima di immergervi in React. Alcuni di questi, che rientrano per lo più in ES6, includono:

  • Arrow functions
  • Rest operator
  • Spread operator
  • Moduli
  • Destrutturazione
  • Metodi di array
  • Template literals
  • Promesse
  • Variabili let e const

Questi concetti di JavaScript vi aiuteranno a capire, da principianti, come funziona React.

Conoscerete anche nuovi concetti di React, come ad esempio:

  • Componenti
  • JSX
  • Gestione degli stati
  • Proprietà
  • Rendering degli elementi
  • Gestione degli eventi
  • Rendering condizionato
  • Liste e chiavi
  • Moduli e convalida dei moduli
  • Hook
  • Stile

Avere una solida conoscenza dei concetti base di React e dei prerequisiti per l’utilizzo della libreria vi aiuterà a sfruttarne appieno le funzionalità.

Ma non lasciatevi scoraggiare. Con la pratica e l’apprendimento costante, potrete rapidamente acquisire una buona padronanza di React per costruire progetti fantastici. È come imparare un nuovo linguaggio di programmazione: ci vuole solo un po’ di tempo e di pratica.

Gestione degli Stati

L’aggiornamento dello stato/valore delle variabili in React funziona in modo diverso dal normale JavaScript.

In JavaScript, per aggiornare una variabile basta assegnarle un nuovo valore utilizzando l’operatore uguale (=). Ecco un esempio:

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

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

Utilizzando l’operatore di uguaglianza, le abbiamo assegnato il nuovo valore 100. Questo è stato scritto all’interno di una funzione updateX.

In React, l’aggiornamento dello stato/valore delle 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 si aggiorna lo stato di una variabile in React, si utilizza l’hook useState. Ci sono tre cose da notare quando si utilizza 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, setX è la funzione che aggiorna 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 invoca la funzione setX, che imposta il valore di x su 100.

Sebbene questo metodo sembri funzionare perfettamente per aggiornare lo stato delle variabili, aumenta la complessità del codice in progetti molto grandi. Avere un sacco di hook di stato rende il codice molto difficile da mantenere e da capire, soprattutto quando il progetto si amplia.

Un altro problema degli State Hook è che le variabili create non sono condivise tra i diversi componenti che compongono un’applicazione. Dovrete ancora utilizzare le Props per passare i dati da una variabile all’altra.

Per nostra fortuna, esistono delle librerie progettate per gestire in modo efficiente la gestione dello stato in React. Permettono anche di creare una variabile una volta sola e di utilizzarla ovunque vogliate nella vostra applicazione React. Alcune di queste librerie sono Redux, Recoil e Zustand.

Il problema delle una libreria di terze parti per la gestione degli stati è che dovrete imparare nuovi concetti estranei a quelli che avete già appreso con React. Redux, ad esempio, era noto per avere un sacco di codice boilerplate, che lo rendeva difficile da comprendere per i principianti (anche se questo problema è stato risolto con Redux Toolkit, che vi permette di scrivere meno codice rispetto a Redux).

Mantenibilità e Scalabilità

Man mano che le esigenze degli utenti di un prodotto cambiano, c’è sempre la necessità di introdurre modifiche al codice.

Spesso è difficile scalare il codice se questo non è facile da mantenere per il team. Difficoltà come queste derivano dall’adozione di pratiche sbagliate nella scrittura del codice. All’inizio possono sembrare perfette e dare il risultato desiderato, ma tutto ciò che funziona “per ora” potrebbe non andar bene per il futuro e per la crescita del progetto.

Nella prossima sezione, introdurremo alcune convenzioni che possono aiutarvi a migliorare il modo in cui scrivete il vostro codice React. Questo vi aiuterà anche a collaborare meglio quando si lavora con un team di professionisti.

Le Best Practice di React

In questa sezione presenteremo alcune delle best practice da seguire quando si scrive codice React. Entriamo subito nel vivo.

1. Mantenere una Chiara Struttura delle Cartelle

Le strutture delle cartelle aiutano voi e gli altri sviluppatori a capire la disposizione dei file e delle risorse utilizzate in un progetto.

Con una buona struttura di cartelle è facile orientarsi, risparmiando tempo ed evitando confusione. Le strutture delle cartelle variano a seconda delle preferenze di ogni team, ma ecco alcune delle strutture di cartelle comunemente utilizzate in React.

Raggruppamento di Cartelle per Caratteristiche o Percorsi

Raggruppare i file nella cartella in base ai percorsi e alle funzionalità aiuta a mantenere tutto ciò che riguarda una particolare funzionalità in un unico spazio. Ad esempio, se avete una dashboard utente, potete avere i file JavaScript, CSS e di test relativi alla dashboard in un’unica cartella.

Ecco un esempio:

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 qui sopra, ogni funzione principale dell’applicazione ha tutti i file e le risorse archiviati nella stessa cartella.

Raggruppare File Simili

In alternativa, potete raggruppare file simili nella stessa cartella. Potete anche avere cartelle specifiche per gli hook, i componenti e così via. Guardate questo esempio:

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

Non è necessario seguire rigorosamente queste strutture di cartelle durante lo sviluppo. Se avete un modo specifico di ordinare i vostri file, fatelo pure. Finché voi e gli altri sviluppatori avrete una chiara visione della struttura dei file, sarete a posto!

2. Istituire un Ordine di Importazione Strutturato

Se la vostra applicazione React continua a crescere, è inevitabile che facciate delle importazioni extra. La struttura delle importazioni vi aiuterà a capire quali sono i vostri componenti.

Per convenzione, il raggruppamento di utilità simili sembra andare bene. Ad esempio, potete raggruppare le importazioni esterne o di terze parti separatamente dalle importazioni locali.

Guardate il 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 qui sopra, abbiamo prima raggruppato le librerie di terze parti (si tratta di librerie che abbiamo dovuto installare in precedenza).

Poi abbiamo importato i file creati in locale come fogli di stile, immagini e componenti.

Per semplicità, il nostro esempio non rappresenta una base di codice molto ampia, ma tenete presente che essere coerenti con questo formato di import aiuterà voi e gli altri sviluppatori a capire meglio la vostra applicazione React.

Se lo ritenete opportuno, potete anche raggruppare i file locali in base ai tipi di file, cioè raggruppare componenti, immagini, fogli di stile, hook e così via separatamente nelle 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. Rispettare le Convenzioni di Denominazione

Le convenzioni di denominazione aiutano a migliorare la leggibilità del codice. Questo non vale solo per i nomi dei componenti, ma anche per i nomi delle variabili o degli hook.

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

PascalCase è utilizzato soprattutto per i nomi dei componenti:

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

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

La convenzione di denominazione camelCase è utilizzata soprattutto per nominare variabili, hook, funzioni, array e così via:

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

4. Utilizzare un Linter

Uno strumento di lintering aiuta a migliorare la qualità del codice. Uno dei più popolari strumenti di linter per JavaScript e React è ESlint. Ma come fa esattamente a migliorare la qualità del codice?

Uno strumento di lintering aiuta a migliorare la coerenza del codice. Se utilizzate uno strumento come ESLint, potete impostare le regole che volete siano seguite da tutti gli sviluppatori che lavorano al progetto. Queste regole possono includere l’uso di doppi apici invece di apici singoli, parentesi graffe intorno alle arrow functions, una particolare convenzione di denominazione e molto altro.

Lo strumento osserva il vostro codice e vi notifica quando una regola non è stata rispettata. La parola chiave o la riga che infrange la regola viene solitamente sottolineata in rosso.

Dato che ogni sviluppatore ha un proprio stile, gli strumenti di lintering possono aiutarvi ad uniformare il codice.

Gli strumenti di linter possono anche aiutare ad individuare facilmente i bug. Possiamo vedere errori di ortografia, variabili dichiarate ma non utilizzate e altre funzionalità simili. Alcuni di questi bug possono essere risolti automaticamente durante la scrittura del codice.

Strumenti come ESLint sono integrati nella maggior parte degli editor di codice, per cui le funzionalità di linter sono disponibili anche in movimento. Potete anche configurarlo in base alle vostre esigenze di programmazione.

5. Utilizzare le Librerie di Snippet

L’aspetto positivo di un framework con una comunità attiva è la disponibilità di strumenti creati per facilitare lo sviluppo.

Le librerie di snippet possono rendere lo sviluppo più veloce fornendo codice predefinito utilizzato spesso dagli sviluppatori.

Un buon esempio è l’estensione ES7+ React/Redux/React-Native snippets, che contiene molti comandi utili per generare codice predefinito. Ad esempio, se volete creare un componente funzionale React senza dover digitare tutto il codice, tutto ciò che dovete fare con l’estensione è digitare rfce e premere Invio.

Il comando precedente genererà un componente funzionale con un nome corrispondente al nome del file. Abbiamo generato il codice qui sotto utilizzando l’estensione ES7+ React/Redux/React-Native snippets:

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

Un altro utile strumento per gli snippet è l’estensione Tailwind CSS IntelliSense, che semplifica la stilizzazione delle pagine web con Tailwind CSS. L’estensione può aiutarvi con il completamento automatico suggerendo classi di utilità, evidenziazione della sintassi e funzionalità di linting. Potete anche vedere l’aspetto dei vostri colori durante lo sviluppo.

6. Combinare CSS e JavaScript

Quando si lavora a progetti di grandi dimensioni, l’utilizzo di file di fogli di stile diversi per ogni componente può rendere la struttura dei file ingombrante e difficile da sfogliare.

Una soluzione a questo problema è quella di combinare il codice CSS e JSX. A questo scopo potete utilizzare framework/librerie come Tailwind CSS ed Emotion.

Ecco come appare lo styling con Tailwind CSS:

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

Il codice qui sopra conferisce all’elemento paragrafo un carattere in grassetto e aggiunge un po’ di margine a destra. Possiamo farlo utilizzando le classi di utilità del framework.

Ecco come si crea 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 riutilizzabilità del codice. Potete creare un componente e riutilizzare la sua logica tutte le volte che volete senza doverla riscrivere.

Per questo motivo, dovreste sempre limitare il numero di componenti che create. Se non lo fate, la struttura dei file si riempie di file inutili che non dovrebbero esistere.

Utilizzeremo un esempio molto semplice:

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

Il componente qui 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 sull’utente per mantenere le cose semplici. In una situazione reale, potreste avere a che fare con un altro tipo di logica).

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

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

Dopodiché possiamo 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 unico file invece di avere tre file separati per ogni utente.

8. Implementare il Lazy Loading

Il lazy loading è molto utile quando la vostra applicazione React cresce. Quando avete una grande code base, il tempo di caricamento delle pagine web aumenta. Questo perché l’intera applicazione deve essere caricata ogni volta per ogni utente.

“Lazy Loading” è un termine utilizzato per diverse implementazioni. In questo caso lo associamo a JavaScript e React, ma è possibile implementare il lazy loading anche su immagini e video.

Di default, React raggruppa e distribuisce l’intera applicazione. Ma possiamo cambiare questo comportamento utilizzando il lazy loading, altrimenti noto come suddivisione del codice.

In pratica, potete limitare la sezione della vostra applicazione che viene caricata in un determinato momento. Questo si ottiene dividendo i bundle e caricando solo quelli rilevanti per le esigenze dell’utente. Ad esempio, potete caricare prima solo la logica necessaria per l’accesso dell’utente e poi caricare la logica per la dashboard dell’utente solo dopo che l’utente ha effettuato l’accesso.

9. Usare Hook Riutilizzabili

Gli hook in React permettono di sfruttare alcune delle funzionalità aggiuntive di React, come l’interazione con lo stato del componente e l’esecuzione di after-effect in relazione a determinati cambiamenti di stato nel vostro componente. Possiamo fare tutto questo senza scrivere componenti di classe.

Possiamo anche rendere gli hook riutilizzabili in modo da non dover riscrivere la logica in ogni file in cui vengono utilizzati. Per farlo, possiamo creare degli hook personalizzati che possono essere importati in qualsiasi punto dell’applicazione.

Nell’esempio che segue, creeremo un Hook per recuperare i 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 recuperare i dati dalle API. Ora può essere importato in qualsiasi componente. Questo ci evita lo stress di dover digitare tutta la logica in ogni componente in cui dobbiamo recuperare dati esterni.

Il tipo di hook personalizzati che possiamo creare in React è illimitato, quindi sta a voi decidere come utilizzarli. Ricordate solo che, se si tratta di una funzionalità che deve essere ripetuta in diversi componenti, dovete assolutamente renderla riutilizzabile.

10. Registrare e Gestire gli Errori

Esistono diversi modi per gestire gli errori in React, come l’utilizzo di margini di errore, blocchi try e catch o l’utilizzo di librerie esterne come react-error-boundary.

I margini di errore integrati introdotti in React 16 erano una funzionalità per i componenti di classe, quindi non ne parleremo perché è consigliabile utilizzare componenti funzionali invece di componenti di classe.

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

Il nostro consiglio è quello di utilizzare una libreria come react-error-boundary. Questa libreria fornisce funzionalità che possono racchiudere i vostri componenti e che vi aiuteranno a rilevare gli errori durante il rendering della vostra applicazione React.

11. Monitorare e Testare il Codice

Testare il codice durante lo sviluppo vi aiuta a scrivere codice mantenibile. Purtroppo questo è un aspetto che molti sviluppatori trascurano.

Sebbene molti sostengano che i test non siano un grosso problema durante la creazione di un’applicazione web, hanno innumerevoli vantaggi. Eccone alcuni:

  • I test vi aiutano a individuare errori e bug.
  • L’individuazione dei bug porta a un miglioramento della qualità del codice.
  • I test unitari possono essere documentati per raccogliere dati e riferimenti futuri.
  • Il rilevamento precoce dei bug vi permette di evitare 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 fedeltà da parte del pubblico, il che porta a una maggiore crescita.

Potete utilizzare strumenti come Jest o React Testing Library per testare il vostro codice. Ci sono molti strumenti di testing tra cui scegliere: tutto dipende da quello che funziona meglio per voi.

Potete anche testare le vostre applicazioni React mentre le costruite eseguendole nel browser. In genere, ogni errore rilevato viene visualizzato sullo schermo. Questo è simile allo sviluppo di siti WordPress con DevKinsta, uno strumento che vi permette di progettare, sviluppare e distribuire siti WordPress sul vostro computer locale.

12. Utilizzare i Componenti Funzionali

L’utilizzo di componenti funzionali in React offre molti vantaggi: Si scrive meno codice, è più facile da leggere e la versione beta della documentazione ufficiale di React è stata riscritta utilizzando i componenti funzionali (Hooks), quindi dovreste assolutamente abituarvi a usarli.

Con i componenti funzionali non dovete preoccuparvi di usare this o le classi. Inoltre, grazie agli Hook, potete gestire facilmente lo stato del vostro componente scrivendo meno codice.

La maggior parte delle risorse aggiornate che trovate su React fa uso di componenti funzionali, il che permette di capire e seguire le guide e le risorse utili create dalla comunità.

13. Rimanere Aggiornati sui Cambiamenti di Versione di React

Con il passare del tempo, verranno introdotte nuove funzionalità e alcune vecchie verranno modificate. Il modo migliore per tenerne traccia è quello di consultare la documentazione ufficiale.

Potete anche unirvi alle comunità di React sui social media per ricevere informazioni sulle novità.

Rimanere aggiornati sulla versione attuale di React vi aiuterà a stabilire quando ottimizzare o apportare modifiche alla vostra base di codice per ottenere migliori prestazioni.

Ci sono anche librerie esterne costruite intorno a React che dovreste tenere aggiornate, come React Router, che viene utilizzato per il routing in React. Conoscere le modifiche apportate da queste librerie può aiutarvi ad apportare modifiche importanti alla vostra applicazione e a rendere le cose più semplici per tutti coloro che lavorano al progetto.

Inoltre, alcune funzionalità possono diventare deprecate e alcune parole chiave possono essere modificate con le nuove versioni. Per essere sicuri, quando vengono apportate queste modifiche dovete sempre leggere la documentazione e le guide.

14. Scegliere un Provider di Hosting Veloce e Sicuro

Se volete rendere la vostra web app accessibile a tutti dopo averla creata, devi scegliere un servizio di hosting. È importante scegliere un provider di hosting veloce e sicuro.

L’hosting del vostro sito web vi dà accesso a diversi strumenti che vi permettono di gestire e scalare il sito. Il server su cui è ospitato il vostro sito web consente di archiviare in modo sicuro i file presenti sul vostro computer locale. Il vantaggio generale dell’hosting del vostro sito web è che altre persone possono vedere le fantastiche cose che avete creato.

Esistono diverse piattaforme che offrono servizi di hosting gratuiti agli 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 Application Hosting di Kinsta. Tutto ciò che dovete fare è collegare un repository GitHub, scegliere tra i 25 data center di Kinsta posizionati a livello globale e partire. Avrete configurazione rapida, assistenza 24/7, sicurezza di prim’ordine, domini personalizzati, strumenti avanzati di reporting e monitoraggio e molto altro.

Riepilogo

Imparare a usare React non è tutto ciò che serve per creare applicazioni web eccezionali. Come per qualsiasi altro framework, come Angular, Vue e così via, ci sono delle best practice che dovreste seguire per costruire prodotti di qualità.

Seguire queste convenzioni di React non solo aiuta la vostra app, ma ha anche dei vantaggi per voi come sviluppatori frontend: imparerete a scrivere codice efficiente, scalabile e mantenibile e vi distinguerete come professionisti nel vostro campo.

Quindi, quando costruirete la vostra prossima applicazione web con React, ricordate queste best practice per semplificare l’utilizzo e la gestione del prodotto sia per i vostri utenti che per i vostri sviluppatori.

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

Ihechikara Abba

Ihechikara è uno software developer e technical writer. Si diverte a scrivere articoli su tecnologie web, programmazione e argomenti legati all'IT. Collegatevi con Ihechikara su X.