Reageer Gee HTML
React se doel is op baie maniere om HTML in 'n webblad weer te gee.
React lewer HTML na die webblad deur 'n funksie genaamd
ReactDOM.render()
.
Die weergawe-funksie
Die ReactDOM.render()
funksie neem twee argumente, HTML-kode en 'n HTML-element.
Die doel van die funksie is om die gespesifiseerde HTML-kode binne die gespesifiseerde HTML-element te vertoon.
Maar gee waar?
Daar is 'n ander gids in die wortelgids van jou React-projek, genaamd "publiek". In hierdie gids is daar 'n index.html
lêer.
Jy sal 'n enkele <div>
in die liggaam van hierdie lêer sien. Dit is waar ons React-toepassing gelewer sal word.
Voorbeeld
Vertoon 'n paragraaf binne 'n element met die id van "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
Die resultaat word in die <div id="root">
element vertoon:
<body>
<div id="root"></div>
</body>
Let daarop dat die element id nie "root" genoem hoef te word nie, maar dit is die standaard konvensie.
Word gesertifiseer!
$ 95 INSKRYF
Die HTML-kode
Die HTML-kode in hierdie tutoriaal gebruik JSX wat jou toelaat om HTML-etikette binne die JavaScript-kode te skryf:
Moenie bekommerd wees as die sintaksis onbekend is nie, jy sal meer oor JSX in die volgende hoofstuk leer.
Voorbeeld
Skep 'n veranderlike wat HTML-kode bevat en vertoon dit in die "root" node:
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'));
Die Wortelknoop
Die wortelnodus is die HTML-element waar jy die resultaat wil vertoon.
Dit is soos 'n houer vir inhoud wat deur React bestuur word.
Dit hoef NIE 'n <div>
element te wees nie en dit hoef NIE die id='root'
:
Voorbeeld
Die wortelknoop kan genoem word wat jy ook al wil:
<body>
<header id="sandy"></header>
</body>
Vertoon die resultaat in die <header id="sandy">
element:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));