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>
Solution Code (Exercise 2)
I hope you learned something from this article and if you like this article then do not forget to give heart, unicorn, etc.
My name is Bipin Rajbhar and I am a software engineer at QuikieApps and you can follow or connect to me on Twitter and Linked In
Resources
The Beginner's Guide to React
Epic React