JSX, la sintassi

JSX è il linguaggio che abbiamo utilizzato nella lezione precedente per creare un primo esemplare di componente, definirne il markup HTML da restituire per il rendering visuale all'interno della pagina. Cerchiamo di capire meglio di che si tratta partendo da un altro esempio:

var HelloWorld = React.createClass({
		render: function() {
			return <p>Hello <strong>React</strong>!</p>;
		}
});

La libreria React fornisce delle funzioni che consentono di generare elementi da inserire all'interno del DOM della pagina. Tuttavia, la chiamata a queste funzioni e il passaggio dei parametri richiesti può rendere il codice poco leggibile e tendenzialmente complesso, soprattutto quando ci si trova ad annidare più elementi all'interno
di altri.

Prendiamo ad esempio questo frammento di codice che provvede a creare una lista non ordinata utilizzando l'elemento standard HTML <ul>, ma generato grazie alle funzioni di React:

// Crea gli elementi da inserire nella lista
var item1 = React.DOM.li({ className: "item-1", key: "item-1"}, "Item 1");
var item2 = React.DOM.li({ className: "item-2", key: "item-2"}, "Item 2");
var item3 = React.DOM.li({ className: "item-3", key: "item-3"}, "Item 3");
// Crea un array degli elementi
var itemArray = [item1, item2, item3];
// Crea la lista degli elementi
var listElement = React.DOM.ul({ className: "list-of-items" }, itemArray);
// Lancia il rendering nella pagina
ReactDOM.render(listElement, document.getElementById("container"));

Utilizzando le funzioni dell'oggetto React.DOM creiamo gli elementi dello standard HTML per rappresentare in questo caso una lista non ordinata (o elenco puntato); usiamo poi la funzione ReactDOM.render() per visualizzarli all'interno dell'elemento della pagina avente id="container".

JSX fornisce un modo per chiamare le medesime funzioni usando una forma molto simile al linguaggio HTML, adottando pertanto un approccio dichiarativo e leggibile che semplifica l'indicazione degli elementi e dei loro attributi; usando JSX, il codice dell'esempio precedente potrebbe essere riscritto in questo modo, ottenendo lo stesso risultato:

// Crea la lista degli elementi
var listElement =	<ul className="list-of-items">
						<li className="item-1">Item 1</li>
						<li className="item-2">Item 2</li>
						<li className="item-3">Item 3</li>
					</ul>;
// Lancia il rendering nella pagina
ReactDOM.render(listElement, document.getElementById("container"));

È ovvio che il browser non è in grado di interpretare nativamente questo tipo di costrutto, che è sintatticamente errato per il linguaggio JavaScript: se lo vogliamo usare all'interno della nostra
applicazione, è necessario aggiungere un riferimento a un cosiddetto pre-compilatore (una sorta di pre-processore).

Sin dalle prime versioni, la libreria React è stata distribuita assieme a JSXTransformer, un pre-compilatore ovvero uno script da includere nella pagina capace di interpretare la sintassi JSX allo scopo di trasformarla “al volo” nelle chiamate alle funzioni relative della libreria React.

Oggi l'uso di JSXTransformer è deprecato in favore di Babel, un compilatore di respiro più ampio nato per supportare la traduzione in JavaScript di codice espresso con linguaggi anche completamente diversi, come JSX appunto.

È doveroso precisare che utilizzare direttamente le funzioni di React o sfruttare JSX è indifferente ai fini della bontà della logica applicativa, salvo la necessità di ricorrere a Babel nel caso si utilizzi la seconda.

Dal punto di vista prestazionale il dibattito è ancora aperto, in quanto è vero che l'uso del pre-compilatore può incrementare i tempi richiesti per l'esecuzione del codice; tuttavia, va anche detto che JSX consente di ottenere script più compatti da trasferire e che il compilatore Babel potenzialmente può applicare diverse ottimizzazioni al risultato ottenuto.

Personalmente, ritengo che JSX sia un compendio della libreria React esclusivo ed estremamente utile, soprattutto quando si inizia a lavorare con un discreto numero di componenti annidati l'uno dentro l'altro. La scelta di utilizzarlo oppure no viene lasciata al lettore, anche se nelle lezioni che seguiranno utilizzeremo prevalentemente JSX all'interno del codice di esempi.