Rendering Hello World (HTML, Javascript, React)

Membuat Hello World pada file HTML sangat mudah, kita hanya perlu menggunakan tag HTML yang sesuai. Namun kali ini kita akan membuat Hello World dengan menggunakan 3 cara, yakni cara HTML, javascript biasa, dan cara React.

HTML Online IDE memudahkan kita untuk mencoba jalankan kode HTML

Perhatikan tiga contoh pembuatan Hello World berikut:

1
2
3
4
5
<body>
  <div id="root">
    <h1 class="title">Hello World</h1>
  </div>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
  <div id="root"></div>
  <script type="module">
    const rootElement = document.getElementById("root")
    const element = document.createElement("h1")
    element.className = "title"
    element.textContent = "Hello World"
    rootElement.append(element)
  </script>
</body>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script type="module">
    const rootElement = document.getElementById("root")
    const element = React.createElement("h1", {
      className: "title",
      children: "Hello World",
    })
    ReactDOM.render(element, rootElement)
  </script>
</body>

Hello World di HTML

Hello world dapat dibuat dengan tags HTML tanpa menggunakan javascript sama sekali.

Hello World di Javascript

Kita bisa membuat Hello World dengan menggunakan javascript dengan mengandalkan DOM (Document Object Model). DOM ini dibuat oleh browser yang berisi hirarki struktur HTML dalam bentuk Object. Kita bisa mengakses elemen HTML pada Javascript dengan menggunakan DOM.

Hello World pada React

Membuat Hello World pada React mirip dengan membuat Hello World pada Javascript, perbedaannya adalah kita perlu menggunakan dependencies berupa React, React-DOM, dan Babel dari npm. Babel digunakan untuk mengubah kode javascript yang digunakan oleh React agar bisa dijalankan di browser.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram