web design umbria
react, web design Umbria, web developer Umbria

REACT lato server: INTRODUZIONE

web design umbria

All’ indirizzo https://umbriawayformazione.wordpress.com/2020/05/30/imparare-react-analizzando-casi-concreti-da-inclassificato-a-grande-maestro-in-sette-giorni/ abbiamo visto come costruire applicazioni lato client sulla parte statica HTML importando librerie esterne compreso il traduttore. Adesso vediamo perchè ci conviene passare sull’ altra sponda con JavaScript lato Server con Node, NPM etc. La prima obiezione che salta subito all’ occhio è “ma è così semplice fare tutto HTML, quello che scrivo si capisce“. Nel modo moderno di usare REACT invece devo conoscere la finestra terminale e impartire comandi del tipo:

  • npm -v (per verificare se ho installato il manager di Node, quello che mi fa arrivare in casa qualsiasi cosa (moduli)
  • node -v (il motore che gestisce la parte server di JS)
  • npm install -g create-react-app (comando che serve a dire globalmente al sistema che può creare applicazioni con la libreria react)
  • create-react-app mia-applicazione (dopo essersi posizionati sul desktop questo comando crea il progetto mia-applicazione che userà tecnologia react)
  • avere familiarità con comandi come cd mia-applicazione e npm start (per far partire il programma)
  • avere familiarità con i metodi di pubblicazione a produzione con npm run build (crea un index.html nella cartella build che sarebbe il corrispettivo del nostro https://www.farwebdesign.com/projectreact/react_14.html)
  • avere familiarità con il package.json e gli script a sostegno e le dipendenze associate nel file
  • essere in grado di creare la cartella node_modules con il comando npm install o npm i
  • saper lanciare i programmi appunto con npm start
  • saper costruire le build
  • saper servire in rete le buil con comandi come npm install serve – g e serve – s build che mi danno la possibilità di vedere il risultato finale su localhost

Ora la domanda critica é: perchè devo imparare tutte queste cose quando le posso evitare facendo solo la parte statica con il metodo: https://www.farwebdesign.com/projectreact/react_14.html ??? La risposta è semplicissima: perchè dopo un primo periodo di trauma ci si accorge che tutto è più ricco di risorse e veloce; perchè ci guadagna l’organizzazione di codice in quanto tutti gli snippet vengono separati adeguatamente al contrario di quello che si legge nell’ HTML. Vediamo dal vivo, il vecchio HTML statico era così composto:

 

<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>

vediamo cosa contiene la cartella SRC strutturata nel nuovo modo di creare applicazioni lato server, il file index.js:

import React from “react”;
import ReactDOM from “react-dom”;
import “./index.css”;
import App from “./App”;
import * as serviceWorker from “./serviceWorker”;

const lakeList = [
{ id: 1, name: “Echo Lake”, trailhead: “Echo Lake” },
{ id: 2, name: “Maud Lake”, trailhead: “Wright’s Lake” },
{ id: 3, name: “Cascade Lake”, trailhead: “Bayview” }
];

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

e cosa contiene il file App.js, sempre all’ interno della stessa cartella SRC, importato e richiamato dal metodo render con la A maiuscola?

import React from “react”;

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

export default App;

 

il risultato finale quando si lancia il tutto dopo aver installato le dipendenze con npm install seguito da npm start è esattamente lo stesso che https://www.farwebdesign.com/projectreact/react_14.html , con la differenza sostanziale che non devo scrivere a mano nulla rispetto a CSS da integrare o altro perchè l’applicazione è tutta collegata all’ unisono. Nello specifico si noti come la index richiami il componente, isolato e riutilizzabile come vuole la filosofia atomica di react per altri usi e consumi!

CONCLUSIONI:

Dopo uno sbandamento iniziale che può durare a lungo si entra progressivamente nell’ area dei benefici che la nuova tecnologia offre. Quindi è meglio abbandonare da subito la logica seguita nel corso di https://umbriawayformazione.wordpress.com/2020/05/30/imparare-react-analizzando-casi-concreti-da-inclassificato-a-grande-maestro-in-sette-giorni/ e sposare subito la nuova filosofia che diventerà una sorta di esercizio di addestramento fatto su un cavallo indisponente e burrascoso che non vorrà lasciarsi ammansire in vista del palio!

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/