JavaScript Rendered Hello World

#javascript #react #beginners #tutorial

In this article, we are not going to use React at all. Instead, we are going to use JavaScript to create a div DOM element with the text content "Hello World".

Why we are doing this?
It's very important to have a basic understanding of how the DOM elements are created using JavaScript because it will help you to understand how React really works under the hood.

Exercise 1

<!DOCTYPE html>
<html>
  <head>
    <title>Excercise</title>
  </head>
  <body>
    <!-- create a 'div' element with an id 'root' -->

    <script>
      // create a 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set the textContent of div element to 'Hello World'
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

      // append the div element to root div using append method
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
    </script>
  </body>
</html>

Solution Code (Exercise 1)

Exercise 2

<!DOCTYPE html>
<html>
  <head>
    <title>Excercise</title>
  </head>
  <body>
    <script>
      // create a root 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set id attribute to 'root' for root div element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

      // append the root div element to body using append
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

      // create a 'div' element
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

      // set the textContent of div element to 'Hello World'
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

      // append the div element to root div using append method
      // 📜 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
    </script>
  </body>
</html>