Member-only story
How react works internally?
2 min readNov 19, 2023
- React is a JavaScript library, check What is react here
- It renders react components in the webpage or UI.
- Rendering is basically showing HTML content on the webpage
- So react should have one HTML file to show the content.
- All the react related code be part of body tag in the HTML file
- Lets look how this works step by step
Step 1: Normal HTML file with div tag in the body. div is the one where all react components will be rendered
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure react</title>
</head>
<body>
<!-- all components will be rendered in this div
as React making this div as root of the DOM. -->
<div id="root"></div>
</body>
</html>Step2: Add below react and DOM scripts to the HTML file after div tag. (Normal we will install these two modules while creating app)
<!-- this is for react library -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- This is for DOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>Step3: Render react components in div tag use react and DOM libraries. For rendering, we need to embed react code in script tag.
1. First need to create a element which needs to be displayed on the web page…
