web design umbria
react, web developer Umbria

Imparare REACT analizzando casi concreti: da inclassificato a Grande Maestro in sette giorni!

web design umbria
Sette Kg in sette giorni?

No, sette kg in sette giorni era un film comico con Pozzetto e Verdone, al massimo REACT ci può entrare sotto pelle se lo facciamo otto ore al giorno per almeno un semestre o giù di lì, lavorando su progetti concreti. Negli scacchi sportivi si parte a giocare dal livello inclassificato dopodichè se l’agonista si applica può arrivare al massimo titolo dopo alcuni anni di pratica giocata che è quello di GM (se ha le risorse necessarie e il talento, altrimenti si ferma prima). Qui è lo stesso, da inclassificati ci tocca analizzare caso per caso facendo le dovute premesse. Prima di tutto fra i prerequisiti servono competenze di base di HTML, CSS e JS. In particolare le funzioni arrow freccia sono tipiche di ECMASCRIPT 6, ossia l’ultima versione di js ricca di novità per cui anche qui si dovrebbe almeno sulla carta avere un pò di domestichezza. Tuttavia possiamo colmare il divario almeno rispettando Pareto e la regola ottanta venti: su ottanta minuti dedicati allo studio di REACT almeno venti minuti se ci si applica possono diventare competenze acquisite? Quindi partiamo senza dimenticare che i nostri browser hanno bisogno di implementare il plug-in react che analizza la corretta visibilità degli script marcati dai tag <script> di apertura e chiusura delle nostre pagine WEB. C’è inoltre da chiarire che fare APP con NODE (javaScript lato server) ha un modus operandi diverso dall’ analisi qui riportata, che essendo di primo livello, quindi adatta a chi inizia a giocare a scacchi non senza ambizioni e velleità, si presta solo alla parte statica terra-terra delle implementazioni senza terminale che automatizzano i processi e complicano anche la vita se non si conosce la struttura di una APP lato server(tradotto, saltare a javaScript lato server non è un processo indolore). Quindi installato il plug-in che ci segnala errori sui componenti react possiamo partire analizzando lo script presente all’ indirizzo: https://www.farwebdesign.com/projectreact/react_1.html ; bellissimo progetto non si vede nulla se non il bianco più profondo, magari gli esquimesi possono tradurre il termine NEVE in sette modi diversi ma noi qui che abbiamo fatto? In sostanza abbiamo messo i link al framework per farlo lavorare localmente lato client (cosa che ovviamente non servirebbe gestendo tutto con NPM). Molto importante invece il DIV contrassegnato da id=”root” in quanto è proprio quell’ area che farà il lavoro sporco:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
</body>

Adesso analizziamo il file https://www.farwebdesign.com/projectreact/react_2.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript”>
ReactDOM.render(
React.createElement(
“h1”,
{“style”: {“color”: “red”}},
“Creare é dare una forma al proprio destino – A Camus”
),
document.getElementById(“root”)
);
</script>
</body>

Qui al posto di ciao mondo abbiamo sostituito una frase di Camus che risulta anche mozzata perchè nell’ head andrebbe inserito il TAG <meta charset=”utf-8″> per l’esatta interpretazione dei caratteri a video, a noi interessa l’analisi di react per cui notiamo che siamo di fronte a una doppia funzione nidificata, ossia una scatola dentro la scatola. Quella esterna che è ReactDOM.render (vedere https://it.reactjs.org/docs/react-dom.html ) è responsabile di visualizzare graficamente i contenuti della funzione interna che con il metodo createElement ( vedere https://it.reactjs.org/docs/react-api.html#createelement ) riempe di contenuti la cornice. Vitale è l’istruzione finale javascript document.getElementById(“root”) che come si sottolineava prima serve a sparare tutto il contenuto creato in un punto preciso e cioé nel div che ha un nome e un cognome (root)! Ancora da analizzare ci sono le graffe dentro le graffe, in quanto ci sono delle proprietà che verranno riversate sul selettore. Quando non ci sono proprietà nell’ oggetto dobbiamo impostare a NULL il valore. Analizziamo ora https://www.farwebdesign.com/projectreact/react_3.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript”>
ReactDOM.render(
React.createElement(
“div”,
null,
React.createElement(
“h1”,
null,
“Creare é dare una forma al proprio destino – A Camus”
)
),
document.getElementById(“root”)
);
</script>
</body>

Qui compare il NULL che si diceva prima ossia NON CI SONO PROPRIETA’ per l’oggetto renderizzato. Manca sempre il <meta charset=”utf-8″> che fa guai sulle stringhe di testo ma non ci importa perchè la nostra attenzione è rivolta sulla parte dinamica. Qui viene creato un elemento div che diventa padre dell’ elemento h1 e questo ci porta ad analizzare una situazione molto importante perchè REACT appoggiandosi a un DOM virtuale che traduce prima di quello reale ha bisogno di decodificare bene il codice HTML per renderlo digeribile al rendering della pagina che ha bisogno di un traduttore che ha un nome e cioé JSX, infatti così il div come è segnalato ci crea problemi, vediamo allora il codice sorgente di https://www.farwebdesign.com/projectreact/react_4.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
https://unpkg.com/@babel/standalone/babel.min.js
</head>
<body>
<div id=”root”></div>
<script type=”text/babel”>
ReactDOM.render(
<h1>Creare ̩ dare una forma al proprio destino РA Camus</h1>,
document.getElementById(“root”)
);
</script>

Qui abbiamo aggiunto un link esterno con CDN , un traduttore di nome BABEL che interpreta (come dovrebbe fare il charset menzionato prima che manca per le frasi) correttamente i TAG per il parser REACT che deve macinare le istruzioni delle funzioni per renderle compatibili con il DOM virtuale e successivo rendering. Infatti anche la dicitura sullo script è cambiata passando a script type=”text/babel”. Da questo momento avendo inserito il famoso traduttore JSX (vedere https://it.reactjs.org/docs/faq-build.html#gatsby-focus-wrapper ) di REACT non dovremmo più avere anomalie sull’ impostazione base. Vediamo il content di https://www.farwebdesign.com/projectreact/react_5.html , la parte head è per comodità tranciata visto che rimarrà invariata rispetto a prima per tutto il prosieguo, prenderemo in esame da ora in poi solo il contenuto del body:

<div id=”root”></div>
<script type=”text/babel”>
let city = “Assisi”;

ReactDOM.render(
<h1 className=”heading”>Hello {city}</h1>,
document.getElementById(“root”)
);
</script>

Qui siamo di fronte a un classico ciao Assisi (W il Glocal!) con testo stilizzato . Da notare come il contenuto della variabile city sia iniettato nel corpo del render grazie all’ uso delle graffe {}. Andiamo oltre analizzando il corpo della pagina con https://www.farwebdesign.com/projectreact/react_6.html:

<div id=”root”></div>
<script type=”text/babel”>

const Hello = () => {
return (
<div className=”heading”>
<h1>Creare ̩ dare una forma al proprio destino РA Camus</h1>
</div>
)
};

ReactDOM.render(
<Hello />,
document.getElementById(“root”)
);
</script>

Qui siamo di fronte a una incredibile novità! possiamo dichiarare una costante e all’ interno del suo valore costruire una funzione con un valore di ritorno che non fa altro che comporre tutto il div critico contrassegnato da id=”root”, per cui ci basterà assurdamente richiamare solo il nome di questa costante per invocare tutto quello che rappresenta. Magia! C’è anche un className=”heading” che possiamo stilizzare nell’ head come vogliamo settando la classe. Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_7.html:

<body>
<div id=”root”></div>
<script type=”text/babel”>

const Hello = ({library, message}) => {
return (
<div className=”heading”>
<h1>Welcome to {library}</h1>
<p>{message}</p>
</div>
)
};

ReactDOM.render(
<Hello library=”React” message=”Enjoy!”/>,
document.getElementById(“root”)
);
</script>
</body>

Sempre più difficile! Qui abbiamo un componente che accetta due parametri di ingresso prima di sparare tutto il suo contenuto a video, per cui possiamo personalizzare il nostro oggettino decidendo di volta in volta cosa far comparire. La costante Hello che contiene tutto, deve avere la prima lettera rigorosamente maiuscola per poter essere invocata correttamente nel metodo render. Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_8.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

const App = () => (
<div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
);

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Qui in sostanza con una funzione definita secondo la nuova nomenclatura js6 ARROW FRECCIA (una funzione in forma sintetica) definiamo come il valore di una costante debba essere formattato, in questo modo posso dire che ogni attributo name della costante Lake deve uscire sulla pagina con intestazione1 (h1). Questo avviene all’ interno di un COMPONENTE definito App il quale prima eredita sui suoi contenuti l’operazione descritta in precedenza e dopo si dà in pasto con un semplice TAG alla funzione ReactDOM.render che delegherà a document.getElementById di trasmettere i dati al div contrassegnato da ID=”root”. dA NOTARE E APPREZZARE QUINDI COME UN SEMPLICE tag COME <App /> sia utilizzabile a livello atomico! Vediamo https://www.farwebdesign.com/projectreact/react_9.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
render() {
return (
<div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Qui abbiamo migliorato l’organizzazione del codice precedente e compattato tutto dentro un valore di ritorno del componente APP che adesso è completamente autonomo, non per questo REACT segue il principio della scomposizione molecolare e della riutilizzabilità del codice atomico, cioè la singola parte che non é più divisibile. Da notare l’uso di extends React.Component e render dentro il componente. Vediamo il corpo della pagina https://www.farwebdesign.com/projectreact/react_10.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
state = {
loggedIn: false
}
render() {
return (
<div>
<div>The user is {this.state.loggedIn ? “logged in” : “not logged in”}.</div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>
</body>

SIamo alla presenta agli STATI (vedere https://it.reactjs.org/docs/state-and-lifecycle.html ) e a come vengono ingeriti dal componente APP che nasce come estensione della classe genitore React.Component. In sostanza impostando il valore della variabile loggedIn a false sotto l’operatore ternario dice che se questa variabile ha un valore vero scrivi a video logged in altrimenti esegui l’istruzione contraria, una semplice istruzione condizionale espressa in formula veloce sintetica in una sola riga seguendo la sintassi dei ? e dei : al posto degli IF ed ELSE. Il resto rimane invariato. Analizziamo il contenuto del body in https://www.farwebdesign.com/projectreact/react_11.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
state = {
loggedIn: false
}
logIn = () => this.setState({loggedIn: true})
logOut = () => this.setState({loggedIn: false})
render() {
return (
<div>
<button onClick={this.logIn}>Log In</button>
<button onClick={this.logOut}>Log Out</button>
<div>
The user is {
this.state.loggedIn
? “logged in”
: “not logged in”}.
</div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Questo esempio invece mostra come INTERCETTARE GLI EVENTI seguendo la logica dell’ OPERATORE TERNARIO, vediamo come premendo su ogni rispettivo pulsante si ha una risposta all’ evento onclick che risponde segnalando vero o falso a seconda della scelta. l’ESPRESSIONE this.state.loggedIn fa riferimento alla funzione dell’ oggetto corrente che ha una proprietà valorizzata a false. Vediamo https://www.farwebdesign.com/projectreact/react_12.html solo il corpo della pagina:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;
const SkiResort = ({name}) => <h1>{name}</h1>;

const App = ({summer}) => (
<div>
{summer
? <Lake name=”Lago Trasimeno”/>
: <SkiResort name=”Monte Pennino”/>}
</div>
)

ReactDOM.render(
<App summer={false}/>,
document.getElementById(“root”)
);
</script>

Qui gioco sulle vacanze da passare al lago o in montagna. L’operatore ternario lo abbiamo già visto prima e sappiamo come funziona. Il punto ? interrogativo ossia IF corrisponde di default a VERO altrimenti else o : corriponde a FALSO come valore booleano. Ma il componente quando viene dichiarato all’ interno del metodo render accetta l’impostazione a false di default per cui si annulla la condizione vera che era quella di vai al trasimeno se non succede altro, ma qui summer nel corpo del render è valorizzato a false, quindi l’altro succede! Ovviamente impostando nel render summer a true ci toccherà andare in vacanza al lago Trasimeno (che dispiacere!). Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_13.html dove vediamo in azione un ciclo che prende gli elementi da un array e li fa girare:

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
“Lago Trasimeno”,
“Lago di Corbara”,
“Lago di Piediluco”
];

const App = ({lakes}) => (
<ul>
{lakes.map((lake, i) =>
<li key={i}>{lake}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

Questo è solo un ciclo, il componente è scomparso! Esiste una costante che genera un ciclo comprensivo di HTML che ha bisogno di un’altra costante per avere del contenuto da macinare, infatti si legge <App lakes={lakeList}/> con la A iniziale rigorosamente maiuscola (altrimente verrebbe segnalato errore) e dove lakeList è il contenuto dell’ armadio definito fuori contesto e presente come entità autonoma (o atomica visto il logo react!). Vediamo infine https://www.farwebdesign.com/projectreact/react_14.html dove viene proposta una soluzione per far ciclare gli elementi di un array che non hanno un solo valore assegnato ma più di uno da stampare a video:

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
{id: 1, name: “Lago Trasimeno”, trailhead: “Volare”},
{id: 2, name: “Lago di Corbara”, trailhead: “Sognare”},
{id: 3, name: “Lago di Piediluco”, trailhead: “Ammirare”}
];

const App = ({lakes}) => (
<ul>
{lakes.map(lake =>
<li key={lake.id}>{lake.name} | Trailhead: {lake.trailhead}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

Lo script è uguale al precedente come logica ma qui l’array è più complesso perchè non ha un solo valore associato all’ oggetto, ma bensì ospita due proprietà, name e trailhead. Abbiamo coppie di chiave/valore che hanno delle assegnazioni da restituire a video. Definiamo in sostanza prima un array che si chiama lakeList e successivamente diciamo cosa farne di questi dati con il nome della funzione che si chiama lakes e che accetta come parametro da masticare nel ciclo proprio il nome della mia costante array (array che sono facilmente riconoscibili perchè nella sintassi generale sono definiti da parentesi quadre!)

CONCLUSIONI

REACT (inventato da quelli di Facebook!) risponde al trend delle curve di apprendimento indicato dal mercato dove Vue JS sembra il framework più facile da digerire, poi viene REACT JS e infine il demoniaco ANGULAR con Typescript (Champollion dove sei?); alla fine di questo lungo viaggio siamo riusciti almeno a farci promuovere a terza nazionale che è sempre un gradino basso per un agonista che gioca a scacchi, ma ricordiamoci che eravamo partiti da livello inclassificato che è ancora peggio. In ogni caso ricordiamoci che davanti ci sono ancora miriadi di categorie da percorrere e ci sarà molto da esplorare sulla parte server di REACT, con un ambiente di sviluppo molto complesso ma anche molto più ricco di risorse, dove le possibilità rispetto a queste lavorazioni statiche HTML aumentano a dismisura, non è un caso che questa tecnologia oggi sia richiestissima e di uso quotidiano nelle grandi multinazionali globali! La domanda é ma la legge di Pareto iniziale nell’ incipit dopo questa trattazione è stata confutata? Ai poster(i) l’ardua sentenza! In uno dei prossimi articoli cercheremo di capire come fare le stesse cose viste qui, ma lato server analizzando i comandi da impartire a finestra terminale. Ci accorgeremo che il modo di lavorare sarà completamente diverso perche NODE e NPM ci consentono implementazioni veloci e dipendenze strutturate, così tanto che è necessario conoscere l’anatomia del FILE SYSTEM progetto creato al momento della comparsa del famoso package.json! Insomma REACT lato server rappresenta a dir poco uno STRAVOLGIMENTO TOTALE ma dà anche più soddifazioni in termini di risultati di grafica e di funzionalità, tanto da arrivare a valutare seriamente di concentrarsi solo sulla parte SERVER che non è questa statica con agganci a librerie esterne CDN vista oggi, anche se JS NON CAMBIA da entrambi i lati della rete. Infine cosa molto importante per uno sviluppatore di REACT, consultare sempre giorno-notte-colazione-cena la documentazione specifica, in questo caso https://it.reactjs.org/