Nel nostro percorso di sviluppo con React.js e Tailwind CSS, è naturale voler creare componenti personalizzati che si adattino alle esigenze specifiche del nostro progetto. In questo script, esploreremo come creare un componente personalizzato in React.js che includa un pulsante ...

Tailwind CSS può essere modificato e integrato attraverso svariate librerie. In questo script prenderemo in considerazione Preline UI, una libreria disponibile su NPM che applica un tema e altre funzionalità a Tailwind CSS in progetti React. Utilizzando il progetto esistente, ...

Tailwind CSS può essere incorporato anche all'interno di Single Page Application come React. Il processo risulta molto semplice grazie alle ottimizzazioni della piattaforma e al sistema di compilazione integrato.Cominciamo creando un nuovo progetto React utilizzando create-react-...

La bellezza dell'ecosistema che ruota attorno a React è la vastità di librerie che abbiamo a disposizione. In questo script ci soffermiamo su una in particolare: CSS Module. Grazie a CSS Module, possiamo facilmente creare dei micro-moduli CSS da incorporare all'interno della ...

Una delle funzionalità più comuni di un'applicazione web è sicuramente quella di renderizzare liste in diversi formati. In alcuni casi utilizziamo elenchi puntati, in altri usiamo delle griglie, in altri casi usiamo delle ListView. A prescindere dalla forma che diamo alla lista, ...

Molto spesso capita di avere una form con molti campi e quindi molti controlled component. Se avessimo 40 campi, dovremmo scrivere quaranta metodi molto simili tra loro per gestire il cambio di valore di questi campi. Per ridurre il codice, possiamo creare un unico metodo che sia...

Qualunque sia il framework che usiamo per creare applicazioni, la gestione di una form in HTML passa attraverso l'uso di una serie di componenti predefiniti come input, select, textarea. Fatta eccezione per il tag input con l'attributo type impostato su file, quest componenti ...

In genere, il flusso di rendering di un component in React prevede che al cambio di un valore tra le props o lo state il component venga renderizzato da zero. Nella maggioranza dei casi questo flusso è più che sufficiente, ma esistono casi in cui non è così. Pensiamo ad esempio ...

Renderizzare una lista è una delle attività più comuni in JSX. Basta pensare al rendering di un tag table e dei vari tag tr o di un tag ul e dei vari tag li. Per renderizzare una lista non possiamo usare un ciclo for, ma dobbiamo ricorrere al metodo map della classe Array. Questo...

Un'operazione molto comune durante la renderizzazione di un componente è quella di mostrare o meno certe informazioni. Ad esempio, se un utente è loggato possiamo mostrare il suo nome e mostrare un link al login in caso contrario. JSX supporta il rendering condizionale sfruttando...