Una funzione fondamentale di React è:
ReactDOM.render(
rElem,
document.getElementById('root')
);
Essa prende in input due parametri e stampa l’elemento rElem nel div con id uguale “root”. Questo div è detto nodo DOM “radice” (o root) in quanto ogni cosa al suo interno verrà gestita dal DOM di React.
Un elemento React descrive cosa si vuole vedere sullo schermo.
Sono oggetti semplici e poco costosi da creare e appartengono al virtualDOM: tutte le operazioni che React effettua sul DOM vengono in realtà “parcheggiate” in un DOM virtuale in memoria che fa da specchio a quello reale. Alla fine di ogni ciclo di render vengono trasportate sul DOM reale esclusivamente le modifiche minime necessarie per allineare i due DOM. Questo meccanismo permette a React di essere estremamente efficiente.
Nota bene: capita di confondere gli elementi con i “componenti” ( che saranno introdotti più avanti). Gli elementi sono ciò di cui i componenti “sono fatti”.
Per creare un elemento si usa la seguente sintassi:
var rElement = React.createElement('h1', null, 'Hello, world!');
Nello specifico, abbiamo creato un elemento che corrisponde al seguente codice html:
<h1>Hello, world!;</h1>
Il codice completo sarà:
Vedremo una pagina html, con all’interno del div con id “root”, in cui viene stampato il testo “Hello World” con i tag html <h1>.
Nel caso volessi provarla con l’altro metodo, cioè scaricando la pagina Html sopra indicata, dobbiamo modificare lo script contenuto nel seguente modo
e aprirla con un browser. I risultati saranno identici. Per i prossimi esempi utilizzeremo sempre l’editor online, più comodo da usare.
La sintassi per creare un elemento React è abbastanza laboriosa e un po’ difficile da capire. Per questo motivo, quando si usa React, si usa spesso anche JSX (vedi sezione successiva).