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

Source: Dev.to

Introduction

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. By the end of this post 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.

Analogy

2. Why Do We Need React Instead of Plain JavaScript?

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

Real‑world 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 can break everything.

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

3. How React Solves the Problem

React introduces two concepts 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 independent pieces.

function LikeButton() {
  return Like;
}

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

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

Virtual DOM

Quick question: When you click “like” on a post — should the entire page reload, or just the like count?

Obviously just the like count. In plain JavaScript you have to figure that out yourself and manually update the right element.

React handles this automatically using a Virtual DOM:

1. React keeps a copy of the real DOM in memory — the Virtual DOM.
2. When something changes, React creates a new Virtual DOM.
3. It compares the old and new Virtual DOM.
4. It finds exactly what changed.
5. It updates only that part in the real DOM.

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 requests a new HTML page → the whole page reloads.
  • This is a Multi‑Page Application (MPA).

• Single‑Page Applications (SPAs) load 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 for a new page.

Analogy: Think of a TV. When you change channels, the TV itself does not restart; only what is playing on the screen changes. That’s exactly how an SPA works.

Quick question

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 an SPA in action.

5. Single‑Page Application vs. Multi‑Page Application

6. How to Set Up React

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

1. Create React App (CRA)
2. 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 [URL omitted].

Project structure

my-app/
├─ node_modules/
├─ public/
│  └─ index.html
├─ src/
│  ├─ App.js
│  └─ index.js
└─ package.json

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

8. Vite

Vite is a newer and faster build tool. It wasn’t 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 [URL omitted].

Project structure

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

Quick Summary — 5 Things to Remember

1. React is a JavaScript library used to build user interfaces.
2. Components let you break UI into reusable, isolated pieces.
3. The Virtual DOM makes UI updates fast and efficient.
4. SPAs load a single HTML page and swap content without full reloads.
5. You can start a React project with Create React App or Vite, depending on your needs.

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.