Coding in React: 3 cose che devi conoscere se sei un neofita

Negli ultimi mesi ho iniziato a lavorare su un piccolo progetto personale utilizzando React, un po’ per curiosità verso questa “libreria” Javascript e un po’ per apprendere dei nuovi strumenti.

Logicamente come tutte le persone che approcciano per la prima volta ad un nuovo framework ho avuto le mie difficoltà, vorrei quindi riportare qui tre concetti in particolare che mi sarebbero stati utili conoscere durante il mio “primo giorno” con React.

NB. Questa mini-lista deriva da esperienze personali, quindi prendile con le pinze 😀

Premessa: Non iniziare a studiare React se non hai dimestichezza con Javascript!

Questo punto non rientra nelle tre cose che andrò ad elencare, ma vedilo come un requisito necessario.

Una buona conoscenza di Javascript è fondamentale (mi raccomando dai spazio anche a ES6).

Puoi rinfrescarti la memoria qui

Come i componenti React possono scambiarsi informazioni

Iniziamo la mia lista con un concetto fondamentale, forse la cosa più importante che un neofita di React deve comprendere, ma andiamo nel dettaglio.

Un componente in React è visto come un sistema a sè, indipendente e in grado di badare a se stesso, in particolare devi tenere bene a mente che:

  • Un componente non può modificare i propri attributi
  • Un componente non può modificare lo stato di altri componenti
  • Un componente può modificare gli attributi dei propri figli
  • Un componente può modificare il proprio stato

Queste quattro “regole” ci indirizzano su uno scambio di dati che assomiglia molto ad un ascensore, cioè il componente padre modifica gli attributi dei suoi figli che a loro volta modificano il proprio stato e richiamano una funzione del padre per segnalare il tutto. Forse quest’immagine di David Gilbertson può chiarirti le idee (clicca per ingrandire)

In questo caso lo scambio dati avviene come spiegato prima tramite due props:

  • items che contiene il dataset degli elementi della lista.
  • deleteItem che contiene invece un richiamo alla funzione del componente del padre che va ad aggiornare il proprio stato, e quindi i figli che contiene.

All’inizio sembra complicato ma dopo un po’ di lavoro inizierai ad entrare nell’ottica 🙂

Come strutturare correttamente i componenti

Uno dei punti di forza di React è la componibilità. Personalmente non conosco un framework che offre un modo così semplice per creare e combinare componenti. Logicamente dobbiamo impegnarci a farlo nel modo giusto, abbiamo un modo abbastanza semplice per fare ciò:

Usare le API children di React

React ci fornisce una vasta gamma di API per poter gestire i children di un component, quindi ti sconsiglio di inserire dei componenti direttamente nel return di un componente padre, altrimenti andiamo così contro al pattern stesso che React ci invita a seguire.

Ecco un esempio di una composizione corretta usando il props.children:

Gestire il CSS dei componenti React tramite le props

Con l’aumentare della complessità della tua app noterai che ci sarà il bisogno di iniziare a gestire il CSS dei tuoi elementi in maniera sistematica, per raggiungere questo obiettivo puoi utilizzare le props per dettare le regole CSS che i tuoi componenti devono assumere.

Eccoti 2 esempi di un uso di props per gestire il CSS.

Usa le props come flag

Puoi passare una proprietà ad un componente react tramite un flag, in questo caso, come succede nel linguaggio HTML standard,  passerai al componente un boolean (true o false):

<Button red>Hello</Button>

Setta il valore della proprietà

In questo caso, oltre a passare il nome della proprietà ne andrai a settare il valore

<Button bsize="btn--medium">Hello</Button>

Eccoti un esempio di componente che setta il proprio CSS sfruttando i metodi che ti ho detto qui sopra.

Conclusione

Spero che con questo articolo abbia chiarito alcuni dei tuoi dubbi su React, se hai delle considerazioni da fare, ulteriori domande o semplicemente fare due chiacchiere ti aspetto nei commenti 🙂

Usare BEM con SCSS | Scrivere facilmente CSS manutenibili

Ciao! In questo articolo ho deciso di parlare di come sto approcciando ultimamente la scrittura dei miei fogli di stile, in particolare di come applicare la metodologia BEM a SCSS per facilitarmi la stesura di codice ripetitivo. Ma partiamo dalla base:

Cos’è BEM?

Per spiegare cos’è BEM partiamo dalla definizione presente su getbem.com

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

In pratica quando usiamo l’acronimo BEM non intendiamo nessun nuovo tool, framework o prodotto, bensì stiamo parlando di una metodologia per scrivere il nostro CSS in maniera corretta, riusabile e manutenibile

Se non conosci ancora questa metodologia e sei interessato ad approfondire il tutto puoi partire da qui.

Adesso andrò a sviluppare un blocco con degli elementi e modificatori e poi successivamente ti farò vedere come il tutto viene snellito tramite l’uso di SCSS.

Gestiamo i blocchi (Block)

Un “blocco” in BEM è considerato come un’entità autonoma. Non deve mai dipendere da nessun’altra parte del tuo DOM. Questo lo rende riusabile e trasferibile in qualsiasi momento.

Vediamo ora come si gestisce un blocco con del semplice CSS

Una volta definito il nostro bel blocco passiamo agli elementi (Element)

Gestiamo gli elementi (Element)

Gli elementi non sono altro che la parte di un blocco.

Esistono delle regole ben precisi per gli elementi:

  • Ogni elemento è legato semanticamente al suo blocco.
  • Ogni nodo del DOM all’interno di un blocco definito può essere un elemento.
  • All’interno di un determinato blocco, tutti gli elementi sono semanticamente uguali.

Prendiamo l’esempio di prima e aggiungiamo un elemento:

Semplice vero? Passiamo adesso ai modificatori

Gestiamo i modificatori (Modifier)

I modificatori non sono altro dei flag che possono essere applicati ai blocchi o agli elementi per definirne lo stato

In questo caso il modificatore .block--white farà diventare i blocchi a cui è applicato che di base hanno sfondo nero e colore del testo bianco, con sfondo bianco e colore del testo nero. Inizi a capire come un semplice modificatore può permetterti di “riciclare” codice HTML e CSS?

Ora logicamente ogni blocco può avere un variato numero di modificatori, che quando cresce può allungare di parecchio il nostro CSS

Quindi è giunto il momento di ottimizzare un po’ la scrittura del nostro foglio di stile e SCSS fa proprio al caso nostro

Usiamo SCSS

Rivediamo l’esempio scritto utilizzando però SCSS e l’operatore & che può venirci in soccorso

Una volta compilato il nostro codice porterà ad avere questo risultato:

Fenomenale vero? Con un singolo operatore evitiamo le ripetizioni del nome del blocco ottimizzando il tutto.

Logicamente l’operatore & non è l’unica cosa che può aiutarci nella scrittura, ricordiamoci anche che esistono le variabili!

La compilazione del codice qui sopra sarà uguale a quella riproposta prima, sta a te scegliere la strada che preferisci per ottimizzare il tutto.

Conclusione

All’inizio BEM è abbastanza odioso, ma alla fine, una volta appresa la metodologia, mi ha reso la vita  molto più semplice e il mio codice molto più manutenibile. Logicamente ci saranno altre strade per scrivere BEM in SCSS, se usi metodi alternativi, scrivili nei commenti!

Alla prossima 😀

 

Cos’è Gulp? I primi passi con questo task manager!

Se hai mai sviluppato applicazioni web sicuramente ti sarai scontrato con “noiose” operazioni come minificazione dei file, transpilling di codice, ottimizzazioni immagini e tanto altro ancora.

Scopriamo come Gulp ci può aiutare a velocizzare questi processi e dare una marcia in più alla nostra produttività e non solo.

Cos’è Gulp

Per iniziare partiamo della definizione che troviamo sul sito gulpjs.com

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Detto in parole povere, Gulp è di fatto un task manager che si appoggia a Nodejs, una piattaforma basata sul runtime javascript di Chrome (V8) che ci permette di utilizzare il linguaggio anche al di fuori di un web browser.

Uno dei principali vantaggi di Gulp rispetto ad altri tool simili (vedi GruntJs), è il fatto di utilizzare gli streams per gestire il flusso dei files su cui effettuare le operazioni, garantendo una maggiore velocità e flessibilità (ad esempio non sarà necessario scrivere dei files temporanei durante le elaborazioni richieste).

Installazione

Come detto nel punto precedente Gulp si appoggia a Nodejs per poter funzionare, quindi dovremmo avere installato precedentemente Node sulla nostra macchina.

Insieme a Node potremmo utilizzare NPM (il gestore pacchetti di Node) per poter installare Gulp nel sistema in modo da porterlo usare da riga di comando.

Quindi apriamo il terminale e digitiamo:

npm install --g gulp

Fatto questo adesso dobbiamo installare Gulp come dipendenza del nostro progetto, quindi andiamo nella root del nostro progetto e digitiamo sempre su linea di comando:

npm install gulp --save-dev

Una volta installato il tutto possiamo iniziare ad utilizzare Gulp. L’ultimo passo necessario è creare un file (sempre nella cartella principale del progetto) dove saranno collocati i vari task da eseguire, con il nome di gulpfile.js.

Il nostro primo task

Andiamo a creare adesso il nostro primo task in Gulp, vediamo ad esempio come creare un task per minimizzare i nostri file Javascript.

Per poter gestire le svariate operazioni Gulp vanta di un gran numero di plugin sviluppati e pronti all’uso.

Nell’esempio utilizzeremo 2 plugin:

  • gulp-uglify
  • gulp-rename

Installiamo i plugin tramite NPM
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev

Una volta installato il tutto passiamo al nostro gulpfile.js e scriviamo il nostro primo task che chiameremo scripts

Approfondiamo questo snippet:

Nella prima parte andiamo ad includere i plugin di Gulp che faranno poi il “lavoro sporco” per noi (in realtà Node gestirà l’inclusione tramite la funzione require), mentre nella seconda parte andiamo a definire le operazioni che il nostro task svolgerà (le ho commentate riga per riga).

Per vedere il risultato del task basta lanciare da linea di comando:

gulp scripts

Dopo l’esecuzione, tutti i file .js presenti nella cartella dev/js verranno minificati, rinominati e incollati nella cartella dist/js niente male vero?

Approfondiamo

Come faccio a lanciare più task con un singolo comando?

Passando come secondo parametro alla funzione gulp.task un array contenente il nome di altri tasks questi verranno eseguiti prima del corpo del task stesso, in pratica come se fossero delle dipendenze. Inoltre, denominando il task default, questo potrà essere invocato da riga di comando semplicemente con il comando gulp.

 

Come posso rilanciare i task ad ogni modficia senza utilizzare il comando “gulp” da linea di comando?

Gulp per evitare questa piccola scocciatura mette a disposizione dei watcher

La funzione gulp.watch permette di “osservare” determinati files ed eseguire automaticamente una serie di tasks (definiti nel secondo parametro) quando uno di questi viene modificato: possiamo così lanciare il comando una sola volta all’inizio della sessione e poi continuare a programmare senza preoccupazioni, poichè Gulp provvederà ad ogni modifica fisica del file a rilanciare automaticamente i nostri task!

Conclusione + piccolo regalo

Come avrai capito le potenzialità di Gulp sono elevatissime e permettono grazie alla combinazione con tantissimi tool (Babel, Webpack, Browserify ecc…) una gestione profonda del nostro codice e degli automatismi da cui esso dipende.

Logicamente il seguente articolo vale da introduzione a tutto ciò, lascio a te il compito di approfondire il tutto.

Prima di andare ti vorrei lasciare però un piccolo regalo, ho creato su Github una semplice repo con uno starter di progetto con Gulp, puoi tranquillamente clonare o fare una fork del progetto. Se hai consigli o suggerimenti puoi invece utilizzare i commenti.

Alla prossima! 🙂