React digunakan dalam banyak cara untuk membuat HTML di halaman web.
Fungsi Render HTML di React digunakan ke halaman web yang disebut dengan ReactDOM.render().
Fungsi Render
Fungsi ReactDOM.render() membutuhkan dua argumen, kode HTML dan elemen HTML.
Tujuan dari fungsi ini adalah untuk menampilkan kode HTML yang ditentukan di dalam elemen HTML yang ditentukan.
Contoh
Tampilkan paragraf di dalam elemen “root”:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
Hasilnya ditampilkan dalam elemen <div id="root">:
<body> <div id="root"></div> </body>
Kode HTML
Kode HTML dalam artkel ini menggunakan JSX yang memungkinkan kamu untuk menulis tag HTML di dalam kode JavaScript:
Jangan khawatir jika sintaksnya tidak dikenal, Anda akan belajar lebih banyak tentang JSX di artikel berikutnya.
Contoh
Buat variabel yang berisi kode HTML dan tampilkan di simpul 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'));
Root Node
Simpul Root adalah elemen HTML di mana kmau ingin menampilkan hasilnya.
Hal ini seperti wadah untuk konten yang dikelola oleh Bereaksi.
TIDAK harus menjadi <div>elemen dan TIDAK harus memiliki id='root':
Contoh
Simpul Root dapat disebut apapun yang kamu suka:
<body> <header id="sandy"></header> </body>
Menampilkan hasil dalam elemen <header id="sandy">:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));