React Render HTML
Cílem Reactu je v mnoha ohledech vykreslit HTML na webové stránce.
React vykreslí HTML na webovou stránku pomocí funkce zvané
ReactDOM.render().
Funkce Render
Funkce ReactDOM.render()přebírá dva argumenty, HTML kód a HTML element.
Účelem funkce je zobrazit zadaný HTML kód uvnitř zadaného HTML elementu.
Ale vykreslit kde?
V kořenovém adresáři vašeho projektu React je další složka s názvem „public“. V této složce je index.htmlsoubor.
<div>
V těle tohoto souboru si všimnete singlu . Zde bude vykreslena naše aplikace React.
Příklad
Zobrazit odstavec uvnitř prvku s id "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Výsledek se zobrazí v <div id="root">prvku:
<body>
<div id="root"></div>
</body>
Všimněte si, že id prvku se nemusí nazývat „root“, ale toto je standardní konvence.
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
HTML kód
HTML kód v tomto tutoriálu používá JSX, který vám umožňuje psát HTML tagy do kódu JavaScript:
Nedělejte si starosti, pokud syntaxi neznáte, více se o JSX dozvíte v další kapitole.
Příklad
Vytvořte proměnnou, která obsahuje kód HTML a zobrazte ji v „kořenovém“ uzlu:
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'));
Kořenový uzel
Kořenový uzel je element HTML, kde chcete zobrazit výsledek.
Je to jako kontejner pro obsah spravovaný Reactem.
NEMUSÍ to být <div>prvek a NEMUSÍ mít id='root':
Příklad
Kořenový uzel lze nazvat jakkoli:
<body>
<header id="sandy"></header>
</body>
Zobrazit výsledek v <header id="sandy">prvku:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));