DEV Community

Cover image for React Mastery Series – Day 2: What is React and Why Was It Created?
Siva Samanthapudi
Siva Samanthapudi

Posted on

React Mastery Series – Day 2: What is React and Why Was It Created?

#webdev #javascript #react #reactjsdevelopment

Welcome back to the React Mastery Series.

In Day 1, we introduced the roadmap of this series and discussed what we will cover — from React fundamentals to enterprise-level architecture.

Today, we will start with the most important question:

What is React, and why was it created?

What is React?

React is an open-source JavaScript library for building user interfaces, especially single-page applications (SPAs).

It was created by engineers at Meta (Facebook) and was initially released in 2013.

React focuses on one core idea:

Build complex user interfaces by breaking them into small, reusable components.

Instead of creating a complete application as one large piece of code, React encourages developers to divide the UI into independent and manageable components.

Example:

A banking application dashboard can be divided into:

Dashboard
│
├── Header
│
├── AccountSummary
│
├── TransactionList
│
├── TransferMoneyForm
│
└── Notifications
Enter fullscreen mode Exit fullscreen mode

Each part can be developed, tested, and maintained independently.

Why Was React Created?

Before React, developers commonly used traditional JavaScript and libraries like jQuery to update web pages.

For small applications, this approach worked well.

But as applications became larger, several challenges appeared.

1. Managing Complex UI Updates

Imagine a banking application where:

  • Account balance changes
  • Transactions are updated
  • Notifications appear
  • User profile information changes

With traditional DOM manipulation, developers had to manually find elements and update them.

Example:

document.getElementById("balance").innerHTML = "$5000";
Enter fullscreen mode Exit fullscreen mode

As the application grew, managing thousands of DOM updates became difficult.

React introduced a different approach:

Describe what the UI should look like, and React manages the updates.

The Problem With Direct DOM Manipulation

The browser provides the Document Object Model (DOM), which represents the HTML structure.

Example:

HTML
 |
DOM Tree
 |
Browser Rendering
Enter fullscreen mode Exit fullscreen mode

When we update the DOM frequently:

  1. Browser recalculates layout
  2. Browser repaints elements
  3. Performance can decrease

For large applications, frequent DOM changes can become expensive.

React introduced the concept of the Virtual DOM to solve this problem.

What is the Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM.

React follows this process:

User Action
     |
     ↓
State Change
     |
     ↓
Create New Virtual DOM
     |
     ↓
Compare With Previous Virtual DOM
     |
     ↓
Find Differences
     |
     ↓
Update Only Required DOM Elements
Enter fullscreen mode Exit fullscreen mode

This comparison process is called Reconciliation.

Example:

Before:

User List

John
David
Mike
Enter fullscreen mode Exit fullscreen mode

After adding a user:

User List

John
David
Mike
Sarah
Enter fullscreen mode Exit fullscreen mode

React identifies that only "Sarah" needs to be added instead of rebuilding the entire list.

React Is Declarative

One of the biggest differences between traditional JavaScript and React is:

Imperative Programming

You tell the computer how to do something.

Example:

const button = document.createElement("button");

button.innerHTML = "Save";

document.body.appendChild(button);
Enter fullscreen mode Exit fullscreen mode

You manage every step.

Declarative Programming

You describe what you want, and React handles the process.

Example:

function Button() {
  return (
    <button>
      Save
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

React decides how to update the UI.

Component-Based Architecture

React applications are built using components.

A component is a reusable piece of UI.

Example:

function WelcomeMessage() {
  return (
    <h1>
      Welcome to React
    </h1>
  );
}
Enter fullscreen mode Exit fullscreen mode

This component can be reused anywhere.

Benefits:

✅ Reusability
✅ Maintainability
✅ Easier testing
✅ Better team collaboration

Why React Became Popular?

React gained popularity because it provided:

1. Component Reusability

Build once and reuse everywhere.

2. Better Performance

Virtual DOM reduces unnecessary UI updates.

3. Strong Ecosystem

React provides access to:

  • React Router
  • Redux
  • Next.js
  • React Query
  • Testing libraries

4. Large Community

Millions of developers and companies use React worldwide.

5. Enterprise Adoption

React is widely used in large-scale applications across industries:

  • Banking
  • E-commerce
  • Healthcare
  • Social platforms
  • SaaS products

React vs Traditional JavaScript

Traditional JavaScript React
Direct DOM manipulation Virtual DOM
Manual UI updates Automatic UI updates
Difficult for large applications Component-based architecture
Less reusable code Reusable components
Imperative approach Declarative approach

Key Takeaways

Today we learned:

✅ React is a JavaScript library for building user interfaces
✅ React was created to solve complex UI management problems
✅ Virtual DOM improves UI update efficiency
✅ React follows a declarative programming approach
✅ Components are the foundation of React applications

Coming Next 🚀

Day 3: Setting Up React Development Environment

We will explore:

  • Creating a React application
  • React project structure
  • Understanding package.json
  • React build process
  • Development workflow

Stay tuned! 🚀

Top comments (0)