React Js

React è una libreria, fornita e supportata da GOOGLE per JavaScript per la gestione di front-end.
Sebbene possa essere usata senza NODE e senza usare un framework specifico, generalmente è utilizzata con un
toolchain, un framework, che basa su NODE; Questo perché questo utilizzo la rende molto ma molto più efficiente
nello sviluppo.
Per imparare ad apprendere correttamente REACT, tuttavia, è possibile prima apprendere l’uso della libreria in se e
poi apprendere il framework suddetto.
CDN o Scaricamento libreria

Per utilizzare REACT ci servirà di includere le librerie necessarie.
Sono utili, per il nostro scopo, la libreria di REACT vera e propria e la libreria di REACT-DOM, che contiene le classi e le
funzioni per la gestione del dom virtuale di react.
Le librerie di REACT si possono scaricare, apporre in una cartellina raggiungibile localmente dalla nostra applicazione
che dovrà farne uso, od utilizzare una CDN, ossia un percorso pubblico, raggiungibile a mezzo-rete; Ce ne sono
parecchie di CDN disponibili.
Il vantaggio nell’utilizzo di una CDN è nel fatto che si può farne uso agevolmente, basta disporre di una connessione
WEB, rende più leggera la applicazione e fa poggio sulla potenza di elaborazione del server che ospita la libreria, per
quanto riguarda l’elaborazione delle funzioni di react.
Tuttavia, esistono anche degli svantaggi: se la libreria non fosse raggiungibile, anche temporaneamente, per via di una
mancanza di connessione con il server o se venisse rimossa da quella posizione, le applicazioni che facessero poggio
sulla presenza in quella posizione della libreria potrebbero cessare di funzionare correttamente.
Lo scaricamento
Per scaricarla si può far riferimento alla pagina di download https://react-cn.github.io/react/downloads.html
Una volta scaricate le librerie e poste in una sottocartella della cartellina della nostra applicazione dovremo
semplicemente linkare come script javascript da includere le librerie REACT e REACT-DOM.
All’interno del pacchetto “.zip” ci saranno una cartellina con dentro altre cartelle e dei file. I file della libreria saranno
in una sottocartella denominata “build” e le librerie necessarie sono la react.js e react-dom.js o le loro versioni
minificate react.min.js e react-dom.min.js .
Per esempio, nella versone 0.14.3 di react, abbiamo una cartellina denominata react-0.14.3 con all’interno due sotto-
cartelle: build ed examples.
Le librerie sono sotto la sottocartella build. Quindi, apponendo la cartella principale react-0.14.3 nella medesima
cartella dove sarà presente il file che farà uso delle librerie e mantenendo inalterata la struttura, per includere
correttamente le librerie di react e react-dom sarà sufficiente scrivere:
<script src="react-0.14.3/build/react.js"></script>
<script src="react-0.14.3/build/react-dom.js"></script>
E’ possibile, più in generale, estrapolare solo i file “.js” dalla sua sotto-cartella, indipendentemente (peraltro) dalla
versione di react ed apporli in un apposito percorso raggiungibile.
Supponendo tale percorso essere “js/react”, a partire dalla posizione della pagina che ne farà uso, possiamo scrivere:
<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
Od anche
<script src="js/react/react-min.js"></script>
<script src="js/react/react-dom-min.js"></script>
Le CDN
In alternatviva, come detto già, si può far uso delle CDN.
Qui riportiamo alcune CDN, generalmente affidabili:
La CDN di UNPKG:
Qui abbiamo sia le librerie generalmente utilizzare per gli ambienti di sviluppo:
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
Che le librerie utilizzate per gli ambienti di produzione:
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
Le seconde sono minificate (compattate, occupanti meno spazio, più leggere, sebbene identiche dal punto di vista
delle funzioni, delle classi e dell’utilizzo)
Poi abbiamo
La CDN di cloudfire
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Esistono molte altre CDN, ma esula da questo corso l’onere di ricercare le varie CDN disponibili.
Creare un elemento di virtualDOM.
Il documento HTML, su una pagina, è composto da elementi, come è noto, che sono rappresentabili da dei TAG, che
però in memoria hanno una struttura corrispettiva ad oggetti.
Quindi si può rappresentare la pagina come una struttura di oggetti.
Per essere chiari, prendiamo questa struttura in tag della pagina


<HTML>
<HEAD>
<TITLE>My Document</TITLE>
</HEAD>
<BODY>
<H1>Header</H1>
<P>
Paragraph
</P>
<P>
Paragraph
</P>
</BODY>
</HTML>
Essa, in memoria, sarà rappresentata così:
Quindi, quando viene costruita una pagina usando dei tag HTML, quando viene aperta con il browser, questo legge il
codice e costruisce la struttura ad oggetti, dopodiché effettua un RENDER, ossia visualizza tale struttura seguendo il
protocollo HTML
Chi padroneggia JavaScript sa che con del codice JavaScript,
infatti, si può “agganciare” alcuni di questi oggetti e
modificarli, alternandone alcune caratteristiche a mezzo di
codice JavaScript e le modifiche
apportate saranno trasmesse in tempo reale al render sulla pagina.
Questa struttura è nota come DOM: Document Objects Model (modello di documento ad oggetti).
Con React è possibile creare degli elementi virtuali simili agli oggetti del DOM reale delle pagine.
Gli oggetti così creati con React si possono regolamentare, costruendo algoritmi che ne descrivano il comportamento,
uno stato, ecc…
Questi oggetti si chiamano ELEMENTI REACT e vanno a costituire una struttura che può essere trasposta in un
componente del DOM reale, un div generalmente.
Con react si possono costruire in vari modi oggetti di DOM virtuale, vari elementi react, associare ad essi
eventualmente dei valori e dei parametri ed infine si può renderizzare la struttura creando dentro un container, in
genere un DIV, una struttura corrispondente di DOM reale.
Lavorando il JavaScript su una struttura più contenuta e semplificata, quando vengono effettuate delle operazioni sul
DOM virtuale di React, sarà più veloce e leggero nell’operare.
React.createElement
Nella classe React c’è un metodo chiamato createElement.
Il metodo createElement di React consente di creare un elemento React.

I tipi di elementi possibili sono i corrispettivi degli elementi del DOM.
Gli elementi del DOM hanno sia un nome HTML che un nome JavaScript.
Per creare un elemento di virtualdom react è sufficiente usare il metodo createElement
Il metodo accetta in ingresso almeno 3 parametri:
- Un testo che indica il codice corrispondente al tipo di elemento più esterno (un div, un paragrafo, un link, ecc)
- Un oggetto JSON con i parametri eventuali associati all’elemento
- Uno o più parametri contenenti il codice contenuto nell’elemento (od un altro elemento di virtual-DOM, che
può essere generato con React.createElement o – come si vedrà – con il metodo alternativo React.DOM )
React.createElement([CODICE IDENTIFICATIVO ELEMENTO PIU’ ESTERNO], [PARAMETRI], [CODICE od Elemento], ….

[CODICE od Elemento]);
Per esempio, volendo creare un elemento di virtual-dom contenente un testo in grassetto, essendo che il testo sarà
contenuto in un tag <strong> … </strong> il testo “strong” sarà il codice identificativo dell’elemento più esterno, non
vi saranno parametri quindi indicheremo con null questo parametro di React.createElement ed il testo che deve
essere in grassetto sarà il codice contenuto; se il testo è “questo testo deve essere in grassetto”, il codice sarà:
React.createElement("strong", null, "questo testo deve essere in grassetto");
Questo metodo restituirà un oggetto JavaScript che corrisponderà ad una struttura HTML tipo:
<strong>questo testo deve essere in grassetto</strong>
Nota: Attualmente restituisce l’oggetto JavaScript, ma se non viene renderizzato su un componente presente sul DOM
non verrà visualizzato.
Se volessimo creare un elemento di virtual-dom che fosse un link, magari al sito di google ( https://www.google.it ), ed
il testo fosse “questo link punta a google”, il codice identificante l’elemento più esterno del virtual-DOM sarà:
“a” ed i parametri href saranno passati come secondo parametro di createElement, in questo modo { “href”:
“https://www.google.it” }; il codice sarà:
React.createElement("a", {"href": "https://www.google.it"}, "questo link punta a google");
anche qui Nota: Attualmente restituisce l’oggetto JavaScript, ma se non viene renderizzato su un componente
presente sul DOM non verrà visualizzato.
E’ possibile aggiungere il codice in più parti; il testo “questo link punta a google” può essere scritto anche in più pezzi:
React.createElement("a", {"href": "https://www.google.it"}, "questo link", "punta a google");
Così come è possibile accodare più codice testuale da inserire nel parametro di codice elemento, è anche possibile
includere direttamente un altro elemento React.
React.createElement(
"div", null,
"a",
{"href": "https://www.google.it"},
"questo link punta a google"
)
);
Ed è possibile giocare alternando più codici, elementi react e codici tesutali creare varie combinazioni.
"div",
null,
"Il seguente",
"a",
{"href": "https://www.google.it"},
"link "
),
"punta a google"
);
React.DOM
Il campo DOM di React fornisce un servizio simile a quello di createElement: restituisce un elemento di dom virtuale.
DOM appare come “sottoclasse” sotto cui c’è a sua volta un metodo per ogni tipo di elemento del DOM: div, ul, li, a, b,
strong, ecc.. La sintassi è pressappoco questa:
React.DOM([PARAMETRI], [CODICE od Elemento], …. [CODICE od Elemento]);
Per esempio per produrre un elemento di virtual-DOM contenuto in un DIV, con all’interno il codice “CIAO MONDO”,
si può usare il codice
React.DOM.div(null, "Ciao mondo");
Se vogliamo produrre un elemento react composto di più elementi annidati si può operare come per
React.createElement:
React.DOM.ul(null,
React.DOM.li(null, 'test1'),
React.DOM.li(null, 'test3')
);
SI possono anche mescolare gli usi annidati di React.DOM e React.createElement
React.DOM.ul(
null,
React.createElement("li", null, "test1"),
React.DOM.li(null, 'test3')
);
CIAO MONDO
Quasi tutti i corsi di programmazione, generalmente, iniziano con la classica produzione di una schermata in cui si può
leggere la frase “CIAO MONDO” o, in versione inglese, “HELLO WORLD”, od anche “IO SO PROGRAMMARE CON …”
Seguito dal nome del linguaggio o della libreria/tecnologia.
Anche in questo caso faremo così.
Essenzialmente, una volta incluse le librerie di React e React-DOM, è possibile creare degli elementi di virtual-dom con
React e poi renderizzarli, ossia visualizzarli, all’interno di un DIV messo preventivamente sul documento, sul DOM
reale.
In primis includiamo le librerie React e React-DOM; usiamo una CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Poco dopo predisponiamo un div all’interno del quale visualizzare il tutto; Di norma si usa un div denominato root,
come div principale.
<div id="root"></div>
Infine apriamo Il tag del codice JavaScript e scriviamo il codice:
<script >
const element = React.createElement("h1", null, "Ciao Mondo");
ReactDOM.render(element, document.getElementById('root'));
</script>
La prima riga, crea una costante (avrebbe potuto essere anche una variabile, costruita con var o con let )
Essenzialmente questo codice chiede di creare un oggetto h1 di virtual-dom (simile in tutto e per tutto a quello del
DOM reale) con all’interno il codice “Ciao Mondo”.
Il codice successivo, invoca un metodo del DOM virtuale di React:
Ossia chiede a ReactDOM di prendere l’oggetto React element, che contiene un h1 con all’interno il codice “Ciao
Mondo” e di renderizzarlo nel div di id root, ossia di creare l’equivalente del DOM nel div suddetto, con il medesimo
codice.
Il codice complessivo potrebbe essere:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>.:: React TEST ::.</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></
script>
</head>
<body>
<script >
</script>
</body>
</html>
Il risultato sarà una cosa di questo tipo.

Con React.createElement è possibile creare qualsiasi corrispettivo di VIRTUAL-DOM del DOM effettivo.
Supponiamo di voler creare un testo tutto in grassetto:
<script >
const element = React.createElement("strong", null, "questo testo dovrebbe essere tutto in grassetto");
</script>
Otterremo una cosa tipo:
La sintassi JSX
La JSX è una sintassi che consente di creare del codice ibrido JavaScript/HTML.
Secondo alcuni punti di vista molto gettonati, utilizzare con React questa sintassi consente di esprimere la
una maggiore potenzialità (secondo altri, invece, si tratterebbe di un passo indietro).
Usando Babel è possibile descrivere gli elementi di virtual-dom da costruire in un formato HTML inserendo
tale formato direttamente nel codice JavaScript.
Perché questa sintassi funzioni, tuttavia, è necessario che il browser supporti la sintassi JSX, oppure, che
venga inclusa la libreria BABEL di JavaScript che fa da parser, traducendo in sintassi JavaScript
automaticamente la sintassi JSX.
Perché la sintassi JSX funzioni, quindi, anzitutto va inclusa, assieme alle librerie di REACT anche la libreria
Babel. La libreria si può includere con la CDN :
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Una volta inclusa, al di la di React, si potrà scrivere codice IBRIDO JavaScript/HTML e ci penserà la libreria
ad effettuare il parsing, facendo funzionare il codice, a patto che tale codice ibrido sia includo tra i tag
<script type="text/babel">
…
</script>
NOTA che non si tratta di un comune tag di script JavaScript, è esplicitamente richiesto che sia uno script di
tipo “text/babel”.
In queste condizione, all’interno di questi tag di scripting, un codice di markup completo, con un inizio ed
una fine, viene convertito in un elemento react.
Cioè se scriviamo una cosa tipo:
const element = <div>Ciao Mondo</div>
quando la pagina viene eseguita il browser leggerà una cosa tipo:
const element = React.createElement("div", null, "Ciao Mondo");
Di conseguenza è facile immaginare che possiamo utilizzare una simile sintassi per ottenere un risultato
<body>
</script>
</body>
</html>
Per provare a prendere confidenza con la sintassi JSX esiste la pagina https://babeljs.io/ sul sito di BABEL
I componenti react
Un componente react è una struttura che può essere composta da uno o più elementi react ed è definito attraverso
una funzione od una classe scritte in un certo modo.
Se per esempio creiamo un elemento react con la solita sintassi:
La funzione componente
Possiamo convertirlo in un componente definendolo come una funzione
const element = function ()
{
return <div>Ciao Mondo</div>
}
A questo punto possiamo provare a renderizzarlo con ReactDOM.render
MA QUESTO CODICE NON FUNZIONERA’!
Questo perché render, con questa sintassi, si aspetta di avere un semplice elemento react,
quindi strutturato così: const element = <div>Ciao Mondo</div>
o così: const element = React.createElement("h1", null, "Ciao Mondo");
invece quella che abbiamo è una funzione che restituisce questo elemento react:
ossia questo:
{
return <div>Ciao Mondo</div>
}
Corrisponde a questo
{
return React.createElement("div", null, "Ciao Mondo");
}
La differenza è nella STRUTTURA dell’oggetto element.
Nel secondo caso element è una funzione, che a sua volta restituisce un elemento react, mentre nel primo è
direttamente un elemento react.
Da un punto di vista informatico, in realtà, una variabile che corrisponde ad un elemento react, contiene direttamente
la struttura dell’elemento react – all’interno della quale non ci addentriamo – mentre una funzione che restituisce un
elemento react è una struttura di funzione (che è diversa da un semplice elemento react) che, a sua volta , restituisce
un elemento react.
Una funzione che restituisce uno o più elementi react è UN COMPONENTE REACT.
Per renderizzare un componente react è conveniente usare una specifica sintassi:
- Si usa un nome di variabile per contenere il componente scritto con la prima lettera MAIUSCOLA
- Quando si deve dare il componente in pasto alla funzione ReactDOM.render si deve usare una sintassi per
la quale il nome della variabile va passato come un TAG HTML, racchiuso tra i simboli delimitatori < di
apertura e /> di chiusura.
const Element = function ()
{
}
ReactDOM.render(<Element />, document.getElementById('root'));
Il motivo per il quale si usa la lettera maiuscola è dovuto al fatto che, usando la sintassi JSX, i simboli delimitatori dei
tag potrebbero ingannare BABEL e potrebbe finire per convertire un codice come <element /> in un elemento react,
mentre ciò che vogliamo è che venga interpretato come un COMPONENTE react.
Per meglio capire la differenza, si può scrivere la funzione in modalità classica (generalmente salta maggiormente
all’occhio):
function Element ()
{
}
ReactDOM.render(<Element />, document.getElementById('root'));
A questo punto cambiamo anche un attimo il nome alla funzione, per adeguarci un minimo all’effetto:
function ComponenteCheSaluta ()
{
}
ReactDOM.render(<ComponenteCheSaluta />, document.getElementById('root'));
La classe React.Component
Oltre alle funzioni, per costruire componenti react è si può ricorrere a delle classi ereditate dalla classe
React.Component .
Si può sostituire la funzione con una classe estesa dalla classe React.Component, con una funzione render() che
restituisce il o gli elementi react (indipendentemente che si restituisca con JSX o con la sintassi originaria react).
Per la renderizzazione con ReactDOM.render il componente da renderizzare si può passare sempre nella modalità
<Nomecomponente />, sempre con la prima lettera maiuscola
Esempio senza JSX
class ComponenteCheSaluta extends React.Component
{
render()
{
}
}

Esempio con JSX
class ComponenteCheSaluta extends React.Component
{
render()
{
return ( <div>Ciao Mondo</div> );
}
}
Il metodo createClass
Una alternativa per costruire un componente React è utilizzare il metodo React.createClass, che genera
automaticamente una classe equivalente ad una estensione di React.Component
const ComponenteCheSaluta = React.createClass(
(
{
render()
{
}
}
);
o l’equivalente con JSX
const ComponenteCheSaluta = React.createClass
(
{
render()
{
}
}
);
Una modalità alternativa, ovviamente, di creare il metodo render (per tutte le versioni) è la definizione di metodo
come proprità associata ad una funzione
render = function()
{
}
o con JSX
render = function()
{
}
ANDIAMO PIU’ A FONDO E COMPLICHIAMOCI LA VITA RENDIAMO QUESTO TESTO INTERATTIVO
Quello che vogliamo ottenere è un testo sul video che dice “Ciao Mondo”
e cliccandoci sopra vogliamo che il testo faccia comparire un alert che dica “Ciao Mondo”, come scritto sulla pagina
bianca.
Iniziamo a creare un componente che mostri sulla pagina il testo “CIAO MONDO”; procediamo estendendo da
React.Component:
class Componente extends React.Component
{
render()
{
return <div >CIAO MONDO</div>
}
}
ReactDOM.render(<Componente />, document.getElementById('root'));
Se invece volessimo farlo con React.createClass potremmo scrivere

const Componente = React.createClass(
{
render()
{
}
});
Se volessimo aggiungere una azione al click sul div che viene trasmesso nel render dovremmo aggiungere un evento
onclick. In condizioni normali, se fosse un codice inserito nell’HTML, non in javascript con Babel, avremmo potuto
usare una sintassi tipo:
<div onclick="javascript:alert('CIAO MONDO')" >CIAO MONDO</div>
Ma qui siamo in un codice HTML che in realtà viene parsato da BABEL e non abbiamo la stessa elasticità dell’ HTML
puro del browser. Non possiamo includere una funzione javascript esterna così facilmente.
Ma possiamo agevolmente associare un metodo che fosse interno al componente scrivendo una cosa tipo
return <div onClick={NOME_METODO}>CIAO MONDO</div>

Quindi, se vogliamo che al click sul div sia associato la comparsa di un alert, dobbiamo aggiungere un metodo che
richiami quell’alert, nel componente. Vediamo come fare con ambedue le metodologie di programmazione:
Con la classe estesa da React.Component, creiamo un metodo aggiuntivo (prima o dopo render, è indifferente)
class Componente extends React.Component
{
saluta()
{
alert("CIAO MONDO");
}
render()
{
}
}
Con l’oggetto creato con React.createClass, si può aggiungere un metodo ma esso è un parametro che va diviso dagli
altri con una virgola quindi possiamo aggiungere il metodo saluta, dividendolo dal metodo render con una virgola
const Componente = React.createClass(
{
saluta()
{
alert("CIAO MONDO")
},
render()
{
return <div>CIAO MONDO</div>
}
});
adesso, per inserire all’evento onClick del DIV del render l’esecuzione del metodo saluta, compatibilimente con la
sintassi di Babel, si può inserire il parametro onClick come si farebbe normalmente (bisogna stare attenti a scriverlo in
modo corretto – tenendo conto di maiuscole e minscole - , perché Babel non è elastico come il browser e la
conversione potebbe non avvernire. Il metodo va indicato senza parentesi e con il prefisso this, per indicare che è un
metodo di questa classe; così:
return <div onClick={this.saluta} >CIAO MONDO</div>
Nota:
Sono state rispettate maiuscole e minuscole nella parola onClick, è stato specificato il prefisso this e non sono state
indicate le parentesi di esecuzione funzione.
Va tutto bene sino a che, però, il metodo che viene passato al gestore non deve poi, nel suo codice, accedere a dei
parametri della classe attraverso this.
Il gestore, infatti, ha dei problemi nel passare il this, soprattutto all’interno di componenti composti con il metodo
class [NOME COMPONENTE extends React.Component ], rispetto a quelli composti con il metodo [NOME
COMPONENTE = React.createClass], dove l’elasticità maggiore agevola il passaggio del this.
Proviamo a capire meglio.

Le due sintassi di creazione componente
class [NOME COMPONENTE extends React.Component ] e [NOME COMPONENTE = React.createClass]
hanno alcune differenze; in particolare:
 Il gestore onClick ed i gestori tutti in generale, attraverso BABEL, non trasmettono il sempre spontaneamente il
this nel caso di class [NOME COMPONENTE extends React.Component ] …
I gestori possono (anzi devono) usare il this per chiamare i metodi del componente, ma per chiamarli creano una
copia del metodo a cui loro giungono con il this e lo chiamano, ma il metodo chiamato non ha il this che punta al
componente. Questo comporta un problema se il metodo fa riferimento a qualche proprietà o altro metodo del
componente stesso.
FACCIAMO UN ESEMPIO CHIARIFICATORE.

Costruiamo un componente React che mostri un testo a video che dice “CLICCA PER AVERE I DATI DI ACCESSO”.
Al click ci mostrerà i dati di accesso di un determinato account (a qualcosa, non entriamo nei dettagli, non necessari…
tanto i dati saranno di pura fantasia)
Ciò che vogliamo è un testo così sulla pagina
E cliccando sul testo vogliamo che compaia una cosa di questo tipo:
Per semplicità creeremo un componente react ed associamo ad esso un costruttore in cui andremo ad
inserire come proprietà predefinite un username ed una password.
Normalmente, in un componente react tutte le proprietà dovrebbero essere inserite sotto una proprietà
chiamata props, ma (al momento) ignoriamo questa regola e creiamo un costruttore che predispone due
proprietà, username e password, settati rispettivamente a “morris” ed “123456”.
class GestoreAccount extends React.Component
{
constructor(props)
{
super(props);
this.username = "morris";
this.password = "123456";
}
}
Il costruttore dei componenti react riceve un oggetto props in ingresso, che conterrà eventuali proprietà passate
attraverso il tag <Nomecomponente prop1= “***” prop2= “***” prop3= “***”>
Perché il tutto funzioni correttamente, poi, è necessario chiamare il costruttore originario di React.Component con
super(props); fatto questo possiamo procedere, come vediamo all’impostazione delle proprietà username e
password all’interno del componente, usando il parametro this.
Adesso creiamo un metodo che visualizzi con un alert questi due parametri username e password; questo metodo lo
chiameremo suggerisci():
{
constructor(props)
{
super(props);
}
suggerisci()
{
alert("username: "+this.username+"\npassword: "+this.password);
}
}
Adesso creiamo un render che visualizzi il testo deciso (ossia “CLICCA PER AVERE I DATI DI ACCESSO”)
Ossia un metodo render come questo:
render()
{
return <div >CLICCA PER AVERE I DATI DI ACCESSO</div>
}
A questo punto abbiamo un codice come questo.

{
constructor(props)
{
super(props);
this.suggerisci = this.suggerisci.bind(this);
}
suggerisci()
{
}
render()
{
return <div >CLICCA PER AVERE I DATI DI ACCESSO</div>
}
}
ReactDOM.render(<GestoreAccount />, document.getElementById('root'));
Adesso dobbiamo predisporre il codice in modo tale che cliccando sul div restituito dal render venga chiamato il metodo suggerisci.
Il metodo suggerisci è accessibile attraverso il percorso this.suggerisci. La sintassi per associare la chiamata di un metodo al click è
usare il gestore in questo modo
render()
{
return <div onClick={this.suggerisci} >CLICCA PER AVERE I DATI DI ACCESSO</div>
}
Questo creerà una copia del this.suggerisci e lo richiamerà al click.
Ma nel fare questo la funzione chiamata non sarà in grado di accedere all’oggetto this.
Per funzionare è necessario che, prima, il metodo this.suggerisci sia forzata a vedere il this, con l’utilizzo di bind; questo si può fare
aggiungendo il seguente codice nel costruttore:
Il risultato quindi sarà:
{
constructor(props)
{
super(props);
}
suggerisci()
{
}
render()
{
}
}
Una soluzione alternativa potrebbe essere quella di forzare con bind direttamente nel gestore:
{
constructor(props)
{
super(props);
}
suggerisci()
{
}
render()
{
return <div onClick={this.suggerisci.bind(this)} >CLICCA PER AVERE I DATI DI ACCESSO</div>
}
}
Oppure si può definire il metodo come arrow function, questo cambierebbe la struttura del metodo e il this non si
perderebbe con il gestore:
Quindi definire così il metodo:

suggerisci = () ==>
{
}
Il codice complessivo sarebbe:

{
constructor(props)
{
super(props);
}
suggerisci = () ==>
{
}
render()
{
return <div onClick={this.suggerisci(this)} >CLICCA PER AVERE I DATI DI ACCESSO</div>
}
}
Se lo facciamo con React.createClass, non abbiamo la possibilità di usare la parola constructor, ma possiamo creare
componentDidMount , che è la stessa cosa ma non richiede super(props)
const GestoreAccount = React.createClass(
{
componentDidMount()
{
},
suggerisci()
{
},
render()
{
}
});
Possiamo anche definire comunque le funzioni in un altro modi, equivalente:
const GestoreAccount = React.createClass(
{
componentDidMount: function()
{
},
suggerisci: function()
{
},
render: function()
{
}
});
Una volta installato NODE
Lanciamo il comando npx create-react-app [NOMECARTELLAAPP]
Per esempio, noi creeremo una specie e-shop per sushi.
Chiamiamolo, quindi, “sushishop”.
npx create-react-app shushishop
A fine processo
Aprendo la directory con VISUAL STUDIO CODE
Gli elementi di react [ React.createElement ]
Con React si possono definire degli elementi di base, che si possono usare così come sono o con cui si possono costruire componenti anche più
complessi.
Si può usare il metodo createElement
La sintassi di createElement è:
type,
[props],
[...children]
)
Dove:
- Per type si intende il tipo di elemento del DOM da creare (un DIV, uno SPAN, o magari qualcos’altro)
- [Props] è un oggetto che contiene le proprietà dell’elemento del DOM da creare, per esempio se è un DIV può contenere la classe, che
però in questa struttura è detta className, o se è una immagine potrà avere la src del file immagine o altre informazioni
- [..children] indica IL CONTENUTO, ossia ciò che l’elemento del DOM contiene; può contenere altri elementi o semplicemente del testo, o
del codice HTML a sua volta.. è in pratica l’equivalente di innerHTML, vi si può inserire del testo o del codice, e se l’elemento in questione
lo prevede sarà visualizzato, oppure altri elementi react
Facciamo qualche esempio; supponiamo di voler apporre un componente H1 sul DOM, in cui inserire un semplice testo, il classico “CIAO MONDO” e
di volere che lo sfondo di questo H1 sia rosso, con testo giallo.
Il componente react potrebbe essere costruito così:
<script>
const element = React.createElement(
'h1',
{style: {background: 'red', color: "yellow"}},
'CIAO MONDO'
);
</script>
Ovviamente, perché il comando vada a buon fine è necessario includere le librerie di React
Nota: le proprietà sono (come accennato) indicate in forma di oggetto ed anche l’eventuale parametro style viene indicato così; E’ importante che i
valori dei parametri nello style siano tra apici o virgolette, separati da virgole.
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
Tuttavia questo codice produce l’elemento react, ma non lo pone sul DOM, resta nel virtualDOM di react e quindi, al momento, c’è ma non è
visibile. Per renderlo visibile va renderizzato nel DOM. Per renderizzarlo nel DOM della pagina si possono usare i comandi react: React.render o
ReactDOM.render, sebbene il secondo sia preferibile, dato che il primo è deprecato e potrebbe, in futuro, essere eliminato; L’uso di uno di questi
comandi è pressocchè identico per queste esigenze: serve un elemento del DOM reale a cui poter fare riferimento e da passare al comando,
React.render e ReactDOM.render accettano, entrambi, come primo parametro un elemento od un componente react (in questo caso, per
l’appunto, un elemento) e come secondo parametro un puntatore ad un elemento sul DOM reale.
Creiamo, allora, prima di tutto un div e diamogli un ID che ci consenta di trovarne il puntatore con getElementById:
Per l’esempio usiamo l’ID “divdarenderizzare”

<div id="divdarenderizzare"></div>
A questo punto possiamo completare il codice:
<script>
'h1',
'CIAO MONDO'
);
ReactDOM.render(element, document.getElementById('divdarenderizzare'));
</script>
Scriviamo la pagina completa di tutto:
<!DOCTYPE html>
<html lang="en">
<head>
<title>react test :: 01</title>
</head>
<body>
<script>
'h1',
'CIAO MONDO'
);
ReactDOM.render(element, document.getElementById('divdarenderizzare'));
</script>
</body>
</html>
Questa pagina produrrà questo output:
Sarebbe IDENTICO il risultato, come già accennato, usando React.render al posto di ReactDOM.render
Quindi il seguente codice produrrebbe il medesimo risultato
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
'h1',
'CIAO MONDO'
);
React.render(element, document.getElementById('divdarenderizzare'));
</script>
</body>
</html>
Un elemento che ne contiene un altro
Come detto, il terzo parametro del metodo createElement di React è ciò che contiene il corpo del componente da creare, quindi (oltre a del codice
HTML o testo) può contenere altri elementi.
Creiamo, quindi, un elemento partendo da un altro elemento, che includiamo nel secondo.
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<script>
const elemento_B = React.createElement(
'h1',
null,
'CIAO MONDO'
);

const elemento_A = React.createElement(
'DIV',
elemento_B
);
ReactDOM.render(elemento_A, document.getElementById('divdarenderizzare'));
</script>
</body>
</html>
Analizziamo cosa succede:

Viene creato un elemento React che abbiamo chiamato elemento_B, che è (nello specifico) un H1, senza proprietà specificate (null) e con testo
interno ( “CIAO MNONDO”).
Poi viene creato un secondo elemento React, che abbiamo chiamato elemento_A con come proprietà {style: {background: 'red', color:
"yellow"}} e come contenuto è stato messo elemento_B, precedentemente creato.
A questo punto eseguendo il render, con ReactDOM di elemento_A, automaticamente in cascata, viene renderizzata anche l’elemento elemento_B.
Il risultato estetico di questo codice, nel browser, è il medesimo del precedente codice visto.
Anche qui sarebbe IDENTICO il risultatousando React.render al posto di ReactDOM.render.
Clonare un elemento: React.cloneElement

Una volta definito un elemento è possibile anche clonarlo, producendo un nuovo elemento, in cui (però) è possibile apporre modifiche, per esempio
alle proprietà.
Essenzialmente la sintassi è questa:
React.cloneElement(
element,
[config],
[...children]
) FUNZIONA:
COME
Supponiamo di aver creato, con React.createElement (o altro modo) un elemento React….
per esempio questo:
'INPUT',
{type: "text", style: {backgroundColor: 'red', color: "yellow"}},
);
Ebbene questo produce un elemento HTML di tipo INPUT di tipo text, con sfondo rosso e colore del font giallo..
Se vogliamo clonarlo possiamo scrivere:
const elemento_A = React.cloneElement(elemento_B);
se però vogliamo che abbia la proprietà readOnly a true, basterà scrivere
const elemento_A = React.cloneElement(elemento_B,{readOnly: "true"});
Sia l’elemento (INPUT) che le proprietà type e style non sono state riscritte da noi, nell’elemento elemento_A, quindi resteranno inalterate; tuttavia
abbiamo aggiunto la proprietà readOnly, ponendola a true.
Questo farà uno shallow merge tra le proprietà: se una proprietà non viene ridefinita nell’elemento clonato, viene lasciata come nell’elemento
originale, altrimenti viene sovrascritta. Quindi avremo che l’elemento elemento_A sarà un INPUT type TEXT, con sfondo rosso e font giallo, come
elemento_B, ma con read_Only pari a true, come definito in elemento_A
Il codice completo può essere questo:
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<script>
'INPUT',
"CIAOO"
);
const elemento_A = React.cloneElement(elemento_B,{readOnly: "true"});

React.render(elemento_A, document.getElementById('divdarenderizzare'));
</script>
</body>
</html>
NOTA BENE: la proprietà style, se viene riscritta viene sovrascritta completamente, anche se si specifica una caratteristica stilistica diversa da quanto
precedentemente definito. In pratica qualunque cosa si cambi nello style, se viene riscritto sostituirà totalmente lo style dell’elemento originale.
COMPONENTI
I componenti sono, essenzialmente, delle entità composte da uno o più elementi, potenzialmente interattive, ossia in grado di avere un
comportamento (di essere reattive).
Un componente react è essenzialmente una specie di classe, un po’ particolare.
Si può creare in vari modi; tre, in particolare, sono:
A) Estendendo la classe React.Component
B) Chiamando il metodo React.createClass
C) Usando una funzione definita in un certo modo
Vediamo i vari punti
A) Estendendo la classe React.Component
class NomeComponente extends React.Component {

render() {
return CONTENUTO;
}
} Chiamando il metodo React.createClass
B)
NomeComponente = React.createClass({
render: function() {
return CONTENUTO;
}
C)}) Usando una funzione definita in un certo modo
function NomeComponente (props) {

return CONTENUTO;
}
In pratica, un componente descrive sia un contenuto, potenzialmente dinamico, sia un comportamento.

Lo si può fare con tutti e tre i metodi. Questo componente viene dato in pasto al metodo render di React od a quello di ReactDOM, due classi messe
a disposizione dalla libreria di react.
La renderizzazione crea una istanza della classe react (il componente), che viene restituita dal metodo render; Non sempre questa istanza non viene
recuperata all’atto della renderizzazione, in quanto l’istanza prodotta fa qualcosa, anche senza dover essere recuperata. La renderizzazione
recupera il valore che viene restituito dal metodo render del componente e lo immette in un contenitore.
Facciamo la seguente prova: Creiamo un elemento React ed usiamolo come contenuto di un componente e renderizziamo il componente.
Iniziamo con il creare un elemento, simile a quello creato prima, che realizza un testo del genere “CIAO MONDO” in giallo su sfondo rosso (striscia
evidenziazione rossa dietro il testo):
const elemento = React.createElement(

'div',
"CIAO MONDO"
);
Ora, procediamo alla creazione di un componente (lo chiamiamo NomeComponente):
class NomeComponente extends React.Component

{
render() {
return elemento;
}
}
Adesso dovremmo renderizzare questo componente.

Per farlo bisognerebbe chiamare la funzione render di React o di ReactDOM passandogli sia il componente, descritto in forma di Elemento React,
che si può ottenere chiamando React.crerateElement e passandogli come tipo di elemento il componente stesso
var elemento_descrivente_il_componente = React.createElement(NomeComponente);
A quel punto si può renderizzare il componente con React.render o ReactDOM.render
React.render(elemento_descrivente_il_componente, document.getElementById('divdarenderizzare'));
Vediamo il codice per intero
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
'div',
"CIAO MONDO"
);

{
render() {
return elemento;
}
}
React.render(elemento_descrivente_il_componente, document.getElementById('divdarenderizzare'));
</script>
</body>
</html>
I DIV ROOT
Generalmente, le applicazioni react hanno un div di riferimento (un contenitore principale) che viene, per convenzione (salvo diverse necessità)
chiamato root.
Il codice precedente verrebbe, in tal caso, scritto così:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
'div',
"CIAO MONDO"
);

{
render() {
return elemento;
}
}
React.render(elemento_descrivente_il_componente, document.getElementById(root));
</script>
</body>
</html>
ISTANZE DI COMPONENTI REACT
Un componente React di per se è vedibile come una specie di MINI-PROGRAMMINO AUOTSUFFICIENTE, che
viene inglobato nella pagina, all’interno di un contenitore (un div, uno span o altro.. in linea teorica persino nel body,
ma è sconsigliabile: meglio usare un contenitore interno al body).
Per funzionare si deve descrivere il componente e darlo in pasto al metodo Render delle classi React o ReactDOM.
Si può descrivere come una una classe, che estende la classe React.Component od una funzione che restotuisca un
React Element, od (in ultima analis, ma è un metodo deprecato) chiamare il metodo React.createClass (che, poi,
restituisce una struttura simile a quella dell’estensione di un React.Component).
PROCEDIMENTO
<div id="root"></div> Creiamo un elemento contenitore
a quel punto , possiamo estendere la classe React.Component
class NomeComponente extends React.Component {

render()
{
return …
}
}
Oppure creiamo una funzione
function NomeComponente() {
return …
}
Oppure possiamo creare il componente con il metodo React.createClass

ATTENZIONE PERO’ questa metodologia è DEPRECATA! Nella versione di librerie che si usa oggi non è supportata!
Se ne sconsiglia l’uso!
const NomeComponente = React.createClass( {

Render: function()
{
return …
}
}
RIPETO: questa metodologia è DEPRECATA! Nella versione di librerie che si usa oggi non è supportata!
Se ne sconsiglia l’uso! E’ stato deprecato nella versione v15.5 della libreria React ed è stato rimosso, a parire dalla
Nel primo e nell’ultimo caso, l’estenzione di React.Component ed il metodo React.createClass, si deve definire un
metodo render() che restituisce il componente da renderizzare (che poi è un create Element).
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></
script>
</head>
<body>
<script type="text/babel" data-type="module">
class Componente extends React.Component {
render()
{
return (
[
React.createElement("div", {style: {color: "red"}}, "CIAO MONDO"),
React.createElement("div", {style: {color: "green"}}, "WEYOYO"),
React.createElement("img", {src: "topolino.jpg"}, null)
]
);
}
}
ReactDOM.render(React.createElement(Componente), document.getElementById('root'));
</script>
</body>
</html>
LA SINTASSI JSX
La sintassi JSX è una estensione di JavaScript che consente, una volta attiva, di produrre elementi React con un codice che ricorda, per similudine,
l’HTML ed il CSS (con poche eccezioni) e che può essere usata insieme a JavaScript.
Perché la sintassi sia attiva è necessario includere il compilatore babel attraverso una libreria JavaScript:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
Una volta inclusa la libreriasi può usare il JSX al posto delle funzioni di creazione elementi React; Sarà però necessario specificare nel tag script che si
vuole usare la compilazione babel, con la sintassi “text/babel”
Il precedente codice, quello dell’esempio in cui facevamo comparire la scritta
Può essere così riproposto:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
{
render() {
return <div style={{backgroundColor: 'red', color: "yellow"}}>CIAMO MONDO</div>
}
}
React.render(elemento_descrivente_il_componente ,document.getElementById('root'));
</script>
</body>
</html>
Addirittura lo stesso componente React, nel nostro caso NomeComponente, invece che essere ottenuto da
React.createElement(NomeComponente) si può ottenere come <NomeComponente />
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
{
render() {
return <div style={{backgroundColor: 'red', color: "yellow"}}>CIAO MONDO</div>
}
}
var elemento_descrivente_il_componente = <NomeComponente />
React.render(elemento_descrivente_il_componente , document.getElementById('root'));
</script>
</body>
</html>
Ed, a questo punto, perché non passare direttamente il componente in formato JSX nel render ?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
{
render() {
return <div style={{backgroundColor: 'red', color: "yellow"}}>CIAO MONDO</div>
}
}
React.render(<NomeComponente /> , document.getElementById('root'));
</script>
</body>
</html>
Toolchain
Per sviluppare progetti alle volte si usano insiemi di programmi che vanno a costituire un ambiente
di lavoro, che rende veloce e rapido lo sviluppo.
Un insieme di programmi che vanno a costituire un ambiente integrato e confortevole per
sviluppare si dice toolchain.
Molti tra linguaggi e librerie usano dei toolchain.
Essenzialmente, una toolchain è un framework.
In JAVA abbiamo dei framework come Spring, Struts, Hybernate…
Visual Pascal ha Delphi, Rad-Studio o Lazarus…
C++ ne ha tantissimi, come lo stesso Rad Studio/C++ Builder, Visual C…
PHP ha Laravel, yii, ecc…
Anche librerie come React hanno dei framework/toolchain, come la “Create React App” (ed altre)
…
Create React App
Create React App è una toolchain che richiede NODE.JS installata per funzionare.
Viene installata con dei comandi di node, fornisce un server virtuale integrato e permette di
sviluppare rapidamente con JavaScript e React.
Primo progetto Create React App
Per creare il primo progetto è necessario posizionarsi in una cartella, dove creare il progetto, - o
con il terminale di Windows o, se ne ha uno, con quello dell’editor che si sta usando - ; Visual
Studio Code ha il suo terminale.
Il comando per creare la toolchain è:
npx create-react-app NOME APP
dove NOME APP è il nome del progetto, o meglio della cartella in cui inserire i file; questa cartella
sarà creata a partire dalla posizione attuale, pertanto se si è nella cartella
C:\mioprogetto\
e si sceglie come nome del progetto PROVA
verrà creata la sotto-cartella PROVA nella cartella C:\mioprogetto\
Se si vuole creare il progetto direttamente nella cartella C:\mioprogetto\ si può fare in due modi:
- Si esegue il comando a partire dalla cartella precedente, in questo caso C:\ e si scrive npx
create-react-app mioprogetto
- Oppure si può andare nella cartella C:\mioprogetto\ e scrivere npx create-react-app .\
Se node.js è installato correttamente ed è presente la connessione di rete internet, inizierà uno
scaricamento di file e cartelle.. saranno visualizzati man mano dati sullo scaricamento ed indicatori di
progresso, ecc cc..
Una volta ultimato lo scaricamento, se non sono presenti errori, si dovrebbe veder visualizzati i consigli
preliminari ed i suggerimenti per l’uso di alcuni comandi ed infine l’invito ad avere un felice lavoro di
hackyng: “Happy Hacking”:
Dopodiché sarà restituito il controllo del terminale al cursore, con indicato il percorso dove si è:
Nel mio caso, producendo varie cartelle per il corso, sono al percorso: C:\xampp\htdocs\other\corsi\react\
03
ossia la terza cartella che ho creato dall’inizio del corso.
Se come, è ipotizzabile, stiamo utilizzando Visual Studio Code vedremo a sinistra la lista dei file e delle
cartella scaricate (se state usando un altro editor, probabilmente – se è un buon ambiente, paragonabile a
Visual Studio Code – , non dovreste trovare difficoltà a riprodurre più o meno le stesse operazioni,
adattando quanto mostrerò al vostro ambiente).
I file e le cartelle del nostro progetto, al livello più superficiale (diciamo la root del nostro progetto)
Vediamo meglio la struttura del progetto:

Come detto, alla cartella radice del progetto, i file e le cartelle visibili sono questi:
- node_modules
questa cartella contiene i moduli node necessari al funzionamento del
toolchain e forniscono delle funzionalità utilizzabili nella applicazione; è possibile
scaricare nuovi moduli
- public
questa cartella contiene i file per la parte HTML del nostro progetto: la pagina su cui verrà
visualizzata la app ed eventuali file a corredo per il solo file HTML
- src
Qui ci sono i file JavaScript ed i componenti React, qui è dove scriveremo
la gran parte del nostro codice
- package.json è un file generato da node che contiene informazioni
sull'applicazione e la sua versione e tutti i pacchetti e le dipendenze di cui ha
bisogno per rendere il funzionamento dell'applicazione.
- package-lock.json è un file, generato automaticamente per qualsiasi operazione in cui NPM
modifica sia l' node_modulesalbero, o il package.jsonfile. Consente di fare molte operazioni, come
fare dei passi indietro sui pacchetti installati e altre utilità..
- README.md è un file di testo con istruzioni utili, su comandi e utilizzo del toolchain
ESEGUILAMO LA NOSTRA APP
Dal terminale inseriamo il comando:
npm run start
verranno eseguiti un po’ di codici (di cui potremo vedere nel terminale dei testi informativi su ciò che fa) ed
a fine elaborazione sarà lanciata la app; dovrebbe aprire in automatico il browser predefinito sull’indirizzo:
http://localhost:3000/
ossia sul virtualhost locale alla porta 3000 (generalmente è la 3000), che è occupata da REACT.
Se non si apre, ma i comandi vanno a buon fine, potete provare a lanciare voi l’indirizzo nel browser
Se va tutto bene dovrebbe mostrarsi a voi una schermata tipo questa:
Una pagina, generalmente in grigio scuro, con il logo di React al centro che ruota e del testo, con un link.
La pagina è costituita dall’HTML del file index.html presente nella cartella public e richiama un componente
React che è nella cartella src.
Nel caso in cui la porta fosse occupata, il toolchain vi avverte:
? Something is already running on port 3000.
Would you like to run the app on another port instead? » (Y/n)
Cioè vi dice che la porta è occupata e vi chiede se volete eseguire la app su un'altra porta
Capiamo come è fatta la pagina della toolchain Create-React-App
L’index.html della cartella public contiene questo codice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

</body>
</html>
Volendo si possono togliere i commenti, pe renderlo più compatto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>
Osserviamo
Il titolo della pagina, un tag di noscript per visualizzare un testo qualosa non sia attivo javascript ed un div, il
div di id root; dentro questo div sarà visualizzata/renderizzata la nostra app, il componente principale App
che costituirà la app, appunto.
Nella cartella src, come detto, ci sono i file su cui per lo più opereremo
- App.css, che contiene il css eventualmente usato nel componente App.js;

- App.js il nostro componente (la nostra App)
- App.test.js riguarda il testing delle App e non lo approfondiremo, pe rora
- Index.css è un file css, che possiamo modificare (anche nel nome) e che importiamo
nel nostro file di index, quello che injetta la App (mette la App) nel file index.html
- Index.js, appunto il file che injetta la App (mette la App) nel file index.html
- logo.svg è il file svg del logo che viene visualizzato nella
pagina
Il file index.js importa le librerie di React necessarie ed il css

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
si può, ovviamente cambiare il nome al file css e cambiarlo anche qui o aggiungere altri file css.
Poi si importa il componente dal file App.js e si decide di chiamarlo App (come il componente origiario, ma
si potrebbe tranquillamente chiamarlo diversamente), sarebbe una copia con un nome diverso del
componente App.
import App from './App';
Poi c’è il commando render di reactDOM che renderizza il componente App nel div root, che è in
index.html.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Il React.StrictMode non visualizza nulla, ma attiva alcuni controlli.. se lo rimuoviamo la app funzionerà
ugualmente. Quando si usa questo fragment si attiva la modalità rigorosa!
Si può togliere anche da qui ed usarla nella definizione della App o in altri punti… come si vedrà.
Il JSX poi include la App da renderizzare.
Poi, notiamo che l’installazione del progetto (generalmente) nel file index.js ci riporta due elementi:
L’import del reportWebVitals e la chiamata alla funzione reportWebVitals()

In questo momento non sono importanti e le possiamo anche rimuovere, senza nulla togliere – di ciò che
siamo vedendo – alla applicazione.. quindi rimuoviamoli – e magari rimuoviamo anche tutti i commenti - :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<App /> ,
document.getElementById('root')
);
ORA VEDIAMO IL COMPONENTE App

La App, stando all’import, deve essere in un file chiamato “App” (supposto “.js”) che si trova nella
medesima cartella.
Vediamo App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Innanzitutto ci sono delle importazioni: oltre alle classi ed ai componenti react, anche file css e risorse come
immagini possono essere importarte. Le risorse come le immagini, similmente ai componenti react possono
essere inglobate in un identificatore, nel nostro caso “/logo.svg” viene importato nell’identificatore logo .
Viene poi definita una funzione che restituisce il JSX del componente React.
Notare come, nel JSX si usi lanotazione {IDENTIFICATORE} per aggiungere un valore di una entità JavaScript
(una costante, una variabile, ecc)
<img src={logo} className="App-logo" alt="logo" />
Prima del return si può usare liberamente il JavaScript. Nel return si deve decidere se usare il JavaScript od
il JSX; noi, a parte qualche accenno, useremo sempre il JSX.
Nel JSX si possono inserire entità come costanti e variabili da scrivere, stampare, grazie alle parentesi
graffe.
Modifichiamo il componente App

Rimuoviamo il codice del componente App e proviamo ad inserire del codice JSX NOSTRO nel return
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div>Questo e' il mio primo componente REACT </div>
);
}
export default App;
Ovviamente il risultato è molto spoglio, ma è effettivamente un componente.
Cambiamento di stato:
Cli clicchiamo
Al click cambia il suo stato e viene rirenderizzato
Creiamo – quindi – un componente, che chiamiamo UseBase, ed inglobiamolo nel componente principale
App della nostra toolchain
chiamiamo UsoBase (ma potete chiamarlo come volete)
import React from "react";
const UsoBase = () => {
return (
<>
<h2> </h2>
</>
);
};
export default UsoBase;
salviamolo in un file, per esempio UsoBase.js o qualunque altro nome (mycomponent.js, blabla.js) ed
importiamolo nel componente principale App, nel file App.js
io il file l’ho chiamato MyComponentUsoBase.js e l’ho messo nella

sottocartella di App.js chiamata componenti_miei
Quindi ora in App.js dovremo importare il componente

nostro
import UsoBase from "./componenti_miei/MyComponentUsoBase"
Ho usato il nome UsoBase per importarlo, quindi potremmo includerlo così:
function App() {
return (
<UsoBase />
);
}
export default App;
Se lo importiamo con un nome diverso, poi dobbiamo usare il nome con cui lo importiamo per includerlo
import Paperino from "./componenti_miei/MyComponentUsoBase"
function App() {
return (
<Paperino />
);
}
export default App;
Il nome con cui si importa è indifferente, perché JavaScript capisce cosa stiamo importando andando a
vedere nel file indicato e verificando cosa è esportato… e siccome nel file del nostro componente abbiamo
esportato il componente UsoBase, da noi definito in quel file
return (
<>
<h2> </h2>
</>
);
};
se anche lo importiamo come Paperino, a JavaScript VA BENE!... solo che, poi, dovremo usarlo come
Paperino
import Paperino from "./componenti_miei/MyComponentUsoBase"
function App() {
return (
<Paperino />
);
}
export default App;
Torniamo al nome UsoBase

function App() {
return (
<UsoBase />
);
}
export default App;
ed Andiamo nel nostro file, dove definiamo il componente

return (
<>
<h2> </h2>
</>
);
};
Useremo la funzione Hook useState; dobbiamo importare useState da React, con il suo nome di
esportazione (useState, appunto).
Quindi scriveremo una cosa tipo, nel file del nostro componente:
import React, { useState } from "react";
Adesso, se volessimo vedere cosa contiene useState, potremmo fare un

console.log(useState)
all’interno del codice di UsoBase
import React, {useState} from "react";
console.log(useState);
return (
<>
<h2> </h2>
</>
);
};
vediamo che nella sezione ispeziona viene visualizzata la funzione useState
Viene mostrato il codice

ƒ useState(initialState) {
var dispatcher = resolveDispatcher();
return dispatcher.useState(initialState);
}
Ci viene cioè mostrato il codice di useState; essenzialmente viene restituito un oggetto, da
resolveDispatcher(), a cui poi viene passato l’oggetto initialState.
Volendo possiamo destrutturare il metodo log dalla classe console, usando il codice
const {log} = console;
per cui possiamo scrivere
import React, {useState} from "react";
const log = {console};
log(useState);
return (
<>
<h2> </h2>
</>
);
};
Il risultato sarà lo stesso.

React Js

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

React Js

Caricato da

Copyright:

Formati disponibili

React è una libreria, fornita e supportata da GOOGLE per JavaScript per la gestione di front-end.

CDN o Scaricamento libreria

Qui riportiamo alcune CDN, generalmente affidabili:

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

Che le librerie utilizzate per gli ambienti di produzione:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

Essa, in memoria, sarà rappresentata così:

Nella classe React c’è un metodo chiamato createElement.

Il metodo createElement di React consente di creare un elemento React.

Il metodo accetta in ingresso almeno 3 parametri:

React.createElement([CODICE IDENTIFICATIVO ELEMENTO PIU’ ESTERNO], [PARAMETRI], [CODICE od Elemento], ….

SI possono anche mescolare gli usi annidati di React.DOM e React.createElement

Il codice successivo, invoca un metodo del DOM virtuale di React:

Il codice complessivo potrebbe essere:

Il risultato sarà una cosa di questo tipo.

Otterremo una cosa tipo:

MA QUESTO CODICE NON FUNZIONERA’!

Esempio senza JSX

Esempio con JSX

o l’equivalente con JSX

ANDIAMO PIU’ A FONDO E COMPLICHIAMOCI LA VITA RENDIAMO QUESTO TESTO INTERATTIVO

Se invece volessimo farlo con React.createClass potremmo scrivere

return <div onClick={NOME_METODO}>CIAO MONDO</div>

Proviamo a capire meglio.

FACCIAMO UN ESEMPIO CHIARIFICATORE.

Ciò che vogliamo è un testo così sulla pagina

A questo punto abbiamo un codice come questo.

Quindi definire così il metodo:

Il codice complessivo sarebbe:

Possiamo anche definire comunque le funzioni in un altro modi, equivalente:

npx create-react-app shushishop

Per l’esempio usiamo l’ID “divdarenderizzare”

A questo punto possiamo completare il codice:

Analizziamo cosa succede:

Anche qui sarebbe IDENTICO il risultatousando React.render al posto di ReactDOM.render.

Clonare un elemento: React.cloneElement

const elemento_A = React.cloneElement(elemento_B,{readOnly: "true"});

Vediamo i vari punti

A) Estendendo la classe React.Component

class NomeComponente extends React.Component {

function NomeComponente (props) {

In pratica, un componente descrive sia un contenuto, potenzialmente dinamico, sia un comportamento.

const elemento = React.createElement(

Ora, procediamo alla creazione di un componente (lo chiamiamo NomeComponente):

class NomeComponente extends React.Component

Adesso dovremmo renderizzare questo componente.

var elemento_descrivente_il_componente = React.createElement(NomeComponente);

A quel punto si può renderizzare il componente con React.render o ReactDOM.render

class NomeComponente extends React.Component

class NomeComponente extends React.Component

<div id="root"></div> Creiamo un elemento contenitore

a quel punto , possiamo estendere la classe React.Component

class NomeComponente extends React.Component {

Oppure creiamo una funzione

Oppure possiamo creare il componente con il metodo React.createClass

const NomeComponente = React.createClass( {

Può essere così riproposto:

Vediamo meglio la struttura del progetto:

ESEGUILAMO LA NOSTRA APP

Dal terminale inseriamo il comando:

npm run start

? Something is already running on port 3000.