About React

React is a JavaScript library for building interactive UI user interfaces.

1. Why React ?

React is exactly why as it:

• Breaking down for simplicity : It helps to breaking down a big UI into small independent chunks of UI. This helps in better modularity and maintainability

• Reusable components: <CustomCardComponent /> rather writing same code just render the same logic.

• Virtual DOM: The concept of the Virtual DOM allows React to update only the parts of the page that have changed, instead of reloading the entire page. This makes UI rendering significantly faster and more efficient.

• State Management: With the help of state you can provide dynamic interactivity to UI as when the state changes the UI is updated dynamically by re-rendering the virtual DOM handled by React

• Scalability: As the code grows, so maintaining the raw html, css becomes tricky but with react the code can be structured properly

2. How does React works ?

React uses the concept of virtual DOM. So, whenever any changes happens React compares the old Virtual DOM with the new Virtual DOM created in the form trees then by using diffing algorithm it tracks any change in state. After knowing the change React paints the only updated part to the real DOM using reconciliation.

Diffing Algorithm: The algorithm through which React identifies the changes happened between the old virtual DOM and new virtual DOM.

Reconciliation: The whole process through which React identifies the changes in virtual DOM and then finally updating the relevant changed UI part into Real DOM

3. What is JSX ?

JSX stands for JavaScript XML. It is basically a syntax extension to the JavaScript such that you can able to write HTML like code in JavaScript. Although JavaScript doesn’t identifies this straight but Babel , the transpiler that converts this JSX back into plain JavaScript.

for example:

// Plain JavaScript cannot understand this
const element = <h1>Hello, World!</h1>;

so it is converted as like this

const element = React.createElement("h1", null, "Hello, World!");
/** Meaning React create an element with type h1 having no properties but has a children 
    which is a text that goes by "Hello, World!"

Example With and Without JSX

JSX version:

const element = (
  <div>
    <h1>Hello</h1>
    <p>Welcome to React!</p>
  </div>
);

Without JSX:

const element = React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hello"),
  React.createElement("p", null, "Welcome to React!")
);

---

Key Points

1. JSX → easier to read/write; looks like HTML.

2. The browser sees no JSX; it’s all converted to JS behind the scenes by Babel.

---

✅ In short:

JSX is optional; React can work entirely with React.createElement().
JSX just makes UI code cleaner, readable, and easier to write.

4.Rendering React Element into Real DOM

In order to render the react element to the real DOM. There are two successive steps:

• Pass any valid DOM element to the React DOM.

• Then with the help of render() method render the element.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

By creation of root by React DOM all the elements are managed within react DOM easily.

4.1. Single Root React App

HTML
<div id="root"></div>

React Virtual DOM
App
 ├─ Nav
 └─ Main

Real DOM
<div id="root">
 ├─ <nav>...</nav>
 └─ <main>...</main>

• Everything is inside one root <div>.

• React manages all components under this single tree.

---

4.2. Multiple Roots in Existing App

HTML
<div id="header-root"></div>
<div id="sidebar-root"></div>
<div id="footer-root"></div>

React Virtual DOM
Header        Sidebar       Footer
  |             |            |
<nav>...</nav>  <aside>...</aside> <footer>...</footer>

Real DOM
<div id="header-root"><nav>...</nav></div>
<div id="sidebar-root"><aside>...</aside></div>
<div id="footer-root"><footer>...</footer></div>

• Each root manages its own isolated React tree

5. Components and Props

Components: In actual components are just a pure JavaScript plane functions that accepts an object as arguments (called as props) and returns a React element. Components breaks the UI into smaller, independent that we can think upon.

Props: Props stands for properties. It is basically an object consisting of children and JSX attributes like <MyComp value={23} /> (here, value is the JSX attribute). Any kind of data that needs to be passed from parent to child can be done with the help of this.

6. State

State in React is a memory of a component. Normally, any change in the state of a component leads to trigger re-rendering.

States are expected to be immutable and should not be directly be mutated. If it does then React won’t recognise the changes. Use the method setState() for this.

7. Lifecycle methods

Lifecycle methods are the special methods that come with class based component in React and are called depending whether the component mounts and unmounts in DOM. For example: componentDidMount() , componentWillMount()

8.Hooks

Hooks are basically functions that helps to integrate the React features like using states, handling effect into functional based components without actually writing class based components. Since, writing functional based component is very cleaner and more readable and due to absence of state and lifecycle methods in functional based component hooks came and played a convenient role.