Come avere un primo contatto alla Star Trek con REACT JS senza andare incontro a un TSO: overview

Certo la fanno facile i cacciatori di taglie (e non di teglie!) alla ricerca di giovani talenti nella programmazione. Adesso i giovani scapestrati senza esperienza per poter essere incorporati in grandi aziende dovrebbero conoscere tutte le nuove tecnologie lato server legate al moderno javascript sempre mutevole come un virus, ma la domanda da porci è: ma quanti anni hanno vissuto questi giovani sbarbatelli per apprendere e assimilare ogni tecnologia con l’esperienza? Se ti lanci per imparare Vue non puoi imparare anche React ed Angular, ci vogliono mesi anni di impegno sopra progetti reali. Certo ma alla fine javascript rimane sempre lo stesso, tranne che per Angular dove diventa una sorta di dialetto ribattezzato Typescript, quindi non c’è da preoccuparsi di fronte a tutta questa complessità. L’importante è muoversi con cautela senza chiedersi come mai il LEM che è sbarcato sulla luna usava istruzioni in sequenza con la programmazione procedurale per arrivare all’ obiettivo. Erano altri tempi, la programmazione orientata agli oggetti era un altra cosa e prossima a venire. React è stato inventato da quelli di Facebook ed è un framework per creare interfacce utente. Semplificando una potentissima libreria che guarda caso nell’ interpretazione moderna di javascript usa necessariamente NODE con il gestore di pacchetti NPM. Iniziamo a capire come mai REACT è così tanto richiesto dai cacciatori di taglie. Basta partire dal simbolo che usa come brand: un atomo. Questa scomposizione a livello atomico mette l’accento su una delle sue principali caratteristiche benefiche e cioé quella della riusibilità del codice componenti: il motivo è intuitivo se ho un mattoncino lego che mi serve per una applicazione, essendo quel meccanismo ridotto ai minimi ternmini come un atomo, potrò riutilizzarlo in altri progetti. Da qui ne deriva una grande semplicità a livello di logica e anche fantastiche performances nel rendering del DOM perchè utilizza un meccanismo inedito che è quello del VIRTUAL DOM che garantisce una perfetta reazione agli input dell’ utente. Per poter avvicinarsi a REACT servono quindi come conoscenze acquisite HTML, CSS e JS, in teoria niente di trascendentale anche se JS ha un potenziale di esplorazione che ci terrebbe impegnati per tutto il resto della nostra vita di comuni mortali, tra l’altro è sempre di più usato per sviluppare giochi con librerie esterne dedicate, ecco un esempio di game simple: https://www.farwebdesign.com/projectgame/. Per il nostro sviluppo in REACT abbiamo bisogno di NODE, NPM, un browser come Google Chrome che offre un supporto ottimo per gli sviluppatori tra cui un plug-in dedicato a React come react developers tool e un buon editor come Visual Studio Code o Atom o altri. A questo punto subentra la famosa espressione magica di mago Merlino usata in uno dei film più belli della storia del cinema, ossia Exalibur di Borman degli anni ottanta: “nal natrak, utvas betod, do kiel dienve” che vuol dire, iniziamo a sviluppare (che per funzionare in react ha bisogno di un componente JSX che ha a che fare con XML per tradurre il codice sorgente):

npx create-react-app esempioreact

aNpx è uno strumento integrato in NPM che esegue pacchetti eseguibili. Alla fine di questa operazione mi crea il famoso package.json nella root della cartella che io ho scelto di chiamare esempioreact, alla fine del processo comparirà un lungo messaggio di benvenuto e vedremo che nel frattempo la nostra directory si sarà di molto allungata rispetto al primo step di creare il file con estensione JSON:

Success! Created esempioreact at C:\Users\Umbriaway\Desktop\esempioreact
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd esempioreact
npm start

Happy hacking!

A questo punto se ci sentiamo di andare controcorrente potremmo stravolgere la buona usanza nel mondo della programmazione che vuole digitare il nostro primo programma con la fatidica frase: ciao mondo! Diciamo che ci piace ricordare Kubrik con le sue inquadrature in Shining di Nicolson e cambiamo il tutto per generare il nostro primo programma con REACT, che prevede di stampare a video la criptica affermazione: IL MATTINO HA L’ORO IN BOCCA. Come procedere? Generiamo l’applicazione ciao-mattino, quindi inizializziamo quanto creato in precedenza:

npm init react-app esempioreact

A questo punto abbiamo due possibilità, aprire la cartella di lavoro con Visual Studio Code, digitare CTRL + O accentata e da terminale digitare

npm start

oppure da finestra di comando fare lo stesso con npm start e comparirà il messaggio che apre una finestra localhost:

Local: http://localhost:3000

Da qui comparirà fisicamente l’oggetto creato ossia la finestra del browser che mi mostrerà:

Il mattino ha l’oro in bocca, Gary

 

questo è l’output generato dal file index.js presente dentro la cartella SRC della root, dentro ho scritto:

import React from ‘react’;
import ReactDom from ‘react-dom’;

function MattinoOro({name}) {
return (
<h1>Il mattino ha l’oro in bocca, {name}</h1>
);
}

ReactDom.render( <MattinoOro name=”Gary”/>,

document.querySelector(‘#root’));

Ora da capire c’è che REACT crea prima di effettuare le modifiche vere e proprie sulla pagina CREA una RAPPRESENTAZIONE VIRTUALE SUA DEL DOM perché lo aiuta a fare il rendering. E così siamo riusciti a creare la nostra prima applicazione ma non posso certo trasportare cento mega byte di aplicazione su server Aruba o competitors per cui la domanda è posso costruire una BUIL leggera per vedere l’applicazione REACT sul mio sito Internet? Si con il comando:

npm run build

crea un pacchetto semplificato per le visualizzazioni statiche in BUILD! Come primo contatto in REACT ci siamo, andare oltre con tutti questi preliminari acquisiti significherebbe fare il passo più lungo della gamba!