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