Reageren Render HTML
Het doel van React is op vele manieren om HTML in een webpagina weer te geven.
React rendert HTML naar de webpagina met behulp van een functie genaamd
ReactDOM.render().
De renderfunctie
De ReactDOM.render()functie heeft twee argumenten, HTML-code en een HTML-element.
Het doel van de functie is om de gespecificeerde HTML-code binnen het gespecificeerde HTML-element weer te geven.
Maar waar renderen?
Er is nog een map in de hoofdmap van je React-project, genaamd "public". In deze map bevindt zich een index.htmlbestand.
U zult een single opmerken <div>
in de hoofdtekst van dit bestand. Dit is waar onze React-toepassing wordt weergegeven.
Voorbeeld
Geef een alinea weer binnen een element met de id "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Het resultaat wordt weergegeven in het <div id="root">element:
<body>
<div id="root"></div>
</body>
Merk op dat het element-ID niet "root" hoeft te heten, maar dit is de standaardconventie.
Gecertificeerd!
$95 INSCHRIJVEN
De HTML-code
De HTML-code in deze tutorial gebruikt JSX waarmee je HTML-tags in de JavaScript-code kunt schrijven:
Maak je geen zorgen als de syntaxis niet bekend is, je leert meer over JSX in het volgende hoofdstuk.
Voorbeeld
Maak een variabele die HTML-code bevat en geef deze weer in het "root"-knooppunt:
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'));
Het wortelknooppunt
Het hoofdknooppunt is het HTML-element waar u het resultaat wilt weergeven.
Het is als een container voor inhoud die wordt beheerd door React.
Het hoeft GEEN <div>element te zijn en het hoeft GEEN id='root':
Voorbeeld
Het hoofdknooppunt kan worden genoemd wat je maar wilt:
<body>
<header id="sandy"></header>
</body>
Geef het resultaat weer in het <header id="sandy">element:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));