React from Scratch #1: Not a Library, a Mindset

Have you ever opened a React project and thought, “Why does this look so complicated?”

You see things like useState, JSX, components, and hooks, and it feels like learning an entirely new language.

But here’s the reality:

React is not magic. React is just JavaScript — with a better way to think about building user interfaces.

This article starts a new series called “React from Scratch”, where we’ll go step by step from the fundamentals to more advanced concepts.

Today we’ll build the mental model that makes React easier to understand.

The Big Idea: React Is a Way of Thinking

Before React and other modern frameworks became popular, most websites worked in a simple way.

1. The browser loads a page from the server.
2. The user clicks a link or button.
3. The browser loads an entirely new page.

This is called a Multi-Page Application (MPA).

Each user interaction usually triggers a full page reload.

That model worked well for traditional websites, but it doesn’t feel smooth for modern applications like:

• Gmail
• Twitter
• Netflix
• Facebook

When you click around these apps, the page does not fully reload. The interface updates instantly.

This leads us to an important concept.

What Is a Single Page Application (SPA)?

A Single Page Application (SPA) loads one HTML page and updates parts of that page dynamically using JavaScript.

Instead of refreshing the entire page, the application only updates the sections that change.

Traditional websites (MPA):

• Click a link
• The browser requests a new page
• The entire page reloads

Modern applications (SPA):

• Click a button
• Only a specific part of the interface updates
• The page itself does not reload

This approach makes applications feel faster, smoother, and more interactive.

However, managing all those updates manually with JavaScript can quickly become complicated.

That’s where React becomes extremely useful.

The Problem React Solves

Imagine you are building a shopping cart interface.

When a user adds an item, several parts of the page need to update:

• The list of cart items
• The total price
• The cart icon counter
• Possibly the checkout button state

With plain JavaScript, you might write something like this:

document.querySelector("#cart-count").innerText = newCount;
document.querySelector("#total").innerText = total;
        

This works for small projects. But as an application grows, manually updating the DOM in many places becomes difficult to maintain.

React introduces a different idea:

Instead of manually updating the UI, you describe what the UI should look like based on the current data.

React then handles the updates automatically.

Understanding the Virtual DOM

To understand why React is fast, we need to talk about the DOM.

The DOM (Document Object Model) is the browser’s internal representation of your HTML. Updating the DOM directly is relatively slow because the browser has to recalculate layout and repaint elements.

React improves performance by introducing something called the Virtual DOM.

A helpful way to think about it is using a draft vs. final document analogy.

Imagine you are editing an important report.

You wouldn’t print a new final copy every time you change a sentence. Instead, you would:

1. Edit a draft version.
2. Compare the draft with the previous version.
3. Update only the parts that changed.

React works in a very similar way.

How the Virtual DOM works:

1. React creates a Virtual DOM, which is a lightweight copy of the real DOM.
2. When data changes, React updates the Virtual DOM first.
3. React compares the new version with the previous one.
4. Only the necessary changes are applied to the real DOM.

This process allows React to update the interface efficiently and predictably.

React Applications Are Built with Components

Another key concept in React is components.

A component is simply a reusable piece of the user interface.

For example, a typical application might include components such as:

• Navbar
• Product Card
• Search Bar
• Footer
• Button

Instead of writing one large block of UI code, React encourages you to break the interface into small, manageable pieces.

These components can then be reused throughout the application.

Two Types of React Components

Historically, React supported two different ways to create components.

1. Class Components

Earlier versions of React used JavaScript classes.

class Welcome extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}
        

Here is what happens in this code:

• class Welcome extends React.Component creates a component using a JavaScript class.
• The render() method defines what should appear on the screen.
• <h1>Hello World</h1> is the UI returned by the component.

While class components still work, they introduce additional complexity.

2. Functional Components

Today, most modern React applications use functional components.

function Welcome() {
  return <h1>Hello World</h1>;
}
        

Line by line:

• function Welcome() defines a React component.
• return specifies the UI the component should display.
• <h1>Hello World</h1> is JSX, which looks like HTML but runs inside JavaScript.

Functional components are simpler, cleaner, and easier to maintain, which is why modern React development focuses on them.

Throughout this series, we will focus entirely on functional components.

Key Takeaways

If you remember just a few things from this article, remember these ideas:

• React is fundamentally JavaScript with a new approach to building interfaces.
• It helps developers build Single Page Applications (SPAs).
• The Virtual DOM allows React to update the UI efficiently.
• React applications are built using components.
• Modern React development uses functional components.

Understanding these core ideas will make the rest of React much easier to learn.

Let’s Continue the Conversation

If you are currently learning React, what part has been the most confusing for you so far?

• Hooks
• JSX
• State vs Props
• The Virtual DOM

Share your thoughts in the comments. Your questions may help shape the next articles in this React from Scratch series.

Next in the series 👉: React from Scratch #2 Your First React App (What Actually Happens Behind the Scenes)