DHANRAJ S

Posted on Apr 16

React Explained — What It Is, Why You Need It, and How to Set It Up the Right Way

#react #webdev #beginners #javascript

Hey!

Before we start — have you ever built something with JavaScript and thought:

"Why is this getting so complicated so fast?"

You're not alone. Every developer hits that wall.

That's exactly why React exists. And by the end of this blog, you'll know what React is, why it matters, and how to get started with it the right way.

Let's go.

1. What Is React?

React is a JavaScript library built by Facebook (now Meta) in 2013.

It is used to build user interfaces — the part of the app that users see and interact with.

React does not replace JavaScript. It is written in JavaScript. But it gives you a smarter, cleaner way to build complex UIs.

Think of it like this.

JavaScript is like raw ingredients — flour, eggs, butter. You can make a cake with them, but it takes a lot of effort and the process can get messy fast.

React is like a baking kit — everything is organized, structured, and designed to make the process faster and less error-prone.

Same ingredients. Much better result.

2. Why Do We Need React Instead of JavaScript?

This is the most important question. Let's be honest about it.

Plain JavaScript works. You can build anything with it. But as your app grows — things start to break down.

Here is a real example.

Imagine you are building a social media feed. You have:

A list of posts
A like button on each post
A comment count that updates when someone comments
A notification bell that updates when something changes
A user profile section at the top

In plain JavaScript — every time something changes, you have to manually find the right element in the DOM and update it.

// Plain JavaScript — updating manually every time
document.getElementById("like-count").innerText = newCount;
document.getElementById("notification-bell").innerText = newNotifications;
document.getElementById("comment-count").innerText = newComments;

Now imagine doing this for 50 different parts of the page.

It gets messy. It gets slow. And one mistake breaks everything.

React solves this with one core idea — components and a virtual DOM.

3. How React Solves the Problem

React introduces two things that change everything.

Components

A component is a small, reusable piece of UI.

Instead of writing one giant HTML file — you break your page into small independent pieces.

function LikeButton() {
  return <button>Like</button>;
}

function Post() {
  return (
    <div>
      <p>This is a post</p>
      <LikeButton />
    </div>
  );
}

Each component manages its own logic and display. You build once — use anywhere.

Virtual DOM

Quick question for you.

When you click "like" on a post — should the entire page reload? Or just the like count?

Obviously just the like count.

But in plain JavaScript, you have to figure that out yourself and manually update the right element.

React handles this automatically using a Virtual DOM.

Here is how it works:

React keeps a copy of the real DOM in memory — this is the Virtual DOM
When something changes, React creates a new Virtual DOM
It compares the old and new Virtual DOM
It finds exactly what changed
It updates only that part in the real DOM

The result? Faster updates. Less work. No manual DOM hunting.

4. What Is a Single Page Application (SPA)?

Before we go further — you need to understand this concept. Because React is built for it.

Traditional websites reload the entire page every time you click a link.

You click "About" — the browser sends a request to the server, the server sends back a whole new HTML page, the browser loads it from scratch.

That is a Multi Page Application (MPA).

A Single Page Application works differently.

The browser loads one HTML page at the start. After that — React takes over. When you navigate, React swaps out just the content on screen. No full page reload. No request to the server for a new page.

Think of it like a TV.

When you change channels — the TV itself does not restart. Only what is playing on screen changes.

That is exactly how an SPA works.

5. Single Page Application vs Multi Page Application

	Single Page Application (SPA)	Multi Page Application (MPA)
How it works	One HTML file, content swaps on screen	Separate HTML page for every route
Page reload	No full reload on navigation	Full reload on every navigation
Speed after load	Very fast	Depends on server response
Initial load	Slightly slower (loads everything upfront)	Faster initial load
SEO	Needs extra setup for SEO	Naturally good for SEO
Best for	Dashboards, apps, tools	Blogs, e-commerce, content sites
Examples	Gmail, Notion, Figma	Wikipedia, news sites, Amazon

Quick question for you.

When you use Gmail — do you notice the page never fully reloads when you open an email? You just see the email content appear on the right side.

That is a Single Page Application in action.

6. How to Set Up React

There are two popular ways to set up a React project:

Create React App (CRA)
Vite

Let's understand both before you pick one.

7. Create React App (CRA)

CRA was the official way to start a React project for a long time.

You run one command and it sets up everything for you — React, Webpack, Babel, and a development server.

npx create-react-app my-app
cd my-app
npm start

That's it. Your React app runs at http://localhost:3000.

The project structure looks like this:

my-app/
  node_modules/
  public/
    index.html
  src/
    App.js
    index.js
  package.json

src/App.js is where you write your React code.
public/index.html is the single HTML file React injects into.

8. Vite

Vite is a newer and faster build tool.

It was not built specifically for React — but it supports React very well and has become the preferred choice for most developers today.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Your React app runs at http://localhost:5173.

The project structure looks like this:

my-app/
  node_modules/
  public/
  src/
    App.jsx
    main.jsx
  index.html
  package.json
  vite.config.js

Quick Summary — 5 Things to Remember

React is a JavaScript library — used to build user interfaces with reusable components.
React solves the DOM problem — instead of manually updating the page, React figures out what changed and updates only that part using the Virtual DOM.
React is built for SPAs — Single Page Applications load once and swap content without full page reloads, making them fast and smooth.
SPA vs MPA — SPAs are best for apps and dashboards. MPAs are best for content-heavy sites that need SEO out of the box.
Use Vite, not CRA — CRA is deprecated. Vite is faster, lighter, and actively supported. It is the right choice for every new React project today.

React can feel like a big jump at first. But once you understand components, state, and how the Virtual DOM works — everything starts to click.

The best way to learn React is to build something with it. Start small. A counter. A todo list. A weather card.

Pick one and build it.

If this helped you understand React better, drop a comment below. What are you planning to build first?

Thanks for reading. Keep building.