Bereaksi Render HTML
Tujuan React dalam banyak hal adalah untuk merender HTML di halaman web.
React merender HTML ke halaman web dengan menggunakan fungsi yang disebut
ReactDOM.render().
Fungsi Render
Fungsi ReactDOM.render()ini mengambil dua argumen, kode HTML dan elemen HTML.
Tujuan dari fungsi ini adalah untuk menampilkan kode HTML yang ditentukan di dalam elemen HTML yang ditentukan.
Tapi render di mana?
Ada folder lain di direktori root proyek React Anda, bernama "public". Di folder ini, ada index.htmlfile .
Anda akan melihat satu <div>
di badan file ini. Di sinilah aplikasi React kita akan dirender.
Contoh
Tampilkan paragraf di dalam elemen dengan id "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Hasilnya ditampilkan dalam <div id="root">elemen:
<body>
<div id="root"></div>
</body>
Perhatikan bahwa id elemen tidak harus disebut "root", tetapi ini adalah konvensi standar.
Dapatkan Sertifikasi!
$95 DAFTAR
Kode HTML
Kode HTML dalam tutorial ini menggunakan JSX yang memungkinkan Anda untuk menulis tag HTML di dalam kode JavaScript:
Jangan khawatir jika sintaksnya tidak familier, Anda akan mempelajari lebih lanjut tentang BEJ di bab 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'));
Node Akar
Node root adalah elemen HTML tempat Anda ingin menampilkan hasilnya.
Ini seperti wadah untuk konten yang dikelola oleh React.
TIDAK harus berupa <div>elemen dan TIDAK harus memiliki id='root':
Contoh
Node root dapat disebut apa pun yang Anda suka:
<body>
<header id="sandy"></header>
</body>
Tampilkan hasilnya dalam <header id="sandy">elemen:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));