ReactJS - Utilizzo di React senza JSX

Cos'è JSX?

Prima di immergerci in React senza JSX, capiremo prima cos'è JSX. JSX, o JavaScript XML, è un'estensione della sintassi per JavaScript che si presenta simile ad HTML. È comunemente utilizzato con React per descrivere come dovrebbe apparire l'interfaccia utente. Tuttavia, JSX non è un requisito per utilizzare React. React può essere utilizzato senza JSX, ed è ciò che esploreremo in questo tutorial.

Perché Usare React Senza JSX?

Potresti chiederti: "Se JSX è così comune, perché vorremmo usare React senza di esso?" Ottima domanda! Ci sono un paio di motivi:

1. Apprendere i concetti fondamentali: Capire come funziona React senza JSX può darti una comprensione più approfondita della libreria.
2. Limitazioni degli strumenti di build: Alcuni ambienti di build potrebbero non supportare la compilazione di JSX.
3. Preferenza personale: Alcuni sviluppatori semplicemente preferiscono scrivere puro JavaScript.

Creazione di Elementi con React.createElement()

Il cuore dell'uso di React senza JSX è la funzione React.createElement(). Questa funzione è ciò a cui JSX viene ridotto comunque, quindi stiamo solo tagliando fuori il intermediario!

Iniziamo con un esempio semplice:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Ciao, mondo!'
);

In questo esempio, stiamo creando un elemento h1 con una classe 'greeting' e il contenuto testuale 'Ciao, mondo!'. Analizziamo gli argomenti:

1. Il primo argomento ('h1') specifica il tipo di elemento che vogliamo creare.
2. Il secondo argomento ({className: 'greeting'}) è un oggetto che contiene le props per l'elemento.
3. Il terzo argomento ('Ciao, mondo!') è il contenuto dell'elemento.

Se scrivessimo questo in JSX, sarebbe così:

const element = <h1 className="greeting">Ciao, mondo!</h1>;

Vedi quanto più compatta è JSX? Ma non preoccuparti, con la pratica, creare elementi senza JSX diventa second nature!

Annidamento di Elementi

Ora, proviamo qualcosa di più complesso. Che ne dici di creare un div con due elementi figli?

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Benvenuto'),
React.createElement('p', null, 'Questo è un paragrafo.')
);

Questo crea una struttura equivalente a:

<div>
<h1>Benvenuto</h1>
<p>Questo è un paragrafo.</p>
</div>

Notate come annidiamo le chiamate createElement per creare elementi figli. Gli argomenti null sono dove metteremmo le props se ne avessimo bisogno.

Creazione di Componenti

I componenti sono i mattoni fondamentali delle applicazioni React. Creiamo un componente funzionale semplice senza JSX:

function Welcome(props) {
return React.createElement(
'h1',
null,
'Benvenuto, ' + props.name
);
}

Per utilizzare questo componente, faremmo:

const element = React.createElement(Welcome, {name: 'Alice'});

Questo è equivalente al JSX:

const element = <Welcome name="Alice" />;

Gestione degli Eventi

La gestione degli eventi in React senza JSX è molto simile a quella con JSX. Creiamo un pulsante che注册 un messaggio quando viene cliccato:

function handleClick() {
console.log('Pulsante cliccato!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Clicca qui'
);

Qui, stiamo passando la funzione handleClick come la prop onClick all'elemento pulsante.

Rendering Condizionale

Il rendering condizionale è un po' più verboso senza JSX, ma tuttavia possibile:

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Benvenuto!');
} else {
return React.createElement('h1', null, 'Prego, registrati.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

Liste e Chiavi

Il rendering delle liste senza JSX richiede di usare Array.map() esplicitamente:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

Notate come stiamo ancora usando la prop key, che è cruciale per il processo di riconciliazione di React.

Tabella dei Metodi

Ecco una tabella che riassume i metodi chiave che abbiamo discusso:

Metodo	Descrizione	Esempio
React.createElement()	Crea un elemento React	React.createElement('div', null, 'Ciao')
Array.map()	Trasforma gli elementi dell'array	numbers.map(n => React.createElement('li', null, n))
React.render()	Renderizza un elemento React nel DOM	ReactDOM.render(element, document.getElementById('root'))

Conclusione

Mentre JSX rende certamente il codice React più intuitivo e leggibile, capire come usare React senza JSX ti dà una comprensione più approfondita di ciò che accade sotto il cofano. È come imparare a guidare una macchina manuale prima di una automatica - ti dà più controllo e comprensione del processo.

Ricorda, indipendentemente dal fatto che tu utilizzi JSX o meno, i principi fondamentali di React rimangono gli stessi. Componenti, props, stato e DOM virtuale funzionano allo stesso modo. JSX è solo zucchero sintattico che rende il processo di coding un po' più dolce!

Quindi, la prossima volta che stai debuggando una applicazione React e vedi React.createElement() nel codice compilato, saprai esattamente cosa sta succedendo. Buon coding, e possa i tuoi elementi React sempre renderizzare correttamente!

Credits: Image by storyset