React is one of the most important technologies in modern frontend development, and today I focused on understanding why React exists and what problem it solves.

Before learning React syntax, I wanted to understand the bigger picture.

I explored:

• What React is

• Why React was created

• Problems with traditional DOM manipulation

• Components

• Declarative UI

• React and JavaScript

• Virtual DOM — high-level idea

• React project structure

• JSX introduction

• My first React component

Let's begin.

---

What is React?

React is a JavaScript library for building user interfaces.

It allows developers to create interfaces using reusable components.

Instead of managing an entire webpage manually, we can break the UI into smaller pieces.

For example:

Application
│
├── Navbar
├── Sidebar
├── ProductList
│   ├── ProductCard
│   ├── ProductCard
│   └── ProductCard
│
└── Footer

Each part can become a reusable React component.

---

Why Do We Need React?

With vanilla JavaScript, we can manipulate the DOM directly.

For example:

const title =
    document.querySelector("#title");

title.textContent =
    "Hello JavaScript";

This works.

But as applications become larger, manually managing the DOM can become difficult.

Imagine an application containing:

100+ UI elements
Multiple states
Dynamic data
User interactions
API responses
Forms
Authentication

Keeping track of which DOM elements need to change can become complicated.

React provides a different approach.

---

Imperative vs Declarative Programming

This is one of the most important ideas to understand when starting React.

Imperative

With vanilla JavaScript, we often tell the browser how to change the UI.

For example:

const button =
    document.querySelector("#button");

const count =
    document.querySelector("#count");

button.addEventListener(
    "click",
    () => {

        count.textContent =
            Number(count.textContent) + 1;

    }
);

We're explicitly telling JavaScript:

Find the element
        ↓
Listen for click
        ↓
Read current value
        ↓
Calculate new value
        ↓
Update DOM

---

Declarative UI

React takes a more declarative approach.

Instead of manually telling the DOM every step, we describe what the UI should look like for a particular state.

Conceptually:

State
 ↓
UI

If state changes:

New State
 ↓
Updated UI

React handles the necessary DOM updates.

This is one of the biggest mindset changes when moving from vanilla JavaScript to React.

---

What is a Component?

A component is a reusable piece of UI.

A simple React component can look like:

function Welcome() {

    return <h1>Hello React!</h1>;

}

This component describes part of the interface.

We can use it inside another component:

function App() {

    return (
        <div>
            <Welcome />
        </div>
    );

}

This gives us a component hierarchy.

---

Component-Based Architecture

Instead of thinking:

One giant webpage

we can think:

App
│
├── Navbar
├── Hero
├── Features
│   ├── FeatureCard
│   ├── FeatureCard
│   └── FeatureCard
│
└── Footer

Each component can have its own responsibility.

This makes applications easier to organize and maintain.

---

React Components Are JavaScript

One thing I learned today is that React isn't a completely different programming language.

React is built on JavaScript.

For example:

function User() {

    const name = "Saurabh";

    return <h2>Hello {name}</h2>;

}

The JavaScript variable:

const name = "Saurabh";

is being used inside JSX.

This is why having a strong JavaScript foundation is so important before learning React.

---

What is JSX?

JSX stands for JavaScript XML.

It allows us to write HTML-like syntax inside JavaScript.

For example:

const element = <h1>Hello React</h1>;

At first glance, this looks like HTML.

But it's actually JSX syntax being used inside JavaScript.

---

JSX Allows JavaScript Expressions

We can use JavaScript expressions inside JSX using:

{ }

Example:

function App() {

    const name = "Saurabh";

    return (
        <h1>
            Hello {name}
        </h1>
    );

}

The {name} expression is evaluated using JavaScript.

---

JSX Isn't HTML

Although JSX looks similar to HTML, there are differences.

For example:

HTML:

<div class="card"></div>

JSX:

<div className="card"></div>

Instead of:

class

React uses:

className

because JSX follows JavaScript-oriented naming conventions for many DOM properties.

---

JSX Must Have One Parent

A component's returned JSX generally needs one root element.

This works:

function App() {

    return (
        <div>
            <h1>Hello</h1>
            <p>Welcome</p>
        </div>
    );

}

But returning multiple sibling elements without a wrapper is not valid JSX.

We can also use a React Fragment:

function App() {

    return (
        <>
            <h1>Hello</h1>
            <p>Welcome</p>
        </>
    );

}

---

Creating a React Project

A common modern way to start a React project is with Vite.

For example:

npm create vite@latest

Then choose:

React

and:

JavaScript

After creating the project:

npm install

Then start the development server:

npm run dev

This gives us a local development environment for building React applications.

---

React Project Structure

A typical Vite React project contains files such as:

my-react-app/
│
├── node_modules/
├── public/
│
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── .gitignore
├── package.json
├── package-lock.json
└── vite.config.js

The exact structure can vary depending on the project setup.

---

Understanding main.jsx

One important file is:

main.jsx

This is where the React application is mounted into the webpage.

A simplified version looks like:

import {
    StrictMode
} from "react";

import {
    createRoot
} from "react-dom/client";

import App from "./App.jsx";

createRoot(
    document.getElementById("root")
).render(
    <StrictMode>
        <App />
    </StrictMode>
);

The important idea is:

HTML root element
        ↓
React
        ↓
App component

---

Understanding App.jsx

App.jsx usually contains the main application component.

For example:

function App() {

    return (
        <h1>
            My First React App
        </h1>
    );

}

export default App;

Then main.jsx renders <App />.

---

React Root

Our HTML might contain:

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

React uses this element as the root container for the application.

Conceptually:

index.html

<div id="root">
        ↓
     React
        ↓
       App
        ↓
   Components

React manages the UI inside this root.

---

Virtual DOM – High-Level Understanding

One term you'll hear frequently when learning React is:

Virtual DOM.

At a high level, React maintains an in-memory representation of the UI.

When the application state changes, React can determine what needs to change and update the browser DOM accordingly.

Conceptually:

State Changes
      ↓
React creates/reconciles UI representation
      ↓
Determine necessary DOM updates
      ↓
Browser DOM updated

The important thing for now isn't memorizing implementation details.

The important idea is:

I describe the UI, and React manages the DOM updates.

---

React and Vanilla JavaScript

Vanilla JavaScript

I manually work with the DOM:

element.textContent = "Hello";
element.classList.add("active");
element.remove();

React

I describe what the UI should look like:

return <h1>Hello</h1>;

and React handles the DOM updates based on the component's state and props.

This difference will become much clearer once I start learning state.

---

React Components Should Be Reusable

Instead of repeating:

<h2>Product</h2>
<p>₹999</p>

we can create:

function ProductCard() {

    return (
        <div>
            <h2>Product</h2>
            <p>₹999</p>
        </div>
    );

}

Then reuse:

function App() {

    return (
        <>
            <ProductCard />
            <ProductCard />
            <ProductCard />
        </>
    );

}

Later, we'll make these components dynamic using props.

---

Why My JavaScript Knowledge Matters

The JavaScript concepts I've already learned will directly appear in React.

For example:

Functions

React components are commonly functions.

function App() {

    return <h1>Hello</h1>;

}

Objects

React data is often represented using objects.

const user = {
    name: "Saurabh",
    age: 22
};

Arrays

Lists are commonly rendered using array methods.

users.map(user => ...)

Destructuring

Very common with props:

const { name, age } = user;

Spread

Frequently used for creating updated objects and arrays.

const updatedUser = {
    ...user,
    age: 23
};

This is why completing the JavaScript section first was so important.

---

Best Practices

✔ Build a strong understanding of JavaScript alongside React.

✔ Keep components focused on a clear responsibility.

✔ Use meaningful component names.

✔ Prefer reusable components instead of duplicating UI.

✔ Don't manipulate the DOM directly unless there's a specific reason.

✔ Understand JSX rather than treating it as normal HTML.

✔ Keep the component hierarchy organized.

---

My Biggest Takeaway

Day 61 marks the beginning of React. ⚛️

The biggest thing I learned today is that React isn't replacing JavaScript.

It's giving me a better way to build and manage complex user interfaces using JavaScript.

The biggest mindset shift is:

Vanilla JavaScript → Tell the DOM how to change

React → Describe what the UI should look like

And the foundation underneath everything is still:

JavaScript.

After completing the JavaScript section, I'm now ready to start learning how React uses those fundamentals to build scalable, component-based interfaces.

This is the beginning of the next chapter.

JavaScript → React