How react works internally?
Anis SAFIA - ???? ??????? ? ???? ????
Software Engineer & Front-End Developer | React.js | ALX Africa Graduate | Proficient in JavaScript, TypeScript, HTML, CSS, Bootstrap, SASS, MySQL, Git, GitHub, Linux | Open to Global Opportunities
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 page2. Get the div tag in the DOM by using its id, here it is root. You can use any name, but root is advisable.3. Render the HTML element in the root.
领英推荐
<!-- Telling to react how and where to render -->
<script>
// This is the content needs to be displayed in the div tag
function App() {
return React.createElement("header", null, "Hello React!!")
}
// making root element for the DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
// Rendering DOM on the web page
root.render(React.createElement(App))
</script>
Step 4: Final webpage looks like below with react code.
<!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>
<!-- 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>
<!-- Telling to react how and where to render -->
<script>
// This is the content needs to be displayed in the div tag
function App() {
return React.createElement("header", null, "Hello React!!")
}
// making root element for the DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
// Rendering DOM on the web page
root.render(React.createElement(App))
</script>
</body>
</html>
This is how react app renders react components on a webpage.