Memberikan HTML Pada React JS

ReactJS

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'));