Cosa è JSX
Come avrete modo di notare, nella nostra web app React, il codice HTML restituito dalla function che viene renderizzata, non è proprio il classico HTML, ma è un linguaggio chiamato JSX:
<div className="App"> <header className="App-header"> <img src="img/logo-doagency.png" /> <p> Web app di esempio di <a href="https://doagency.it" target="_blank">DoAgency</a> a scopo meramente didattico. </p> </header> </div>
Ad esempio, si può notare il modo di dichiarare la classe con “className” e non con “class”, tipico del linguaggio HTML.
Ciò è dovuto proprio al fatto, che stiamo utilizzando il linguaggio JSX.
JSX è stato introdotto per la prima volta da Facebook nel 2013 insieme a React, con l’obiettivo di rendere la scrittura dei componenti di React più facile e intuitiva. Con JSX, gli sviluppatori possono infatti, scrivere componenti React utilizzando una sintassi familiare.
JSX è una estensione di Javascript, quindi in pratica una sua libreria, che consente di scrivere in un linguaggio simil-HTML all’interno di un Javascript.
Tale sintassi HTML, viene poi convertita in Javascript dalla libreria ed interpretata.
In questo modo è anche possibile inserire codice javascript all’interno dell’HTML.
Esempio:
const myElement = <h1>Questo è un numero scritto con JSX: {5 + 5} </h1>;
Output: Questo è un numero scritto con JSX: 10
La sintassi di JSX
Ci sono però alcune differenze tra la sintassi di HTML e di JSX. Di seguito scriviamo le più rilevanti.
- Tutto il contenuto da renderizzare, cioè il contenuto del return, deve trovarsi all’interno di uno stesso div esterno.
Quindi se abbiamo due div da renderizzare, nella root del blocco di codice non possiamo inserire i due div. Dovremo quindi wrappare i due div all’interno di un div esterno comune. - Le classi si chiamano “className” e non “class”.
Tali classi sono denominate proprietà e non attributi come in HTML. - Il tag img deve avere necessariamente il simbolo di self closing.
Cosa che in HTML non è necessaria. Pertanto occorrerà scrivere: <img src=”…”/> - Le label degli stili non possono contenere caratteri speciali.
Pertanto “margin-right”, diventa “marginRight” e così via.
<div className="card" style={{marginRight: '18px', maxWidth:'200px'}}>
Altra potenzialità di JSX è quella di permetterci di renderizzare il risultato di variabili e function.
Eccone un esempio:
const x = 1;
let text = "Ciao";
if (x < 3) {
text = "Benvenuto";
}
const myElement = <h1>{text}</h1>;
Output: Benvenuto
Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs