web developer umbria

Quando un uomo con la teoria incontra uno con la pratica, quello con la teoria é un uomo morto , cit Clint su REACT

frontend developer umbria

Ho deciso di allargare le mie competenze integrando gradualmente REACT tra uno sviluppo e l’altro di vecchi progetti in procedurale con Codeigniter. Andando a scartabellare su https://umbriawaysemplifica.wordpress.com/ i due articoli introduttivi, la prima parte su installazione, piccoli esempi per neofiti e componenti é chiara e si capisce ma la seconda con la dissertazione teorica sui props, hooks , cicli di vita e chi più ne ha più ne metta mi ha lasciato molto perplesso in assenza di esempi concreti da portare come riscontro toccando con mano codice da mandare in esecuzione che a sua volta mostra l’effetto che fa. Quindi in questo post cercherò di strappare qualche info che può aiutarmi a capire meglio la teoria cercando esempi concreti che fortunatamente ho trovato sul funzionale devacademy, indirizzo https://devacademy.it/ , che presenta un corso sull’ introduzione a REACT mostrando cose pratiche e concrete! Ricominciamo dalle basi quindi in modo da alzare l’asticella rispetto ai due articoli apparsi su https://umbriawaysemplifica.wordpress.com/ :

frontend developer

A occuparsi della gestione del DOM é il modulo react-dom. Come sappiamo il virtual dom in REACT é un modo semplice per scoprire le differenze rispetto al refresh precedente in modo da visualizzare i cambiamenti. Ad essere lento non è il Dom in se, ma il browser che deve ricostruire la pagina.

Create-React-App é una parte del comando che serve a generare un’app react senza configurazione manuale

React serve a generare interfacce utente veloci e funzionali

Il metodo render di ReactDOM viene utilizzato per agganciare App nel nodo root della index.html

JSX è un linguaggio completamente diverso da JavaScript e unico nel suo genere ad esempio un metodo equivalente alla sintassi JSX lo ritroviamo nel metodo React.createElement

detto questo anche il concetto di PROPS va ulteriormente vivisezionato. In inglese plurale parliamo di PROPRIETA’, ad esempio potrei scrivere un componente dove ho un TITLE e un MSG generico che però potrei personalizzare usando le proprietà precedute dalla parola chiave THIS che indica al framework l’oggetto corrente. In questo modo lo stesso componente potrà ricevere valori in ingresso che non sono da personalizzare ogni volta all’ interno del codice, ma sono dinamicamente agganciati all’ esterno. Pensiamo a una applicazione che calcola l’orario a Mosca a Londra a Roma e a Los Angeles. L’orario che é il risultato dei calcoli differenziali fatti con l’offset, cioé con il dato che indica il fuso orario (Roma sarà zero), é un valore dinamico che viene stampato a video tramite i PROPS che guarda caso diventa anche l’elemento più significativo di tutta l’applicazione, visto che la funziona che fa i calcoli si trova all’ esterno del componente. E anche la questione del ciclo di vita di un componente che negli articoli citati non era chiara di suo qui acquista un altro significato. Ipotizziamo di inserire l’applicazione che calcola gli orari delle città del mondo dentro un componente CARD (magari usando un framework semplice come BULMA, indirizzo https://bulma.io/ ) che ha solo due elementi significativi, ossia città e orario corrente. Ne consegue che ogni città avrà la sua CARD specifica che a sua volta avrà un INIZIO attività, un PERDURARE dell’ attività e anche una fine dell’ attività o morte del componente, aree circoscritte dove bisogna per la cosiddetta BEST PRACTIS andare a delimitare le funzioni scritte precedentemente, in modo anche da evitare errori quando andiamo a curiosare sull’ oggetto CONSOLE del BROWSER. Se non si fa questa operazione non succede nulla di irreparabile ci verrà solo segnalato un WARNING dal debug ma dal punto di vista della costruzione impeccabile i cicli di vita andrebbero definiti intorno alle funzioni critiche del nostro componente, questo se vogliamo essere più bravi e seri rispetto ad altri smanettoni!

Sostanzialmente é bastato vedere dal vivo nella pratica come principi astratti estrapolati dai libri trovino un rendimento sicuro SE applicati in esempi reali dove le APP esistono e diventano funzionali, con poche parole ma tanti fatti! Come al solito Clint ha ragione!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...