Reagisci Render HTML
L'obiettivo di React è in molti modi rendere HTML in una pagina web.
React esegue il rendering dell'HTML nella pagina Web utilizzando una funzione chiamata
ReactDOM.render().
La funzione di rendering
La ReactDOM.render()funzione accetta due argomenti, codice HTML e un elemento HTML.
Lo scopo della funzione è visualizzare il codice HTML specificato all'interno dell'elemento HTML specificato.
Ma renderizza dove?
C'è un'altra cartella nella directory principale del tuo progetto React, chiamata "pubblica". In questa cartella c'è un index.htmlfile.
Ne noterai un singolo <div>
nel corpo di questo file. È qui che verrà visualizzata la nostra applicazione React.
Esempio
Visualizza un paragrafo all'interno di un elemento con l'id di "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Il risultato viene visualizzato <div id="root">nell'elemento:
<body>
<div id="root"></div>
</body>
Nota che l'elemento id non deve essere chiamato "root", ma questa è la convenzione standard.
Ottieni la certificazione!
ISCRIVITI A $95
Il codice HTML
Il codice HTML in questo tutorial utilizza JSX che ti consente di scrivere tag HTML all'interno del codice JavaScript:
Non preoccuparti se la sintassi non è familiare, imparerai di più su JSX nel prossimo capitolo.
Esempio
Crea una variabile che contiene codice HTML e visualizzala nel nodo "root":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Il nodo radice
Il nodo radice è l'elemento HTML in cui si desidera visualizzare il risultato.
È come un contenitore di contenuti gestiti da React.
NON deve essere un <div>elemento e NON deve avere il id='root':
Esempio
Il nodo radice può essere chiamato come preferisci:
<body>
<header id="sandy"></header>
</body>
Visualizza il risultato <header id="sandy">nell'elemento:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));