React JavaScript framework
React (often called React.js or just React) is a JavaScript library for building user interfaces. It lets developers create reusable UI components, manage state, and render fast, interactive web apps by efficiently updating only the parts of the page that change.
What is JS?
JS is JavaScript. I used to think that JS and Java were related some 20+ years ago. Then I found out not. I was a backend programmer: php. (Not like I wanted tp. I wanted to start programming professionally in Java). But got a job helping a senior programmer build a shopping cart in php. That was twenty plus tears ago in SE Asia(then technologically deprived of many ways). We built a cart using php3 raw code, no framework.
Anyway.
Java Script was boring and then only thing it was good for was front end validation. I introduced Ajax in the work place. Look so cool and then jQuery.
React JS is a framework of Java Script. Before learning React you have to learn Java Script.
Basics of Java Script
Synatx-JS
Learn first HTML first.
<script>
var x=5;
var y=6;
var sum=x+y;
document. Write(sum);
</script>
Before getting into programming backend, learn C. Then it would become easier. The green color are the variables declared in a JavaScript. The semicolon is the full stop.
Variables and Datatypes
Declaring a variable:
var <variable name>;
Note that the semi colon is optional.
We declare a variable with the var keyword. As in C, C++,Java.
To declare a in Java we do following:
int age=15;
int is data type.
age is variable name.
14 is variable value.
In Java script we do not have to write the data type.
Here two examples in Java:
Example 1:
int x=5;
int y=10;
int sum=x=y;
System.out.println(sum); //outputs 15
In Java; is mandatory.
We want do this in Java Script.(Example 1 in Java Script).
That would be :
<script>
var x=5;
var y=10;
var sum=x+y;
document. write(sum);
</script>
This above line executes the Java Script. So how we see the out put.
One is in a web page:
<html>
<head>
<title>
<script>
var x=5;
var y=10;
var sum=x+y;
document. write(sum);
</script>
<title>
<head>
</html?Example 2:
This example will be dealing with string.
In Java:
String str=” Welcome to Techkhala”;
System.out.println. (str);
In JS we do this like this. But before we go further, a thing about declaration of variable to be said.
Instead of using var keyword there is using of let keyword. This was introduced in 2015. The variables that were declared with let cannot be redeclared.
let carn1 = “Toyota”; // Double quotes;
let carn2 = ‘Audi’;
You can either use single or Double quotes.
let lenghtstr=carn2.length // length of string 2.(carn2)
We talk about the DOM model. This the way objects in a web document is arranged.
—
Understanding the DOM and Virtual DOM in React
To understand how React works, you must first understand the **DOM** — and why React created the **Virtual DOM** to make websites faster.
—
1. What Is the DOM? (Document Object Model)
The **DOM** is a tree-like structure that represents everything on a webpage.
Imagine your webpage as a family tree full of elements:
“`
<html>
<body>
<div>
<h1>Hello</h1>
<p>This is a paragraph</p>
</div>
</body>
</html>
“`
The browser converts your HTML into this tree so it can:
* Display text
* Show images
* Change colors
* Respond to buttons
* Update
But the problem:
Updating the real DOM is slow
Whenever you change something (like updating a number or adding a message):
* The browser recalculates layout
* Repaints the screen
* Re-renders many parts
Even if only *one small piece* changes, the browser may update *many elements*.
This makes large, interactive websites slow.
2. Virtual DOM — React’s Smart Solution
React created the **Virtual DOM** to solve this problem
What is it?
The **Virtual DOM** is a lightweight copy of the real DOM that lives in memory — not on the screen.
When something changes:
1. React updates the Virtual DOM first
2. React compares the old and new Virtual DOM (called *diffing*)
3. React finds the exact place where changes happened
4. It updates **only that small part** of the real DOM
This avoids unnecessary browser operations.
—
3. How React Uses Components + Virtual DOM
React asks you to build your UI with components
“`jsx
function Welcome() {
return <h1>Hello React!</h1>;
}
“`
Each component has:
* **State** (data that changes)
* **Props** (inputs)
* **UI elements** (what you see)
When the **state** changes:
“`jsx
setCount(count + 1);
“`
React:
1. Creates a new Virtual DOM version of the component
2. Compares it with the old version
3. Updates only the changed node in the real DOM
For example, if only a number changes inside a button, React updates only that number — not the whole page.
Window (Global Root)
│
├── document (DOM)
│ ├── html
│ │ ├── head
│ │ └── body
│ │ ├── div
│ │ ├── h1
│ │ ├── p
│ │ └── button
│ └── … (other DOM node types)
│
├── console
│ ├── log()
│ ├── warn()
│ └── error()
│
├── location
│ ├── href
│ ├── hostname
│ └── reload()
│
├── history
│ ├── back()
│ └── forward()
│
├── localStorage
│ ├── setItem()
│ └── getItem()
│
├── fetch (Networking)
│ └── Promise
│
└── Events
├── click
├── input
├── submit
└── keypress
JavaScript Object Hierarchy (Browser Environment)
Application of REACT
About The Author
